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

【问题标题】：How can I add rich text to a text area如何将富文本添加到文本区域
【发布时间】：2011-05-30 14:50:17
【问题描述】：

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

Hi, how are you

我想要这个：

你好吗你

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

我的文本区：

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

【问题讨论】：

我推荐这里提到的 NO-jQuery 解决方案：stackoverflow.com/a/37758563/1920145

标签： jquery html textarea

【解决方案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

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

【讨论】：

对于这些编辑器的所有幻想，他们归结为采用一个块元素并将其“contentEditable”属性设置为 true，从而可以实时更改块的内容。
@Marc 如果您不想重新发明轮子，这只是一种选择。仅使用 Bold 看起来有点矫枉过正，但我不清楚 OP 是否只需要此功能。
看起来很可疑，您在那里使用了重复的 ids 和 #txtMessageFields。那是无效的 HTML。

【解决方案2】：

试试THIS 这是你想要的。看演示here

【讨论】：

怪胎，如果我不想在 js 部分文本中显示设置粗体，我可以做到吗？
你的意思是要隐藏顶部的按钮？
太棒了，我只需要用户修改代码中的文本即可
查看@Álvaro G. Vicario 的回答。

【解决方案3】：

<textarea> 元素只能保存纯文本：

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

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

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

【讨论】：

【解决方案4】：

正如 bazmegakapa 所写，您必须使用所见即所得的编辑器。根据我的经验，最好的是 TinyMCE，如果你使用 jQuery，它会包含一个特殊的包 (TinyMCE jQuery package)。

【讨论】：