如何将富文本添加到文本区域

Question

有没有办法用样式设置textarea的部分文本。例如，如果我有一个具有此值的文本区域：

  

Hi, how are you

我想要这个：

  

你好

以粗体设置我想要的单词，而不是在文本区域中设置所有值。我想用jQuery做插件或其他东西。

我的文字区域：

<textarea id="txtMessageFields" cols="20" rows="2"></textarea>

Answer 1

您可以使用WYSIWYG HTML编辑器来实现此目的，例如CKEditor或TinyMCE。

例如，使用CKEditor的jQuery接口，这很简单：

<script type="text/javascript" src="/ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="/ckeditor/adapters/jquery.js"></script>
<script type="text/javascript">
     $(document.ready(function () {
         $('#txtMessageFields').ckeditor();
     });
</script>

来自CKEditor jQuery Adapter Guide

查看配置选项以仅启用所需的功能。

Answer 2

尝试THIS你想要的东西。请参阅演示here

Answer 3

<textarea>元素只能包含纯文本：

• https://developer.mozilla.org/en/HTML/Element/textarea

据我所知，所有JavaScript WYSIWYG编辑器都使用常规DOM节点（iframe或div）并使用常规HTML / CSS来获取视觉样式。您可以编写一些代码来动态替换您的textarea，但我认为它首先是一个表单字段，因为它需要是可编辑的。如果是这样，我建议你选择第三方编辑器。这是一个非常全面的清单：

• http://geniisoft.com/showcase.nsf/WebEditors

Answer 4

正如bazmegakapa所写，你必须使用WYSIWYG编辑器。根据我的经验，最好的是TinyMCE，如果你使用jQuery（TinyMCE jQuery package），它包括一个特殊的包。