在 textarea 中渲染 HTML [英] Rendering HTML inside textarea

问题描述

我需要能够在 textarea 中呈现一些 HTML 标签(即 <strong>、<i>、<u>、<a>)但 textareas 只将它们的内容解释为文本.有没有一种不依赖外部库/插件的简单方法(我使用的是 jQuery)?如果没有，你知道我可以用什么 jQuery 插件来做到这一点吗?

解决方案

textarea 无法做到这一点.您正在寻找的是 内容可编辑 div，这很容易做到:

jsFiddle

div.editable {宽度:300px；高度:200px；边框:1px 实心 #ccc；填充:5px；}强的 {字体粗细:粗体；}

<div contenteditable="true">这是第一行.<br>看看这里的文本是如何适应的，如果<br>有一个<strong>换行符</strong>在末尾?<br>效果很好.<br><br><span style="color: lightgreen">很棒</span>.

I need to be able to render some HTML tags inside a textarea (namely <strong>, <i>, <u>, <a>) but textareas only interpret their content as text. Is there an easy way of doing it without relying on external libraries/plugins (I'm using jQuery)? If not, do you know of any jQuery plugin I could use to do this?

解决方案

This is not possible to do with a textarea. What you are looking for is an content editable div, which is very easily done:

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

这篇关于在 textarea 中渲染 HTML的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！