普及一下基本知识：什么叫在线HTML编辑器？

说得简单点，在线HTML编辑器就是在网上发帖子、写博客的那个带编辑功能的框框，可以进行图文排版等操作。

当年本菜鸟做网站的时候，曾经自己用javascript编写过一个比较简单的在线HTML编辑器，用于文本内容的排版。但是因为水平有限，很多功能都无法实现。后来有了eWebEditor，功能确实强大，但这个编辑器是个收费的软件，并且正因为功能强大，也就显得过重，一些轻量的场合不是太适用。那有没有既免费、又功能强大、还能适应轻量场合的在线HTML编辑器呢？

答案肯定是有的。这首先要感谢这些年来有一批奉献精神的程序猿们不断推进共享软件的开发，让我们得以享受他们的成果。

一、百度出品的UEditor

UEditor是由百度web前端研发部开发所见即所得富文本web编辑器，具有轻量，可定制，注重用户体验等特点，开源基于MIT协议，允许自由使用和修改代码。特别要说的是，头条号后台发布文章的编辑器就是用的UEditor!

百度UEditor

UEditor还有一个轻量版的，叫做UMeditor，简称UM。UM是为满足广大门户网站对于简单发帖框，或者回复框需求所定制的在线HTML编辑器。 主要特点是容量和加载速度上的改变，主文件的代码量为139k，而且放弃了使用传统的iframe模式，采用了div的加载方式， 以达到更快的加载速度和零加载失败率。UM的第一个使用者是百度贴吧，以经受贴吧每天几亿的pv的考验，功能设计应当是最优化的了。 当然随着代码的减少，UM的功能对于UE来说还是有所减少，但也有增加，比如拖拽图片上传，chrome的图片拖动改变大小等。

百度UEditor界面

二、xhEditor开源HTML编辑器

xhEditor是一个基于jQuery开发的简单迷你并且高效的可视化HTML编辑器，基于网络访问并且兼容IE 6.0+,Firefox 3.0+,Opera 9.6+,Chrome 1.0+,Safari 3.22+。

xhEditor完全基于Javascript开发，可以应用在任何的服务端语言环境下，例如：PHP、ASP、ASP.NET、JAVA等。可以在CMS、博客、论坛、商城等互联网平台上完美的嵌入运行，能够非常灵活简单的和您的系统实现完美的无缝衔接。

主要特点：

• 精简迷你：初始加载4个文件，包括：1个js(50k)+2个css(10k)+1个图片(5k)，总共65k。若js和css文件进行gzip压缩传输，可以进一步缩减为24k左右。

• 使用简单：简单的调用方式，加一个class属性就能将textarea变成一个功能丰富的可视化编辑器。

• 无障碍访问：提供WAI-ARIA全面支持，全键盘精细操作，全程语音向导，提供完美无障碍访问体验，充分满足残疾人的上网需求。

• 内置Ajax上传：内置强大的Ajax上传，包括HTML4和HTML5上传支持(多文件上传、真实上传进度及文件拖放上传)，剪切板上传及远程抓取上传。

• Word自动清理：实现Word代码自动检测并清理，生成代码最优化精简，却不丢失细节效果。

• UBB可视化编辑：支持UBB可视化编辑，在获得安全高效代码存储的同时，又能享受可视化编辑的便捷。

三、KindEditor开源HTML编辑器

KindEditor 也是一个开源的在线HTML编辑器， 使用 JavaScript 编写，可以无缝地与 Java、.NET、PHP、ASP 等程序集成，比较适合在 CMS、商城、论坛、博客、Wiki、电子邮件等互联网应用上使用。本菜鸟感觉这个编辑器上手比较容易，功能也很强大，界面比较友好，很适合菜鸟使用。可惜的是最近好像停止更新了，官网好象也能不正常访问。

KindEditor界面

主要特点：

• 快速：体积小，加载速度快

• 开源：开放源代码，高水平，高品质

• 底层：内置自定义 DOM 类库，精确操作 DOM

• 扩展：基于插件的设计，所有功能都是插件，可根据需求增减功能

• 风格：修改编辑器风格非常容易，只需修改一个 CSS 文件

• 兼容：支持大部分主流浏览器，比如 IE、Firefox、Safari、Chrome、Opera

四、阿里的KISSY

严格来说，KISSY不仅仅是一个在线HTML编辑器，而是由阿里集团前端工程师们发起创建的一个开源 JS 框架，具有跨终端、模块化、使用简单的特点。里面带有HTML编辑器这个模块。

阿里的KISSY

正因为KISSY采取模块化设计，因此具有高扩展性、组件齐全，接口一致、自主开发、适合多种应用场景等优点。KISSY 除了完备的工具集合诸如 DOM、Event、Ajax、Anim 等，KISSY 还面向团队协作做了独特设计，提供了经典的面向对象、动态加载、性能优化解决方案。作为一款全终端支持的 JavaScript 框架，KISSY还 为移动终端做了大量适配和优化，搞移动web开发的可以好好研究一下KISSY的运用。

关于菜鸟手记：

菜鸟最怕就是看大神的攻略，全是术语看头就头大！本人作为一名对啥都感兴趣的资深菜鸟，潜心研究各类技术二十余年，做网站、写程序、搞美工、练书法、学画画、作文章、抓管理、装逼格，属于搞IT里面最懂美工的，搞HR里面最懂画画的，搞文字里面最懂程序的，最终一事无成，博而不精，徒留一堆手记。从菜鸟角度写手记，同样的”白”更易懂，你值得拥有！感兴趣的，请别忘点右角关注菜鸟手记。

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

1、UEditor---百度编辑器

网址：http://ueditor.baidu.com/website/

UEditor是由百度web前端研发部开发所见即所得富文本web编辑器，具有轻量，可定制，注重用户体验等特点，开源基于MIT协议，允许自由使用和修改代码。

UEditor推出后帮助网站开发者在开发富文本编辑器所遇到的难题，节约开发时间，有效降低了开发成本。

2、CKEditor 和 FCKeditor

网址：http://ckeditor.com/

CKEditor是新一代的FCKeditor，是一个重新开发的版本。CKEditor是全球最优秀的网页在线文字编辑器之一，因其惊人的性能与可扩展性而广泛的被运用于各大网站。它志于轻量化，不需要太复杂的安装步骤即可使用。它可和PHP、JavaScript、ASP、ASP.NET、ColdFusion、Java、以及ABAP等不同的编程语言相结合。

3、KindEditor

网址：http://kindeditor.net/

KindEditor 是一套开源的在线HTML编辑器，主要用于让用户在网站上获得所见即所得编辑效果，开发人员可以用 KindEditor 把传统的多行文本输入框(textarea)替换为可视化的富文本输入框。 KindEditor 使用 JavaScript 编写，可以无缝地与 Java、.NET、PHP、ASP 等程序集成，比较适合在 CMS、商城、论坛、博客、Wiki、电子邮件等互联网应用上使用。

主要特点：

快速：体积小，加载速度快

开源：开放源代码，高水平，高品质

底层：内置自定义 DOM 类库，精确操作 DOM

扩展：基于插件的设计，所有功能都是插件，可根据需求增减功能

风格：修改编辑器风格非常容易，只需修改一个 CSS 文件

兼容：支持大部分主流浏览器，比如 IE、Firefox、Safari、Chrome、Opera

4、TinyMCE

网址：https://www.tinymce.com/

TinyMCE是一个轻量级的基于浏览器的所见即所得编辑器，支持目前流行的各种浏览器，由JavaScript写成。功能配置灵活简单（两行代码就可以将编辑器嵌入网页中），支持AJAX。另一特点是加载速度非常快，如果你的服务器采用的脚本语言是 PHP，那还可以进一步优化。最重要的是，TinyMCE是一个根据LGPL license发布的自由软件，你可以把它用于商业应用。

5、Simditor

网址：http://simditor.tower.im/

Simditor 是团队协作工具 Tower 使用的富文本编辑器。Tower 认为，作为一款在线生产力工具，让用户能极其舒畅地生产内容是它的核心品质之一，因此决定自己开发一款编辑器，这就是 Simditor 产生的原因。Simditor的理念是保持简单，避免过度的功能，每一个特性都追求极致的用户体验。同时，Simditor也很容易扩展。

主要特点：

功能精简，加载快速

输出格式化的标准 HTML

每一个功能都有非常优秀的使用体验

兼容的浏览器：IE10+、Chrome、Firefox、Safari

6、eWebEditor

网址：http://www.ewebeditor.net/

eWebEditor是基于浏览器的、所见即所得的在线HTML编辑器。她能够在网页上实现许多桌面编辑软件（如：Word）所具有的强大可视编辑功能。WEB开发人员可以用她把传统的多行文本输入框<TEXTAREA>替换为可视化的富文本输入框，使最终用户可以可视化的发布HTML格式的网页内容。

7、wangEditor

网址：http://www.wangeditor.com/

wangEditor的定位是做最简单、易用、快捷、轻量化的富文本编辑器。基于javascript和css开发的开源免费Web富文本编辑器。它经历了两次代码重构和五次UI升级。配置方便，使用简单。支持 IE10+ 浏览器。

8、xhEditor

网址：http://xheditor.com/

xhEditor是一个基于jQuery开发的简单迷你并且高效的在线可视化HTML编辑器。

xhEditor完全基于Javascript开发，您可以应用在任何的服务端语言环境下。

xhEditor可以在CMS、博客、论坛、商城等互联网平台上完美的嵌入运行，能够非常灵活简单的和您的系统实现完美的无缝衔接。

自2009年4月首个版本发布以来，凭借我们人性化的用户体验和不断持续完善的态度，越来越多的网站选择了使用xhEditor。

主要特点：

精简迷你：初始加载65k。若gzip压缩传输，缩减为24k左右。

使用简单：简单的调用方式，就能将您的textarea立马变成一个可视化编辑器。

无障碍访问：提供WAI-ARIA全面支持，全程语音向导，让残疾人也能使用。

内置Ajax上传：内置强大的Ajax上传，剪切板上传及远程抓取上传。

Word自动清理：实现Word代码自动检测并清理。

UBB可视化编辑：提供完美的UBB可视化编辑解决方案。

9、bootstrap-wysiwyg

网址：http://www.bootcss.com/p/bootstrap-wysiwyg/

为Bootstrap定制的微型所见即所得（What you see is what you get）富文本编辑器。轻量、简洁大方好看、使用方便。

10、QuillEditor

网址：https://quilljs.com/

Quill 是一个开源的富文本编辑器，基于可扩展的架构设计，提供丰富的 API 进行定制。一个可以帮助开发人员解决所见即所得的编辑器工具，该编辑器旨在通过自身的编辑模块提供强大的API来构建自定义式的编辑器，最重要的是它没有规定样式，你可以自定义自己的编辑器以符合自己的使用需求。