富文本编辑器如何工作以及如何构建基本编辑器？

Question

我认为我非常了解JavaScript，但后来我想到了富文本编辑器的工作方式，比如CKeditor，并意识到我不知道。

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

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

Answer 1

很多fancy.js，曾经是DOM的MS扩展名为“contentEditable”，它基本上将任何dom元素转换为简单的文本编辑器。 JS允许做粗体/斜体/字体/插入其他DOM元素（表格，图像等等）。但最终归结为contentEditable。

Answer 2

结帐：

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

并且： https://developer.mozilla.org/en/rich-text_editing_in_mozilla

Answer 3

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