【问题标题】：How can I display bold text in a textarea? [closed]如何在文本区域中显示粗体文本？ [关闭]
【发布时间】：2012-02-14 09:02:53
【问题描述】：

我有这个代码：

<textarea><b>test</b></textrea>

它显示原始 HTML 代码。相反，我希望它只显示粗体文本。

我怎样才能做到这一点？

【问题讨论】：

你能改写你的问题吗，现在看起来一团糟......
@Devjosh 猜他只是复制粘贴随机单词来填充一些内容，否则如果问题很小，也会出现同样的错误
@footy 嗯，现在我看到你发布问题时验证发生了变化，但是 xujinliang 粘贴的问题是什么
@footy，当人们寻求帮助，甚至懒得把他们的问题说清楚，用这种懒惰和不负责任的方式时，感觉很糟糕
我很确定问题应该是“我想在 textarea 中使用粗体文本。但是使用我的第一个代码，textarea 中的文本是 <b>test</b>。如何让 textarea 显示 '粗体效果？”

标签： javascript html textarea wysiwyg

【解决方案1】：

如果你想让 textarea 显示粗体文本，你可以通过 css style 属性来实现：

<textarea style="font-weight: bold">test-text</textarea>

这会使 textarea 将所有文本显示为粗体，就像在 <b>text</b> 中一样。

但是，这会影响文本区域中的所有文本。没有办法只用粗体显示一个单词。

【讨论】：

@martin OP 最好先澄清他的问题，但如果它对 OP 有帮助会很好
@Devjosh 你是对的，但我不相信 OP 现在会阅读、理解并跟随 cmets 解决原始问题，而是会感到沮丧。获得帮助，而不仅仅是被否决和被嘲笑，也可能将他的注意力转移到他糟糕的措辞问题上。
你的理由似乎是对的。那太好了:)

【解决方案2】：

为了在文本区域中显示样式化的 HTML 而不是纯 HTML 代码，您需要一个 JavaScript 所见即所得的编辑器。您可以从许多不同的选项中进行选择，我现在可以想到两个：CKEditor 和 TinyMCE，尽管您可以找到更多。请参阅每个文档以了解如何将其集成到您的应用程序中。阅读他们网站上的信息，确定哪一个最适合您。

只是为了让您快速入门，这里有一个如何轻松集成我提到的示例的示例。

CKEditor

首先，将下载的CKEditor包放在你应用的文档根目录下，这样你就可以访问文件/ckeditor/ckeditor.js了。

在带有文本区域的页面上，添加以下代码：

<script src="/ckeditor/ckeditor.js"></script>
<script>
    window.onload = function () {
        CKEDITOR.replaceAll('wysiwyg');
    };
</script>

最后，确保有问题的文本区域具有wysiwyg 类：

<textarea class="wysiwyg"><strong>test</strong></textarea>

TinyMCE

再次，下载包并将其放在 docroot 中的某个位置，以便可以访问文件 /tinymce/tiny_mce.js。

在包含 textarea 的文件中添加这段代码：

<script src="/tinymce/tiny_mce.js"></script>
<script>
    window.onload = function () {
        tinyMCE.init({
            mode: "textareas"
        });
    };
</script>

如果您已正确设置所有内容，您应该获得一个所见即所得的编辑器，而不是 textarea，显示您的所有样式。

【讨论】：