富文本编辑器，Rich Text Editor, 简称 RTE, 它提供类似于 Microsoft Word 的编辑功能，容易被不会编写 HTML 的用户并需要设置各种文本格式的用户所喜爱。

它的原理其实很简单，就是设置 document 的 designMode 属性为 on 后，再通过执行 document.execCommand ('commane mand Name'[, UIFlag[, value]]) 即可。commandName 和 value 可以在MSDN 上和MDC 上找到，它们就是我们创建各种格式的命令，比方说，我们要加粗字体，执行 document.execCom mand('bold', false) 即可。通常是选中了文本后才执行命令，被选中的文本才被格式化。对于未选中的文本进行这个命令，各浏览器有不同的处理方式，比方 IE 可能是对位于光标中的标签内容进行格式化，而其它浏览器不做任何处理，这超出本文的内容，不细述。同时需要注意的是，UIFlag 这个参数设置为 true 表示 display any user interface triggered by the command (if any), 在我们今天的教程中都是 false, 而 value 也只在某些 commandName中才有。为了不影响当前 document, 通常的做法是在页面中嵌入一个 iframe 元素，然后对这个 iframe 内的 document(通过 iframe.contentWindow.document 获得)进行操作。

下面是几款常见的富文本编辑器的介绍：

1、wangEditor

优点：基于javascript和css开发的 Web富文本编辑器，轻量、简洁、易用、开源免费，中文文档齐全，样式可自定义，菜单栏可以自定义配置。设计的UI漂亮，插件基本能满足需求。源码注释很详细，感兴趣的可以参考源码。

与国产编辑器 百度ueditor 和 kindeditor 相比，它轻量、易用、UI设计精致漂亮。 国外编辑器 bootstrap-wysiwyg 和 simditor 相比，它文档易读、交流方便，更接地气。它还会根据使用者的反馈不断完善，未来将支持移动版。 支持IE6+浏览器。

缺点：没有强大的后台，案例不是很多，文档中说明了“从编辑器中获取的 html 代码是不包含任何样式的纯 html”，就是说需要自己编写样式。

2、UEditor

优点：由百度web前端研发部开发，开源基于MIT协议，支持商业和非商业用户的免费使用和任意修改，具有轻量，可定制，注重用户体验，插件多等特点。它的功能是非常全面、非常强大的，不仅包含丰富的文本样式编辑，还有强大的表格编辑功能，插入功能，而且接入十分简单。

缺点：比较庞大，对于网页的加载来说，会相对影响速度 ,界面不太美观。并且现在不再维护，文档极少，使用并不普遍，图片只能上传到本地服务器，如果需要上传到其他服务器需要改动源码，较为难办。

3、KindEditor

优点： 使用 JavaScript 编写，可以无缝地与 Java、.NET、PHP、ASP 等程序集成，比较适合在 CMS、商城、论坛、博客、Wiki、电子邮件等互联网应用上使用。文档齐全，界面类似百度UEditor。

缺点：存在图片上传问题，如果上传历史过多，会全部加载，导致浏览器卡，反应慢 。界面不太美观，还是老式的传统图标。

4、bootstrap-wysiwyg

优点：外观简洁大方，使用方便，支持网站充分利用Bootstrap、Font Awesome等工具库的优秀特性，没有强制规定的样式。

缺点：没有表情包 , 没有开发文档不便于阅读使用，无字体变色，无视频上传功能 。需要一定的浏览器支持，毕竟需要bootstrap。

5、simditor

优点：样式比较清新好看，插件不多，基本满足需求，github上面开源，维护较好。

缺点：英文文档，如果英文水平不好的话，使用较为吃力。

6、CKEditor

优点：国外开源，功能强大，使用较多，编辑能力极强，基本和word差不多了。看起来界面极其优秀的一款。它有行内编辑功能，编辑内容更加直观，仿佛是在编辑网页一样。

缺点：网站访问速度一般，文档英文，需要花时间开发，没有字体变色和视频上传功能，需要另外配置。

7、tinymce

优点：支持图片在线处理，插件多，功能强，编辑能力优秀，界面好看。

缺点：同样文档为英文，开发需要花时间，少了字体颜色的设置，代码高亮也不甚理想

8、Froala

一个JavaScript WYSIWYG编辑器，主要特点是能轻松地与主流开发框架进行集成。目前，可以将Froala与React.js，Aurelia，Angular，Ionic，Django和其他框架一起使用。

易于添加新功能。大量易于使用的插件(其中有30多个)无需进行复杂的操作便可添加新功能。 该编辑器具有编写良好的代码，并具有结构化和文档化的特点，非常易于理解、维护和扩展。

9、Textbox.io

一款极简但功能强大的在线文本编辑器，支持桌面设备和移动设备。主要功能包含内置的图像处理和存储、文件拖放、拼写检查和自动更正。此外，该工具还实现了屏幕阅读器等辅助技术，并符合WAI-ARIA可访问性标准。

移动设备支持用户使用适合移动设备的用户界面，从相机或图库上传图像，使用Siri或Cortana处理文本等。可以通过应用标准和自定义类或样式来更改Textbox.io的外观。

Textbox.io支持与ASP.NET，Knockout，XPage和Angular的集成。

10、DHTMLX富文本编辑器

一个完全可自定义的JavaScript文本编辑器，支持HTML和Markdown以及纯文本作为输入和输出格式。在Angular，React和Vue.js项目中可以使用此文本编辑器进行集成。

使用基于DHTMLX富文本编辑器的在线应用程序的用户可以在简洁的经典模式和文档模式之间切换。全屏模式对于使用小屏幕设备的用户非常有用。这种文本编辑器具有完全可自定义的外观，使得用户可以创造独一无二的外观和感觉。，通过使用任何所需的图标、字体或颜色，你可以开发具有识别度的设计。此外，还可以更改可用控件的性能，并根据需要添加自己的控件。

还有一些有用的功能，如计算单词、字符和其他自定义元素的数量。DHTMLX富文本编辑器支持块引用、链接以及所有必要的格式和编辑功能。

11、 Imperavi Redactor

一个基于Web的文本编辑器，提供流畅、干净的设计，具有可扩展性和无限的灵活性，其高效的API和惊人的用户体验更是别具特色。其模块化架构允许使用者快速扩展应用程序的功能。清晰的代码和简洁的UI为开发人员和用户创造了极好的体验。

目前，这款编辑器拥有22个插件来完成常规工作。此外，使用者还可以轻松地创建自己的插件。没有必要作为技术专家来安装和配置这个文本编辑器。在这个编辑器内文档很好写且不会造成任何麻烦。

12、Syncfusion富文本编辑器

一个轻量级JavaScript工具，支持HTML和Markdown。可以使用它来创建Web和移动应用程序，如博客编辑器、信使、在线论坛等。内联模式使内联编辑器在用户单击可编辑区域中的内容后显示。

工具栏配置有很多可选性。例如，可以根据项目的要求向应用添加多行工具栏、展开工具栏、快速工具栏或浮动工具栏。此外，还可以根据类别配置工具栏按钮和组命令。用户可以在文本中插入图像和超链接。并且，可以插入HTML表格来简化财务数据的工作。所有功能都可以动态操作。

在撰写本文时，Syncfusion富文本编辑器提供了与Angular、React和Vue.js的集成。库的列表所展示的内容不是很多，但它包含了最受欢迎的选项，这是一个加分项。

13、Quill

代码高亮是最完美的，因为它本身就支持了hignlight.js，同样支持行内编辑模式，可自定义。不限制框架，但是需要定制，理念很先进。

打个广告，本人博客地址是：风吟个人博客