在我目前的应用程序中，我创建了一个自定义的BBCode编辑器 - 我使用了许多BBCode扩展，并且有其他集成要求，这使得我必须使用自己的编辑器而不是现成的编辑器。
创建这个，确保生成的BBCode始终有效，转换为良好的HTML等是很多工作，但我对结果非常满意。但是......事实上，我要求最终用户查看和编辑BBCode。拥有WYSIWYG会更好。我注意到SCEditor具有WYSIWYG接口。借助Chrome优秀的调试器，我注意到以下内容
我可以继续探索并弄清楚这一切是如何完成的。但是，我希望这里的某个人能够就这里需要的内容给我一些指示。我想，输入的BBCode以某种方式“转移”到隐藏的textarea中，动态解析为HTML，结果显示在内容可编辑的div或沿着这些行的东西？还有一个问题是正确处理鼠标点击和选择。
答案 0 :(得分：5)
SCEditor的工作原理是BBCode parser和DOM到BBCode转换器（目前它有点难看）。
最初，编辑器通过BBCode解析器将BBCode从textarea转换为HTML，并将其放在iframe的contentEditable元素中。然后，用户可以像编辑任何其他HTML WYSIWYG编辑器一样编辑contentEditable元素的内容。
当提交表单或用户想要查看BBCode源时，DOM会通过转换器转换回BBCode。从DOM到BBCode的转换可以准确地完成，因为它本质上是解析BBCode的原因。
例如，对于粗体，您可以检查节点是否具有style.fontWeight粗体，或者它是<strong>还是<b>标记。对于链接等其他元素，您只需使用href属性并将内容包装在[url]标记内。
最后，BBCode解析器第二次解析得到的BBCode，并输出任何BBCode输出选项。 BBCode并没有真正的标准，因此块级元素之后的新行应该是可配置的。
基本上SCEditor的作用是：
我从创建SCEditor中学到的是，除非你想花费数年时间来完善它，否则不要编写带有contentEditable的WYSIWYG编辑器，只需使用/ build on别人的。 CKEditor dev有一个answer on another post说同样的事情。
如果你想制作自己的WYSIWYG编辑器，使用Rangy处理浏览器选择应该会让事情变得更容易。本机浏览器选择API（或者至少是）非常错！不仅如此，IE＆lt; 9使用完全非标准的访问选择的方法。 Rangy提供了一个通用的API，可以与IE的非标准方法一起使用，也可以解决浏览器错误。