我正在使用在线富文本编辑器，类似于WordPress页面创建者或Stack Overflow帖子创建者。 It has been pointed out在线富文本编辑器有两种截然不同的类型：
我正在建立第二种类型。不幸的是，<textarea>或使用contenteditable都不很方便用于HTML RTF编辑。
<textarea>的问题（在此处的堆栈溢出中使用的问题是，您无法在编辑字段中显示text-level semantics。您不能仅突出显示一个单词并将其设为bold，还必须插入某种标记（例如***** bold *****）。也不是很用户友好，也不是真正的“丰富”文本。
另一方面，使用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编辑器？
替代方法是使用普通div上的click事件自己编写所有代码，依此类推。使用此方法需要完成很多事情，并且在堆栈溢出方面有很多问题会有所帮助，包括设置所有事件处理程序以及当他们单击文本中的位置时添加插入符号的处理[1]。 ，所有事件的按键事件，包括Enter，Backspace，Delete，所有字母数字键以及其他。您需要在插入符号时将插入符号创建为可视元素，在键入内容时输入文本，在按下退格键时删除文本，在按下Enter键时输入换行，依此类推。 Google Docs和Online Word可能使用这种方法，但是这是一项艰巨的工作，而且我不知道实现该方法的任何开源库，但是它将为您提供对所有内容的完全控制，包括所有内容的格式设置（因为您将全部输入）。