jquery - 复制 SCEditor 中的一些功能

Question

在我当前的应用程序中，我创建了一个自定义 BBCode 编辑器 - 我使用了许多 BBCode 扩展，并且有其他集成要求，这使得我必须使用自己的编辑器而不是现成的编辑器。

创建此代码、确保生成的 BBCode 始终有效、翻译为良好的 HTML 等工作量很大，但我对结果非常满意。然而......就目前情况而言，我有义务最终用户查看和编辑 BBCode。如果能有所见即所得就更好了。我注意到 SCEditor具有所见即所得的界面。通过 Chrome 出色的调试器进行深入研究，我注意到了以下内容

• 原始文本区域被隐藏
• 插入包含 iframe 的 div
• iframe 中的文档包含一个 contenteditable div 和一个隐藏的文本区域控件

我可以继续探索并弄清楚这一切是如何完成的。然而，我希望这里有人能够给我一些关于这里需要什么的指示。我想输入的 BBCode 会以某种方式“转移”到隐藏的文本区域，动态解析为 HTML，结果显示在内容可编辑的 div 或类似的内容中？还存在正确处理鼠标点击和选择的问题。

Answer 1

SCEditor 的工作原理是具有 BBCode parser和一个 DOM 到 BBCode 转换器(目前有点难看)。

最初，编辑器将 textarea 中的 BBCode 转换为 BBCode。通过 BBCode 解析器转换为 HTML，并将其放入 iframe 的 contentEditable 元素内。然后，用户可以像任何其他 HTML WYSIWYG 编辑器一样编辑 contentEditable 元素的内容。

当提交表单或用户想要查看 BBCode 源时，DOM 将通过转换器转换回 BBCode。从 DOM 到 BBCode 的转换可以准确完成，因为 BBCode 本质上就是解析成的。

例如，对于粗体，您可以检查节点是否有 style.fontWeight粗体或如果是 <strong>或<b>标签。对于链接等其他元素，您只需使用 href属性并将内容包装在 [url] 中标签。

最后，BBCode 解析器对生成的 BBCode 进行第二次解析，并使用设置的任何 BBCode 输出选项进行输出。 BBCode 并没有真正的标准，因此 block 级元素后面的换行符之类的内容应该是可配置的。

SCEditor 的主要作用是:

• BBCode -> DOM
• 通过 contentEditable 进行编辑
• DOM -> BBCode

<小时/>

我从创建 SCEditor 中学到的是，除非您想花费数年时间来完善它，否则不要编写具有 contentEditable 的所见即所得编辑器，而只需使用/构建其他人的编辑器。有一个answer on another post CKEditor 开发者也说了几乎同样的话。

如果您确实想制作自己的所见即所得编辑器，请使用 Rangy处理浏览器选择应该会让事情变得容易得多。 native 浏览器选择 API(或者至少曾经)非常有问题!不仅如此，IE < 9 使用完全非标准的访问选择的方法。 Rangy 提供了一个通用 API，可与 IE 的非标准方法配合使用并解决浏览器错误。