bre*_*ine 6 wysiwyg richedit contenteditable rich-text-editor richeditabletext
我正在使用在线富文本编辑器,类似于WordPress页面创建者或Stack Overflow后创建者.有人指出,有两种不同类型的在线富文本编辑器:
我正在构建第二种类型.不幸的是,<textarea>也没有使用contenteditable是HTML富文本编辑非常方便.
这个问题<textarea>(如在这里堆栈溢出使用)是你不能显示文本级语义在编辑栏.您不能只突出显示一个单词并使其变为粗体,您必须插入某种标记(例如*****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.
我一直试图弄清楚如何限制和控制浏览器在contenteditable元素中插入的HTML数量,但我开始认为contenteditable这只适用于WYSIWYG类型编辑,并且永远不适用于HTML样式的富文本编辑.
是否有第三种选择,或者是否有人构建了某种符合我需求的Javascript编辑器？
另一种方法是使用普通 div 上的单击事件自行编码，等等。使用这种方法需要完成很多事情，并且有很多关于堆栈溢出的问题会有所帮助，包括设置所有事件处理程序以及在单击文本中的某个位置时处理添加插入符号 [1] ，所有按键事件，包括 Enter、Backspace、Delete、所有字母数字键等。您需要在用户单击某些内容时将插入符号创建为视觉元素，在键入时输入文本，在按退格键时删除文本，在按 Enter 时输入换行符，等等。Google Docs 和 Online Word 可能使用这种方法，但这是一项大量的工作，而且我不知道有任何开源库实现它，但它可以让您完全控制一切，包括所有内容的格式化（因为您将全部输入）。
[1]检测文本中哪个单词被点击