在textarea内渲染HTML

我需要能够在textarea(即<strong>,<i>,<u>,<a>)中渲染一些HTML标签,但textareas只能将它们的内容解释为文本。 是否有一个简单的方法做到这一点,而不依赖于外部库/插件(我使用jQuery)? 如果没有,你知道我可以用来做这个的任何jQuery插件吗?

这是不可能做一个textarea 。 你正在寻找的是一个内容可编辑div,这很容易完成:

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

在jsFiddle上检查这个小演示

编辑:感谢Tim Down指出,不需要JavaScript。

使用可编辑的div,您可以使用document.execCommand方法( 更多详细信息 )轻松地为您指定的标签和其他一些function提供支持。

 #text { width : 500px; min-height : 100px; border : 2px solid; } 
 <div id="text" contenteditable="true"></div> <button onclick="document.execCommand('bold');">toggle bold</button> <button onclick="document.execCommand('italic');">toggle italic</button> <button onclick="document.execCommand('underline');">toggle underline</button> 

在JSFiddle上试试这个例子

 <style> .editable { width: 300px; height: 200px; border: 1px solid #ccc; padding: 5px; resize: both; overflow: auto; } </style> <div class="editable" contenteditable="true"></div> <button class="bold">toggle red</button> <button class="italic">toggle italic</button> <script> function toggleRed() { var text = $('.editable').text(); $('.editable').html('<p style="color:red">'+text+'</p>'); } function toggleItalic() { var text = $('.editable').text(); $('.editable').html("<i>"+text+"</i>"); } $('.bold').click(function () { toggleRed(); }); $('.italic').click(function () { toggleItalic(); }); </script> 

Jeffrey Crowder编辑 – Web开发人员/ Windows程序员

我添加了一个JS小提琴的代码。

我有相同的问题,但相反,以下解决scheme。 我想把一个div中的html放在textarea中(所以我可以在我的网站上编辑一些反应,我希望textarea在同一个位置)。

 <div id="msg500">here some <strong>html</strong> <i>tags</i>.</div> 

把这个div的内容放在textarea中我使用:

 var content = $('#msg500').text(); $('#msg500').wrapInner('<textarea>'+content+'</textarea>'); 

这是一个附录。 您可以使用字符实体(如将<div>更改为&lt;div&gt; ),它将在textarea中呈现。 但是当它被保存时,textarea的值就是所呈现的文本。 所以你不需要解码。 我只是在浏览器上testing了这个(例如回到11)。

这是可能的<textarea>你需要做的唯一的事情就是使用Summernote所见即所得的编辑器

它解释了textarea中的HTML标签(即<strong><i><u><a>