在文本区域中加粗文本

Question

我正在尝试编写一个非常简单的所见即所得编辑器，用户可以在选择文本部分后轻松添加粗体文本、超链接和项目符号，就像CKEditor一样。

但据我所知，没有办法向文本区域添加格式。因此，我想知道，其他类似于CKEditor的所见即所得编辑器是如何解决这个问题的。

- Jules Colle

Answer 1

好的，这并没有回答如何实现它的问题，但是你可以对textarea应用样式。只需要尝试：

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

关于像CKEditor这样的编辑器如何实现，大多数是通过应用大量JavaScript和CSS来使<div>看起来像<textarea>。这就是我在一堂关于AJAX的微软课程中所做的。此外，如果您查看CKEditor演示的渲染源代码，您会看到输入区域的所有内容都是由<div>元素组合而成的。

- Jeffrey Blake

---

是的，似乎没有快速制作自己的基本所见即所得编辑器的简单方法。我还发现整个编辑区实际上是一个包含完整HTML代码的iframe。因此，当您键入时，会捕获您的按键并更新i-frame。他们如何使闪烁的光标出现并知道iframe中的当前光标位置仍然是一个谜团。但我现在知道该怎么做了：我将只使用ckeditor并大幅缩减功能，而不是编写自己的基本编辑器。 - Jules Colle

Answer 2

浏览器基于WYSIWYG编辑器是通过构建文档/文本的HTML来工作的。换句话说，您实际上是在浏览器中编辑HTML而不是TEXTAREA中的文本。在从头开始编写之前，建议查看富文本编辑器的源代码以及了解Mozilla的Midas规范。请注意保留HTML标记。

- Gert Grenander

Answer 3

您需要使用contenteditable属性。 通过谷歌搜索，您可以找到大量的信息和示例。

- barrylloyd

---

请注意，contenteditable是HTML5标准中的内容，该标准仍然很新，并且尚未得到广泛支持（虽然希望很快会被支持）。 - David Young

是的，但至少在IE、Safari、Firefox和Opera的最新版本中可用。尽管它非常难以处理，并且在每个浏览器中的工作方式都不同。 - barrylloyd

他不必使用 contenteditable。在 contenteditable 出现之前，第一个基于 JS 的所见即所得编辑器就已经被编写出来了。 - Gert Grenander

“contenteditable”在Internet Explorer中已经存在了整整十年，但是直到最近几年才被其他浏览器采用。Mozilla早在2003年左右就通过“document”的“designMode”属性提供了内容编辑功能。在IE中，“contentEditable”也已经存在了很长时间。“iframe”中文档的“designMode”仍然是非IE浏览器中所使用的所见即所得编辑器的常规选择；而“contentEditable”在Firefox中似乎仍然有一些小问题。 - Tim Down

Answer 4

大多数所见即所得编辑器，如TinyMCE，使用纯JavaScript覆盖层来提供一个富文本编辑器，该编辑器会查找textarea html标记以将基本文本编辑器替换为其富文本编辑器。

实际上，JavaScript编辑器正在对文本内容添加适当的html标记，例如<b>或<i>。

这就是为什么当您将WYSIWYG编辑器的内容提交到服务器时，通常会得到HTML的原因。

- David Young