富文本编辑器是如何工作的，如何构建一个基本的文本编辑器

How do rich text editors work and how would you go about build a basic one?

本文关键字：编辑器 文本 文本编辑 构建 一个 工作 何工作 何构建      更新时间：2023-09-26

我以为我很了解JavaScript，但后来我想到富文本编辑器是如何工作的，比如CKeditor，我意识到我不知道。

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

在web上的富文本编辑器有什么特别的吗，或者它只是很多花哨的js?

大量的fancy.js，以及曾经是DOM的MS扩展名为"contentEditable"，它基本上可以将任何DOM元素变成一个简单的文本编辑器。JS允许做一些事情，比如粗体/斜体/字体/插入其他DOM元素(表，图像等…)。但最终都归结为contentitable

checkout this:

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

这:https://developer.mozilla.org/en/rich-text_editing_in_mozilla

可以通过div元素的contentteditable属性来实现。假设你有一个粗体按钮。用户点击它，然后你调用一个js函数，打开一个标签，如<b>，当用户点击正常按钮，你关闭它。颜色也一样…打开一个<span style="backround-color:red"> ..，它基本上是你用js样式div文本…尝试使用jquery轻松操作dom。

相关文章：