CKEditor的

Question

我有这段代码：

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

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

我怎样才能做到这一点？

Answer 1

如果您希望textarea显示粗体文本，您可以通过css样式属性：

来实现

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

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

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

Answer 2

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

为了让您快速入手，这里有一个如何轻松整合我提到的例子。

CKEditor的

首先，将下载的CKEditor包放在应用程序的文档根目录中，以便您可以访问文件/ckeditor/ckeditor.js。

在包含textarea的页面上，添加以下代码：

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

最后，确保有问题的textarea具有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>

如果你已经正确设置了所有内容，你应该得到一个WYSIWYG编辑器而不是textarea，显示你的所有样式。

如何在textarea中显示粗体文本？

2 个答案:

CKEditor的

TinyMCE的