wysiwyg - 除了使用 contenteditable 或 textarea 之外，还有其他选择吗？

Question

我正在开发一个在线富文本编辑器，类似于 WordPress 页面创建者或 Stack Overflow 帖子创建者。 It has been pointed out 有两种不同类型的在线富文本编辑器:

所见即所得的编辑器和

HTML 编辑器

我正在构建第二种类型。不幸的是，无论是 <textarea> 还是使用 contenteditable 都不太方便进行 HTML 富文本编辑。
<textarea>(在 Stack Overflow 中使用)的问题是您无法在编辑字段中显示 text-level semantics。您不能只突出显示一个单词并将其设为 粗体 ，您必须插入某种标记(例如 *****粗体 *****)。不是非常用户友好，也不是真正的“丰富”文本。

另一方面，使用 contenteditable 解决了这些问题，但引入了控制问题。浏览器将插入各种 HTML 和 CSS 以使编辑字段看起来不错。如果按 Enter 键，浏览器将插入 <p> 或 <div> 或 <br> 或 <div><br></div> ... 取决于浏览器。如果您粘贴从 HTML 复制的几个段落，您会得到大量过多的标记——甚至超出源 HTML 中的标记。例如，以下源代码:

<p>This is one paragraph!</p>
<p>This is another.</p>

在网站上显示为:

This is one paragraph!

This is another.

...其中，如果您复制并粘贴到 contenteditable 表单中，可以为您提供如下信息:

<p style="line-height: 1em; color: rgb(34, 34, 34); font-size: 12px; 
white-space: normal;">This is one paragraph!</p>
<p style="line-height: 1em; color: rgb(34, 34, 34); font-size: 12px; 
white-space: normal;">This is another.</p>

...带有内联样式，在某些情况下还带有额外的 HTML。

I've been trying to figure out 如何限制和控制浏览器在 contenteditable 元素中插入的 HTML 数量，但我开始认为 contenteditable 仅适用于所见即所得类型的编辑，而永远不适用于 HTML 样式的富文本编辑。

是否有第三种选择，或者是否有人构建了某种满足我需求的 Javascript 编辑器？

Answer 1

另一种方法是使用普通 div 上的点击事件自己编写代码，依此类推。使用这种方法需要完成很多事情，并且有很多关于堆栈溢出的问题会有所帮助，包括设置所有事件处理程序和处理在单击文本中的某个位置时添加插入符号 [1] , 包括 Enter、Backspace、Delete、所有字母数字键在内的所有按键事件。您需要在他们单击某些内容时将插入符号创建为视觉元素，在他们键入时输入文本，在他们按下退格键时删除文本，在按下 Enter 时输入换行符，等等。 Google Docs 和 Online Word 可能使用这种方法，但它需要大量的工作，而且我不知道任何实现它的开源库，但它会让你完全控制一切，包括一切的格式(因为你将全部输入)。

[1] Detect which word has been clicked on within a text