如何创建富文本编辑器 [关闭]答案

【问题标题】：How to create a rich text editor [closed]如何创建富文本编辑器 [关闭]
【发布时间】：2011-05-15 08:04:49
【问题描述】：

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

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

那么背后的概念是什么？

谢谢:)

【问题讨论】：

【解决方案1】：

最简单的方法如下。它被TinyMCE 和CKEditor 以及许多其他人使用。有很多变化：特别是，如果您正在创建一个代码编辑器，您可以使用 textareas 和等宽字体来做一些巧妙的技巧。

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

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

【讨论】：

哇。在您的最后一行中确信它确实需要对 JS 有很高的专业知识..:) 您能否阐明如何添加插入图像的功能。假设用户将图像从某个地方拖到 iFrame 中。现在用户已经输入了相当数量的文本。他将图像放在文本的中间。现在如何将整个内容分成三个部分，一个 - 他掉下的地方上方的部分，然后是图像本身，然后是它下面的东西。我认为 jQuery sortable 行不通，因为无法根据某些坐标对 div 的内容进行分区...

【解决方案2】：

我不建议您查看其他人的使用方法，但我建议您查看jWYSIWYG 以了解它是如何在 jQuery 中编码的。

【讨论】：