在文本区域内呈现 HTML

javascript jquery html textarea

2022-08-30 01:54:14

我需要能够在文本区域内呈现一些HTML标签（即<strong>，<i>，<u>，<a>），但textareas仅将其内容解释为文本。有没有一种简单的方法可以在不依赖外部库/插件的情况下做到这一点（我正在使用jQuery）？如果没有，你知道我可以用来做到这一点的任何jQuery插件吗？

答案 1

这对于 .您正在寻找一个内容可编辑的div，这很容易做到：textarea

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

答案 2

使用可编辑的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>