复制SCEditor中的一些功能

Question

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

创建这个,确保生成的BBCode始终有效,转换为良好的HTML等是很多工作,但我对结果非常满意.但是......事实上,我要求最终用户查看和编辑BBCode.拥有WYSIWYG会更好.我注意到SCEditor有一个WYSIWYG接口.借助Chrome优秀的调试器,我注意到以下内容

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

我可以继续我的探索,并弄清楚这一切是如何完成的.但是,我希望这里的某个人能够就这里需要的内容给我一些指示.我想,输入的BBCode以某种方式"转移"到隐藏的textarea中,动态解析为HTML,结果显示在内容可编辑的div中或沿着这些行显示的内容？还存在正确处理鼠标点击和选择的问题.

Answer 1

SCEditor的工作原理是将BBCode解析器和DOM转换为BBCode转换器(目前它有点难看).

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

当提交表单或用户想要查看BBCode源时,DOM然后通过转换器转换回BBCode.从DOM到BBCode的转换可以准确地完成,因为它本质上是解析BBCode的原因.

因此,例如,对于粗体,您可以检查节点是否具有style.fontWeight粗体或者是否为<strong>或<b>标记.对于链接等其他元素,您只需使用该href属性并将内容包装在[url]标记内.

最后,BBCode解析器第二次解析得到的BBCode,并输出任何BBCode输出选项.BBCode并没有真正的标准,因此块级元素之后的新行应该是可配置的.

基本上SCEditor的作用是:

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

我从创建SCEditor中学到的是,除非你想花费数年时间来完善它,否则不要编写带有contentEditable的WYSIWYG编辑器,只需使用/ build on别人的.CKEditor开发者在另一篇文章中有一个答案,说的几乎是一样的.

如果你想制作自己的WYSIWYG编辑器,使用Rangy处理浏览器选择应该会让事情变得更容易.本机浏览器选择API(或者至少是)非常错!不仅如此,IE <9使用完全非标准的方法来访问选择.Rangy提供了一个通用的API,可以与IE的非标准方法一起使用,也可以解决浏览器错误.