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

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,显示你的所有样式.