7

我正在开发一个在线富文本编辑器，类似于 WordPress 页面创建器或 Stack Overflow 帖子创建器。有人指出，有两种不同类型的在线富文本编辑器：

  1. 所见即所得的编辑器，以及
  2. HTML 编辑器

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

问题<textarea>（在 Stack Overflow 中使用）是您无法在编辑字段中显示文本级语义。您不能只突出显示一个单词并将其设为粗体，您必须插入某种标记（例如 *****bold*****）。不是非常用户友好，也不是真正的“丰富”文本。

另一方面，使用contenteditable解决了这些问题，但引入了控制问题。浏览器会插入各种 HTML 和 CSS 以使编辑字段看起来不错。如果您点击Enter，浏览器将插入<p>, or <div>, or <br>, or <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 编辑器？

4

1 回答 1

1

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

[1]检测文本中点击了哪个单词

于 2020-05-18T14:59:25.110 回答