在我当前的应用程序中，我创建了一个自定义 BBCode 编辑器——我使用了许多 BBCode 扩展，并且有其他集成要求，这使得我必须使用自己的编辑器而不是现成的编辑器。
创建这个，确保生成的 BBCode 始终有效，被翻译成好的 HTML 等是大量的工作，但我对结果非常满意。但是...就目前情况而言，我要求最终用户查看和编辑 BBCode。拥有所见即所得会更好。我注意到SCEditor有一个所见即所得的界面。使用 Chrome 出色的调试器进行深入研究时，我注意到以下几点
我可以继续我的探索并弄清楚这一切是如何完成的。但是，我希望这里的某个人能够给我一些关于这里需要什么的指示。我想输入的 BBCode 以某种方式“转移”到隐藏的文本区域中，被动态解析为 HTML，结果显示在内容可编辑的 div 或类似的东西中？还有正确处理鼠标点击和选择的问题。
SCEditor 的工作原理是拥有一个BBCode 解析器和一个 DOM 到 BBCode 转换器（目前它有点难看）。
textarea最初，编辑器通过 BBCode 解析器将 BBCode 从 转换为 HTML，并将其放入iframe. 然后，用户可以像任何其他 HTML WYSIWYG 编辑器一样编辑 contentEditable 元素的内容。
当提交表单或用户想要查看 BBCode 源代码时，DOM 会通过转换器转换回 BBCode。从 DOM 到 BBCode 的转换可以准确地完成，因为它本质上就是 BBCode 被解析成的内容。
因此，例如，对于粗体，您可以检查节点是否具有style.fontWeight粗体或者它是否是<strong>或<b>标记。对于链接等其他元素，您只需使用href属性并将内容包装在[url]标签内即可。
最后，得到的 BBCode 由 BBCode 解析器第二次解析，并与设置的任何 BBCode 输出选项一起输出。BBCode 并没有真正的标准，因此块级元素之后的换行符应该是可配置的。
SCEditor 所做的基本上是：
我从创建 SCEditor 中学到的是，除非你想花费数年时间来完善它，否则不要编写带有 contentEditable 的 WYSIWYG 编辑器，只需使用/构建在别人的之上。CKEditor 开发人员在另一篇文章中有一个答案，说的几乎一样。
如果您确实想制作自己的 WYSIWYG 编辑器，使用Rangy来处理浏览器选择应该会使事情变得容易得多。原生浏览器选择 API 是（或至少是）非常错误的！不仅如此，IE < 9 使用一种完全非标准的方法来访问选择。Rangy 提供了一个通用的 API，可以与 IE 的非标准方法一起使用，也可以解决浏览器错误。