富文本编辑器是如何工作的，你将如何构建一个基本的？答案

【问题标题】：How do rich text editors work and how would you go about build a basic one?富文本编辑器是如何工作的，你将如何构建一个基本的？
【发布时间】：2011-12-19 18:53:07
【问题描述】：

我以为我对 JavaScript 非常了解，但后来我想到了富文本编辑器（例如 CKeditor）的工作原理，然后意识到我不知道。

我假设按钮通过 JavaScript 以某种方式连接到文本区域，但它是如何标记的。

Web 上的富文本编辑器有什么特别之处，还是只是有很多花哨的 js？

【问题讨论】：

标签： javascript content-management-system richtextbox ckeditor rtf

【解决方案1】：

您可以使用 div 元素的 contentEditable 属性来做到这一点。假设您有粗体按钮。用户单击它，然后调用一个 js 函数并打开一个标签，如 <b> 当用户单击普通按钮时关闭它.. 与颜色相同.. 打开一个 <span style="backround-color:red"> .. 它基本上是您使用 js 设置 div 文本的样式.. 试试jquery 方便 dom 操作。

【讨论】：

【解决方案2】：

结帐：

http://www-archive.mozilla.org/editor/midasdemo/

还有这个： https://developer.mozilla.org/en/rich-text_editing_in_mozilla

【讨论】：

【解决方案3】：

很多fancy.js，以及曾经被称为“contentEditable”的DOM 的MS 扩展，它基本上可以将任何dom 元素变成一个简单的文本编辑器。 JS 允许执行诸如粗体/斜体/字体/插入其他 DOM 元素（表格、图像等）之类的操作。但这一切最终都归结为 contentEditable。

【讨论】：