富文本编辑器实现原理（富文本编辑器介绍）

1    
    
    
    
  、富文本编辑器的意义

普通的文本框（如input, text）只能输入纯文本以及 Emoji（只不过是特殊编码的文本）    
    
    
    
  ，如果只是简简单单写些纯文本的内容（比如表单  


     


     


     


     
，简单的评论等）


 




 




 




 




，这是一个非常不错的选择   

   

   

   

 ，但是如果需要让用户输入包括但不限于图片  


     


     


     


     
、视频


 




 




 




 




、加粗文本等内容   

     

     

     

     ，这种方式就行不通了 
    
    
    
    
。这是时候就可以使用富文本编辑器来实现
     


     


     


     


  。

富文本编辑器



  




  




  




  




，Multi-function Text Editor, 简称 MTE, 是一种可内嵌于浏览器  


  


  


  


，所见即所得的文本编辑器 




 




 




 




 
。功能强大的富文本编辑器可以实现文本编辑   

   

   

   

 、格式设置   

     

     

     

     、排版设置



  




  




  




  




、媒体文件编辑上传  


  


  


  


、超链接    
     
     
     
     、文本导出




   




   




   




   



、打印等等功能 

   

   

   

   

。

2 



 



 



 



、富文本编辑器的分类

常见的富文本编辑器现实方式可以分成三类    
     
     
     
     ，分别是用textarea                         、 contenteditable 和Canvas
     

     

     

     

 。

lTextarea

最早的编辑器实现




   




   




   




   



，起始阶段 



 



 



 



，最简单的如多行文本                        ，结构简单使用方便




    




    




    




    


，一些文本格式和复杂的样式难以实现




















，推荐仅在对编辑要求不高的场景使用  




  




  




  




  。

lContenteditable

HTML中的contentEditable的属性可以打开某些元素的可编辑状态（ div, table ,p ,span ,body）                       ，将元素的contenteditable 属性设为 true时 



     



     



     



     

，该元素则成为了编辑器的主体 


  


  


  


  


。配合着 document.execCommand 能够实现绝大多数功能





















，当前主流编辑器都是基于 contenteditable 来设计的
     
     
     
     
。

contentEditable使dom变得可编辑    
    
    
    
  ，那么execCommand则提供了从外部修改DOM的api   




   




   




   




   。可以操作dom内容的变化 



 



 



 



 


。两者进行组合  


     


     


     


     
，即可实现一个最简单的富文本编辑器                    。

但是单纯依赖contenteditable 直接产出 html 会带来一些问题


 




 




 




 




，例如相同的输入在不同浏览器下的输出可能不一致   

   

   

   

 ，相同的输出在不同浏览器中展示存在差异   

     

     

     

     ，同时 html 使用具有局限性



  




  




  




  




，不方便在跨平台间使用
    




    




    




    




   。因此更好的方案是制定一套数据结构 + 文档模型  


  


  


  


，所有的输入都经过编辑器生成约定的产物    
     
     
     
     ，这样在不同的平台均可解析并且保证得到预期的效果






















。

lcontenteditable + Selection + Range

这种方式比上面的execCommand 好处就在可以不过度依赖浏览器的行为




   




   




   




   



，使用 Selection 获取用户选区 



 



 



 



，使用 Range API 来操控选区（比如简单的加粗操作）                        ，不过用这种方式就需要你自己去处理各种选区情况了（比如节点内操作




    




    




    




    


、跨节点操作等）




    




    




    




    


，

相较于上面的方式




















，开发难度提高                     。但是开发自由度也提升了
     



     



     



     



   。

lCanvas

这种方式差不多就是浏览器给你提供绘图能力和监听用户输入的能力                       ，除此之外其他全部你自己实现





















。因为完全不使用contenteditable 



     



     



     



     

，也就完全摆脱了对浏览器行为的依赖 
    
    
    
    
。当时难度也就成倍增长
     


     


     


     


  。相当于在浏览器里面在开发一个浏览器了 




 




 




 




 
。

3




















、常用文本编辑器介绍和比较

UEditor

适用浏览器：IE6+                       、FireFox 



     



     



     



     

、Chrome...

UEditor是由百度WEB前端研发部开发的所见即所得的开源富文本编辑器





















，开源基于BSD协议    
    
    
    
  ，所有源代码在协议允许范围内可自由修改和使用 

   

   

   

   

。UEditor 在设计上采用了经典的分层架构设计理念  


     


     


     


     
，尽量做到功能层次之间的轻度耦合
     

     

     

     

 。具体来讲


 




 




 




 




，整个系统分为了核心层





















、命令插件层和UI层这样三个低耦合的层次  




  




  




  




  。

1    
    
    
    
  、核心层提供了编辑器底层的一些方法和概念

2  


     


     


     


     
、在核心层之上覆盖的是命令插件层 


  


  


  


  


。之所以叫命令插件层   

   

   

   

 ，是因为UEditor中所有的功能型实现都是通过这一层中的命令和插件来完成的   

     

     

     

     ，并且各个命令和插件之间基本互不耦合

3


 




 




 




 




、在命令插件层之上则是UI层
     
     
     
     
。UEditor的UI设计与核心层和命令插件层几乎完全解耦



  




  




  




  




，简单的几个配置就可以为编辑器在界面上添加额外的UI元素和功能   




   




   




   




   。

优点：

1   

   

   

   

 、体积小巧  


  


  


  


，性能优良    
     
     
     
     ，使用简单   

     

     

     

     、开源免费

2



  




  




  




  




、功能比较全面




   




   




   




   



，插件很多 



 



 



 



，还可以很方便插入百度地图                        ，接入十分简单

3  


  


  


  


、支持中文文档

4    
     
     
     
     、界面美观

缺点：

1




   




   




   




   



、2016年后




    




    




    




    


，百度基本已经很少对编辑器和文档的维护更新 



 



 



 



 


。

2 



 



 



 



、虽然支持中文文档




















，但是内容少                       ，可查询资料少                    。

3                        、图片只能上传到本地服务器 



     



     



     



     

，如果需要上传到其他服务器需要改动源码

中文文档：http://fex.baidu.com/ueditor/

GitHub： https://github.com/fex-team/ueditor

CKEditor

适用浏览器：IE6+




    




    




    




    


、FireFox




















、Chrome                       、Safari 



     



     



     



     

、Opera...

CKEditor 是一款功能强大的开源在线文本编辑器
    




    




    




    




   。它所见即所得的特点





















，使你在编辑时所看到的内容和格式    
    
    
    
  ，能够与发布后看到的效果完全一致






















。CKEditor 完全是基于 JavaScript 开发的  


     


     


     


     
，因此不必在客户端进行任何安装


 




 




 




 




，并且兼容各大主流浏览器                     。

由于CKEditor的整体架构是建立在灵活的插件机制之上的
     



     



     



     



   。因此我们可以将特定的自定义功能独立于编辑器的核心代码之外





















。实际上包括许多CKEditor已有的预置功能   

   

   

   

 ，都是利用插件的形式开发的 
    
    
    
    
。因为不同的插件位于各自的文件   

     

     

     

     ，所以管理维护都很方便
     


     


     


     


  。

优点：

1





















、功能齐全



  




  




  




  




，拥有丰富的样式和插件

2    
    
    
    
  、定制性强  


  


  


  


，提供较多的扩展性API

3  


     


     


     


     
、由IBM支持的开发团队进行维护    
     
     
     
     ，社区活跃




   




   




   




   



，仍在更新和修复bug

4


 




 




 




 




、高性能的实时预览 



 



 



 



，行内编辑功能                        ，使得编辑内容更加直观

缺点：

1   

   

   

   

 、只有英文文档




    




    




    




    


，需要额外的开发时间 




 




 




 




 
。

官方文档：WYSIWYG HTML Editor with Collaborative Rich Text Editing

GITHub：https://github.com/ckeditor/ckeditor5

BraftEditor

使用浏览器：IE6+   

     

     

     

     、FireFox



  




  




  




  




、Chrome...

Brafteditor是一个美观易用的React富文本编辑器 

   

   

   

   

。这个编辑器开箱即用




















，不用重复早轮子
     

     

     

     

 。其底层逻辑是基于Facebook的draft-js开发的                       ，draft-js需要各种配置才能使用 



     



     



     



     

，而Brafteditor使用起来则非常简单  




  




  




  




  。其有两种数据结构





















，分别是raw（用于数据的编辑操作）和 html （用于数据的展示） 


  


  


  


  


。他们之间可以进行转换    
    
    
    
  ，但是可能导致一些属性的缺失
     
     
     
     
。所以一般需要将两种数据都进行存储   




   




   




   




   。

优点：

1  


  


  


  


、使用简单  


     


     


     


     
，不需要额外配置    
     
     
     
     、安装即可使用

2




   




   




   




   



、基于react开发


 




 




 




 




，和react项目有非常好的兼容性

3 



 



 



 



、中文开发文档   

   

   

   

 ，文档用例清晰明确

4                        、具有高度可扩展性和可定制性；

缺点：

1




    




    




    




    


、当需要表格这样复杂的内容结构时   

     

     

     

     ，编辑器将会变慢



  




  




  




  




，代码也会变得复杂

2




















、文档少  


  


  


  


，查阅不方便 



 



 



 



 


。

3                       、提供的基础插件较少    
     
     
     
     ，需要定制开发

4 



     



     



     



     

、缺乏官方的移动端支持

中文文档：Braft Editor | 基于DraftJS的强扩展性React富文本编辑器

英文文档：Rich Styling | Draft.js

GITHub：https://github.com/facebook/draft-js

TinyMCE

适用浏览器：IE6+





















、FireFox    
    
    
    
  、Chrome  


     


     


     


     
、Safari


 




 




 




 




、Opera...

功能方面虽然不能称得上是最强




   




   




   




   



，但绝对能够满足大部分网站的需求 



 



 



 



，并且功能配置灵活简单                    。另一特点是加载速度非常快                        ，如果你的服务器采用的脚本语言是PHP




    




    




    




    


，那还可以进一步优化
    




    




    




    




   。它支持市面上所有流行的浏览器




















，包括 IE6+ 和 Firefox1.5+                       ，

该编辑器由JavaScript 编写而成 



     



     



     



     

，功能配置灵活简单





















，同时 TinyMCE 可以很方便的在可视化模式与 HTML 模式进行切换    
    
    
    
  ，TinyMCE 是一个根据 LGPL license 协议发布的自由软件  


     


     


     


     
，你可以把它用于商业应用






















。

优点：

1   

   

   

   

 、插件丰富


 




 




 




 




，可扩展性强   

   

   

   

 ，有能力可以无限拓展功能

2   

     

     

     

     、界面好看   

     

     

     

     ，符合现代审美



  




  




  




  




， 提供经典



  




  




  




  




、内联  


  


  


  


、沉浸无干扰三种模式

3    
     
     
     
     、多语言支持  


  


  


  


，官网可下载几十种语言                     。

4




   




   




   




   



、开源免费的    
     
     
     
     ，目前一直有人维护
     



     



     



     



   。

缺点：

1 



 



 



 



、部分文档为中文




   




   




   




   



，但是官方文档为英文 



 



 



 



，定制和扩展开发需要花费时间

2                        、需要付费订阅才能使用其高级功能

中文文档：TinyMCE中文文档中文手册

英文文档：The Most Advanced WYSIWYG HTML Editor | Trusted Rich Text Editor | TinyMCE

GITHub：https://github.com/tinymce/tinymce

Quill.js

适用浏览器：IE6+




    




    




    




    


、FireFox




















、Chrome                       、Safari 



     



     



     



     

、Opera...

Quill 是一个免费的                        ，开源的 WYSIWYG （What You See Is What You Get）编辑器




    




    




    




    


，专为现代网络而打造





















。凭借其模块化架构和富有表现力的 API




















，你可完全自定义以满足任何需求 
    
    
    
    
。

Quill 专为编辑和字符设计的                       ，并在这些以自然文本为中心的单元之上构建其API
     


     


     


     


  。要找出某些文字是否是粗体 



     



     



     



     

，Quill 不需要遍历 DOM 查找 <b> 或者 <strong> 节点或者一个 font-weight 样式属性





















，只需调用 getFormat(5, 1) 




 




 




 




 
。它的所有核心 API 调用都允许任意索引和长度进行访问或修改 

   

   

   

   

。其事件 API 还会以直观的 JSON 格式报告更改
     

     

     

     

 。而无需解析 HTML 或者比较 DOM 树差异

优点：

1





















、易于设置和使用    
    
    
    
  ，简洁轻便  


     


     


     


     
，真正做到了开箱即用  




  




  




  




  。

2    
    
    
    
  、预设编辑器样式的主题支持 


  


  


  


  


。

3  


     


     


     


     
、由于其 API 驱动的设计


 




 




 




 




，无需像在其他文本编辑器中那样解析 HTML

缺点：

1


 




 




 




 




、有限的定制功能

2   

   

   

   

 、更新和补丁较少

3   

     

     

     

     、可能存在 XSS 安全漏洞

4



  




  




  




  




、官方文档为英文   

   

   

   

 ，开发需要花费时间

英文文档： Quill - Your powerful rich text editor

GITHub：https://github.com/quilljs/quill/tree/develop/docs/docs/quickstart.md