我可以在 <textarea> 标签中嵌入 HTML 格式吗？答案

【问题标题】：Can I embed HTML formatting inside of a <textarea> tag?我可以在 <textarea> 标签中嵌入 HTML 格式吗？
【发布时间】：2010-04-05 18:33:39
【问题描述】：

如果我有这样的textarea 块...

<textarea name="myTextArea" cols="100" rows="20" readonly=readonly>
.. text area content ...
</textarea>

如何在此文本块中嵌入 HTML 格式的文本？如果可以的话，我认为以下应该可以工作...

<textarea name="myTextArea" cols="100" rows="20" readonly=readonly>
<b>Hello how are you today?</b>
</textarea>

举个例子。但是那句话并没有显示为粗体。也许我只是在尝试做一些无法做到的事情？

【问题讨论】：

标签： html

【解决方案1】：

我很确定答案是否定的——不能用 textarea 来做。

来自MDN docs：

HTML 元素表示一个多行纯文本编辑控件。

允许的内容文本

【讨论】：

【解决方案2】：

用

是不可能的

<textarea>

使用这个：

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

【讨论】：

这允许编辑 div 的内容，但不允许将内容显示为呈现的 HTML。尝试在那里输入<b>aoba</b>，它不会显示为粗体。
它不会即时渲染（就像所见即所得的编辑器可能会做的那样），但你肯定可以做到<div contenteditable="true">Something in <i>italic</i>.</div>

【解决方案3】：

你是对的，这是不可能的。

According to MDN，“character data”是<textarea> 唯一允许的内容。

正如其他答案所述，您正在寻找的是所见即所得的编辑器，例如CKEditor、TinyMCE 或 Kendo 的Editor。

这不是重点，但有趣的是，MDN 在其HTMLTextAreaElement 页面上列出了一些示例，说明如何在<textarea> 中围绕文本使用enable dynamic adding of HTML tags，以及如何在enable autogrow behavior 中使用<textarea>。

【讨论】：

【解决方案4】：

您可以这样做（转换“特殊”字符）：

<textarea name="myTextArea" cols="100" rows="20" readonly=readonly>
&lt;b&gt;Hello how are you today?&lt;/b&gt;
</textarea>

【讨论】：

是的，这对我不起作用。不过感谢您的建议。
啊，那我误解你的问题了。我以为你想看 HTML 标签。

【解决方案5】：

不！如果您在 HTML 文档中验证了这一点，则会收到类似于

的错误

文档类型不允许在此处使用元素“b”

您可能正在寻找的是一个 What-You-See-Is-What-You-Get 编辑器，它实际上是一个 <iframe>，它利用了 JavaScript 功能 designMode。可以找到tutorials on how to create these (archive)，但使用现有的是一个更好的主意，因为它真正有用和可用需要大量的工作。

请注意 - 如果您仍然对验证感兴趣，如果您使用 HTML，您应该这样做 - 您将无法使用严格的 DOCTYPE 声明，因为所见即所得编辑器将是使用iframe。

【讨论】：

【解决方案6】：

你也可以试试这个，它很简单，如果你使用 asp.net，请在文本区域使用标签控制，将其添加为

Text="&lt; stonename &gt;" 
"&lt";stonename"&gt";

【讨论】：

【解决方案7】：

你不能在 textarea 中这样做，但你可以做什么......你可以使用 p 标记并解析信息以通过 JQuery 标记。像这样的：

    var stringviewinfo ="aaaaaaaaaaaaaaaaaa<br>aaaaaaaaaaaaaaaaaaaaaaaaa<br>aaaaaaaaaaaaaaaa<b>aaaaaaaa</b>aaaaaaaaaaaaaaaaaa<br>aaaaaaaaaaa<font color=\"red\">AAAA</font>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<b>aaaaaaaaaaaaa<b>aaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</br>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa";      
$('#viewinfo').html(stringviewinfo);
<p style="word-wrap: break-word;" id="viewinfo"></p>

我希望这会有所帮助。

【讨论】：

在纯 JavaScript 中：var stringviewinfo = "..."; document.getElementById("viewinfo").innerHTML = stringviewinfo;.
新手注意事项：永远记住，每当你做这样的事情时，如果你从用户那里获取 HTML 字符串，他们可以选择他们想要的任何字符串，这可能会破坏你自己的 HTML (特别是如果您将字符串保存在服务器上，因此允许用户选择在其他人的浏览器上运行的任意代码，这可能会带来安全风险）。见Cross-site scripting。因此，您需要限制允许的字符串是什么，以便它按预期运行。

【解决方案8】：

到现在（8 年后）你知道 textarea 不是要走的路。

如果你碰巧在使用 Vue.js，你可以使用 div 和 v-html 来设置内部 HTML

<template>
    <div name="myTextArea" cols="100" rows="20" readonly=readonly v-html="content" />
</template>

<script>
    export default {
        data() {
            return{
                content = "<b>Hello how are you today?</b>";
            }
    }
</script>

【讨论】：

【解决方案9】：

这就是答案。

使用此功能。

function br2nl(varTest) {
        return varTest.replace(/<br\s*\/?>/ig, "\r");
    }

【讨论】：

【解决方案10】：

有一个非常简单的方法可以实现。

首先：自定义<textarea>以接受特殊字符并将其保存到数据库

<textarea contenteditable="true" class="form-control" name="setting[header_code]"><?php echo set_value('setting[header_code]', html_entity_decode($item->header_code)) ?></textarea>

第二：从数据库中提取并回显保存的数据

<?php echo html_entity_decode(config(nl2br('header_code')));?>

希望对你有帮助。

谢谢

【讨论】：

这个问题是关于 HTML 的，php 在这里不相关。编码 HTML 字符不是问题所在。