Question

我正在使用在线富文本编辑器，类似于WordPress页面创建者或Stack Overflow后创建者。 It has been pointed out有两种不同类型的在线富文本编辑器：

WYSIWYG编辑，
HTML编辑器

我正在构建第二种类型。不幸的是，<textarea>和使用 contenteditable 都不便于HTML富文本编辑。

<textarea>的问题（在Stack Overflow中使用）是您无法在编辑字段中显示text-level semantics。您不能只突出显示一个单词并使其粗体，您必须插入某种标记（例如***** 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仅适用于WYSIWYG类型编辑，并且永远不会用于HTML样式的富文本编辑。

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

Answer 1

另一种方法是使用常规div上的click事件自己编写所有代码，依此类推。使用此方法需要完成很多事情，并且有很多关于堆栈溢出的问题会有所帮助，包括设置所有事件处理程序以及当他们单击文本中的位置时添加插入符号的处理[1]。，所有事件的按键事件，包括Enter，Backspace，Delete，所有字母数字键以及其他。您需要在插入符号时将插入记号创建为可视元素，在键入内容时输入文本，在按下退格键时删除文本，在按下Enter键时输入换行，等等。 Google Docs和Online Word可能使用这种方法，但是这是一项艰巨的工作，而且我不知道实现该方法的任何开源库，但是它将为您提供对所有内容的完全控制，包括所有内容的格式设置（因为您将全部输入）。

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

有没有替代使用contenteditable或textarea？

1 个答案: