javascript - 如何创建富文本编辑器

<分区>

嘿，我想知道创建富文本编辑器背后的概念是什么。我的意思是如何创建富文本编辑器。我想学习实现。

PS:请不要建议使用 YUI 或任何其他内置库。我想自己做一个。

那么背后的概念是什么？

谢谢:)

最佳答案

最简单的方法如下。它被 TinyMCE 使用和 CKEditor和许多其他人。有许多变体:特别是，如果您正在创建代码编辑器，则可以使用文本区域和等宽字体来实现巧妙的技巧。

动态创建一个 iframe 并将可编辑的内容放入该 iframe 的文档中
通过设置其文档的 designMode 将 iframe 设置为可编辑属性为“on”或通过设置其 <body>元素的 contentEditable属性为真。注意 designMode支持早于 contenteditable在 Firefox 中，因此错误少了很多。
在主文档中适当的位置(例如可编辑 iframe 的正上方)添加按钮(例如粗体、斜体、插入图像等)，以作用于 iframe 中的选定内容。所有浏览器都提供 execCommand()方法(例如，参见 MSDN 和 MDN)来执行其中的许多操作，尽管它们的具体工作方式和生成的标记存在一些差异。

这就是它的工作原理。大多数编辑器还会做很多其他复杂的事情，但这些事情并不是很明显，部分是为了消除浏览器之间的许多差异，部分是为了提供内置浏览器命令未涵盖的额外功能。这是一件非常复杂和困难的事情，需要高度的专业知识和 promise ，不能掉以轻心。

关于javascript - 如何创建富文本编辑器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6007242/