Javascript 在文本区域内呈现HTML

我需要能够在textarea（即，，）内呈现一些HTML标记，但textarea仅将其内容解释为文本。有没有一种不依赖外部库/插件（我使用jQuery）的简单方法？

---

如果没有，您知道我可以使用任何jQuery插件来实现这一点吗？

这在

文本区域中是不可能实现的。你要找的是一个div，这很容易做到：

<div contenteditable="true"></div>

这是第一行。

请参见，如果
末尾有一个换行符，那么文本如何适合此处？

它工作得很好。



太好了。
使用可编辑的div，您可以使用方法
document.execCommand
（）轻松地为您指定的标记和某些其他功能提供支持


#文本{
宽度：500px；
最小高度：100px；
边框：2倍实心；
}

切换粗体
切换斜体
切换下划线
我也有同样的问题，但情况正好相反，解决方法如下。我想把一个div中的html放在一个textarea中（这样我就可以在我的网站上编辑一些反应；我想把textarea放在同一个位置。）

要将此div的内容放入我使用的文本区域，请执行以下操作：


var content=$（'#msg500'）.text（）；
$（'#msg500'）.wrapInner（''+内容+''）

这里有一些html标签。
这是对它的补充。您可以使用字符实体（例如将
更改为
div
），它将在文本区域中呈现。但保存时，textarea的值是呈现的文本。所以你不需要去编码。我刚刚跨浏览器测试了这一点（即返回到11）。
试试这个例子


function-toggleRed（）{
var text=$（'.editable'）.text（）；
$（'.editable'）.html（'
'+text+'
'）；
}
函数toggleItalic（）{
var text=$（'.editable'）.text（）；
$（'.editable'）.html（“+text+”）；
}
$（'.bold'）。单击（函数（）{
切换（）；
});
$（'.italic'）。单击（函数（）{
切换斜体（）；
});
。可编辑{
宽度：300px；
高度：200px；
边框：1px实心#ccc；
填充物：5px；
调整大小：两者；
溢出：自动；
}

切换红色
切换斜体
这可以通过

你唯一需要做的就是使用

它解释文本区域内的HTML标记（即
，
，
，
）
因为您只说了渲染，所以可以。你可以这样做：
function render（）{
var inp=document.getElementById（“框”）；
风险值数据=`
${inp.value}无法触及此项
`;
var blob=new blob（[data]，{type:'image/svg+xml'}）；
var url=url.createObjectURL（blob）；
inp.style.backgroundImage=“url”（+url.createObjectURL（blob）+”）；
}
onload=函数（）{
render（）；
ro=新的调整大小的观察者（渲染）；
ro.观察（文件.getElementById（“框”））；
}
#框{
颜色：透明；
插入符号颜色：黑色；
字体样式：normal；/*必须与svg中的相同，插入符号才能对齐*/
字体变体：正常；
字体大小：13.3px；
填充：2px；
字体系列：monospace；
}
你可以编辑我唯一的方法是通过CSS定位技巧将HTML标记覆盖在textarea标记的内容上。没有什么能帮助您说服浏览器以不同的方式呈现textarea内容。（你为什么“需要”这样做呢？）我只需要用户能够为他输入的文本添加一些格式样式（就像你在Wordpress上写文章一样）。我不需要所有的功能，比如文本对齐等等，只需要那些基本的标记。如果不使用javascript，你就无法实际使用它，或者使用ajax提交更改，或者将更改复制到表单输入中，这真是太遗憾了。如果有人找到了一种方法，我会非常感兴趣的@yckart：嗯，我不认为这实际上是有效的，即使它在我尝试过的所有浏览器中都有效。而不是布尔属性（有一个
inherit
状态以及
true
和
false
），我认为这意味着指定一个值是强制性的，尽管我找不到规范的确定位来确认这一点。MDN尽管如此。@yckart:我假设浏览器将
contenteditable
无值解释为与
contenteditable=“”
相同，后者又与
contenteditable=“true”
相同。这并不比
文本区更好。在小提琴上键入
一些内容
，你就可以得到准确的文本。HTML没有被应用。@MarcusEkwall，但问题不在于HTML呈现吗？我真的很想让它对我有用，但它没有。例如
检查url Bhttp://localhost/Dashboard.aspx/B BR工具于2015年10月11日凌晨3:56:58开始BR不显示为HTML。我用的是Chrome 46.Hm。我将该字符串直接复制粘贴到html文档中，并在Chrome版本48.0.2552.0 dev（64位）OS X 10.11.1中正确呈现标记。所以这可能是版本问题。我一直在为这个投票，所以这里有一支笔：如果你把我的测试，那么它会以斜体显示吗？不但这就是“渲染”的含义。这在一些浏览器中不起作用，只是在2016年将其添加为注释。这真是太棒了，简直是太棒了，为我节省了大量的工作！看起来它已经被弃用了-它不使用textarea真是太丢人了。它使用div，不能与表单一起提交。它确实与textarea一起工作，只需尝试将id赋予textarea而不是div。我使用textarea和summernote创建了一个完整的项目。很好用！有什么意义？如果使用textarea，其行为与ckeditor相同。无法按要求呈现HTML标记。为什么要使用所见即所得编辑器？这真的不是答案，抱歉。它不使用textarea。不是答案。只对部分文本应用样式怎么样？