我正在开发一个在线富文本编辑器，类似于WordPress页面创建者或Stack Overflow帖子创建者。有人指出，有两种不同类型的在线富文本编辑器：
- 所见即所得的编辑，以及
- 网页编辑器
我正在构建第二种类型。不幸的是，无论是<textarea>还是使用contenteditable都不是HTML富文本编辑。
<textarea>(如此处在堆栈溢出中使用的)的问题在于您无法在编辑字段中显示文本级语义。你不能只突出显示一个单词并使其加粗，你必须插入某种标记(例如*****粗体*****)。不是很用户友好，也不是真正"丰富"的文本。
另一方面，使用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。
我一直在试图弄清楚如何限制和控制浏览器在contenteditable元素中插入的 HTML 数量，但我开始认为contenteditable只适合所见即所得的类型编辑，并且永远不适用于 HTML 样式的富文本编辑。
有没有第三种选择，或者有人构建了某种满足我需求的Javascript编辑器？
另一种方法是使用普通div 上的单击事件自行编写所有代码，依此类推。使用这种方法需要做很多事情，并且有很多关于堆栈溢出的问题会有所帮助，包括设置所有事件处理程序和处理在他们单击文本中的位置时添加插入符号 [1]，按键事件的所有内容，包括 Enter、退格、删除、所有字母数字键， 其余的。您需要在他们单击某些内容时将插入符号创建为可视元素，在他们键入时输入文本，在他们点击退格键时删除文本，在按 Enter 时输入换行符，等等。Google Docs 和 Online Word 可能使用这种方法，但这是一项大量的工作，我不知道有任何开源库可以实现它，但它可以让您完全控制一切，包括所有内容的格式设置(因为您将输入所有内容)。
[1] 检测文本中点击了哪个单词