在textarea内部渲染HTML

146

我需要能够在文本区域（即<strong>，<i>，<u>，<a>）中呈现一些HTML标记，但是textareas仅将其内容解释为文本。有没有一种简单的方法，而无需依赖外部库/插件（我正在使用jQuery）？如果不是，您是否知道我可以使用任何jQuery插件来执行此操作？

— 编码和尚
source

唯一的方法是通过CSS定位技巧将HTML标记覆盖在textarea标签的内容上。没有什么可以帮助您说服浏览器以不同的方式呈现文本区域内容。（为什么您确实需要这样做？）

— 尖尖的

我只需要用户能够向他输入的文本添加一些格式设置样式（就像您在Wordpress上写文章时一样）。我只是不需要像文本对齐等的所有功能，而只需要那些基本标记。

— 编码僧侣

234

这与不可能textarea。您正在寻找的是一个内容可编辑的 div，这很容易做到：

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

jsFiddle

div.editable {
    width: 300px;
    height: 200px;
    border: 1px solid #ccc;
    padding: 5px;
}

strong {
  font-weight: bold;
}

<div contenteditable="true">This is the first line.<br>
See, how the text fits here, also if<br>there is a <strong>linebreak</strong> at the end?
<br>It works nicely.
<br>
<br><span style="color: lightgreen">Great</span>.
</div>

展开摘要

— 梅克沃尔
source

8

真是可惜，如果不使用javascript来使用ajax提交更改或将更改复制到表单输入中，您几乎无法使用此功能。如果有人找到了一种方法，我会很感兴趣！

— 奔

3

@yckart：好吧，尽管它在我尝试过的所有浏览器中都可以使用，但我认为这实际上不是有效的。contenteditable是一个枚举属性，而不是一个布尔属性（有一个inherit状态以及true和false），我认为这意味着，指定的值是强制性的，但我无法找到该规范的明确的一点证实了这一点。MDN 似乎同意。

— Tim Down

2

@yckart：我假设浏览器解释contenteditable为与相同contenteditable=""，而没有值contenteditable="true"。

— Tim Down

7

这没什么比更好textarea。<strong>someting</strong>在小提琴中打字会留下确切的文字。不应用HTML。

— 马特·艾伦

2

@MarcusEkwall但不是问HTML渲染的问题吗？

— phil294

31

通过可编辑的div，您可以使用方法document.execCommand（更多详细信息）轻松地为您指定的标签和某些其他功能提供支持。

#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>

展开摘要

— 桑帕特·利雅纳奇（Sampath Liyanage）
source

这在某些浏览器中不起作用，只是将其添加为“ 16”的注释AS

— jeffreyrowder

5

因为您只说过渲染，所以可以。您可以按照以下方式进行操作：

function render(){
	var inp     = document.getElementById("box");
	var data = `
<svg xmlns="http://www.w3.org/2000/svg" width="${inp.offsetWidth}" height="${inp.offsetHeight}">
<foreignObject width="100%" height="100%">
<div xmlns="http://www.w3.org/1999/xhtml" 
style="font-family:monospace;font-style: normal; font-variant: normal; font-size:13.3px;padding:2px;;">
${inp.value} <i style="color:red">cant touch this</i>
</div>
</foreignObject>
</svg>`;
	var blob = new Blob( [data], {type:'image/svg+xml'} );
	var url=URL.createObjectURL(blob);
	inp.style.backgroundImage="url("+URL.createObjectURL(blob)+")";
 }
 onload=function(){
  render();
  ro = new ResizeObserver(render);
	ro.observe(document.getElementById("box"));
 }

#box{
  color:transparent;
  caret-color: black;
  font-style: normal;/*must be same as in the svg for caret to align*/
  font-variant: normal; 
  font-size:13.3px;
  padding:2px;
  font-family:monospace;
}

<textarea id="box" oninput="render()">you can edit me!</textarea>

展开摘要

这样就textarea可以渲染HTML！除了在调整大小时闪烁之外，还不能直接使用类，并且必须确保div中的div 与插入符号的svg格式相同，textarea以便正确对齐，这是可行的！

— 梅林
source

2

附录。您可以使用字符实体（例如更改<div>为<div>），它将在文本区域中呈现。但是，保存后，textarea的值就是所渲染的文本。因此，您无需解码。我刚刚在各种浏览器上进行了测试（即回到11）。

— 轴突
source

我真的很想让它对我有用，但事实并非如此。例如

<textarea>             check for url &lt;B&gt;http://localhost/Dashboard.aspx&lt;/B&gt; &lt;BR&gt; Tool Started at &lt;B&gt;11/10/2015 3:56:58 AM&lt;/B&gt; &lt;BR&gt; .... </textarea>

不显示为HTML。我在Chrome 46

— sirdank

嗯我将该字符串直接复制粘贴到html文档中，并在Chrome版本48.0.2552.0 dev（64位）OS X 10.11.1中为我正确呈现了标记。所以也许是版本问题。

— axlotl

我对此一向不满意，

— axlotl

0

我有同样的问题，但相反，下面的解决方案。我想将div中的html放在文本区域中（以便我可以在网站上编辑一些响应；我想将文本区域放在相同的位置。）

要将这个div的内容放在文本区域中，我使用：

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="msg500">here some <strong>html</strong> <i>tags</i>.</div>

展开摘要

— 胡迪尼
source

0

试试这个例子

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();
});

.editable {
  width: 300px;
  height: 200px;
  border: 1px solid #ccc;
  padding: 5px;
  resize: both;
  overflow: auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="editable" contenteditable="true"></div>
<button class="bold">toggle red</button>
<button class="italic">toggle italic</button>

展开摘要

— 大卫·格林斯坦
source

-2

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

它解释一个textarea里的HTML标签（即<strong>，<i>，<u>，<a>）

— 菲尼尔·沙（Fenil Shah）
source

它不使用textarea。它使用div，不能使用表单提交。

— 乌斯曼·艾哈迈德

它确实适用于textarea，只需尝试将id赋予textarea而不是div。我使用textarea和summernote创建了一个整个项目。工作正常！

— Fenil Shah

重点是什么？如果使用textarea，它的行为与ckeditor相同。无法根据要求呈现HTML标签。

— 乌斯曼·艾哈迈德

为什么要使用所见即所得的编辑器？抱歉，这真的不是答案。

— 卡·德·纳尔迪