7 款 Bootstrap 在线富编辑器

Bootstrap 已经大大简化响应式 web 开发，但是，如果再加上不用手动一点点敲代码，而是可以快速选择你想要使用的 Bootstrap 组件，然后直接将其拖进你的画板中，开发是否会变得更加轻松？！

这便是所谓的所见即所得（What you see is what you get，WYSIWYG）开发模式，能帮你达成这一切的，便是“所见即所得编辑器”。

所见即所得编辑器通常分为以下两大类：

1. 富文本编辑器
2. 框架编辑器

富文本编辑器侧重于网页中大块连续文本的格式编辑，基本编辑样式包括：字体、颜色、列表、链接、图片等等，一般所生成的内容都是作为网页的主体展示给用户。

框架编辑器则用于快速搭建网页的整体布局，操作时，更多的是组件的选择与拖放，以达到高效、批量地生产静态页面的目的，一般可操作的组件有：导航、列、行、面板等等。

本文会将所有流行的 Bootstrap 富文本编辑器集中介绍给大家。

而在另一篇文章中，将会重点介绍上述提及的框架编辑器，详见：

Bootstrap 在线框架编辑器：http://classfoo.com/ccby/article/LfVtbU9

注意！本文中的所有网址都来自对应插件的官方网站，可能需要代理才能访问。

• CKEditor

  • Ethan 编辑于 04-11
  • 版本0
  • 评论0

  CKEditor 是目前最优秀的免费、开源 web 富编辑器之一。

  

  主要特点：

  免费 开源 社区驱动 大量插件 高度可定制 编辑体验流畅 兼容所有主流浏览器

  默认不支持 Bootstrap 样式，但其高度可配置可以轻松的满足这一要求。

  需要考虑的：

  1. 如果想自定义特性，需要一定的初期学习成本。
  2. 功能完善导致架构复杂，使得体积稍显臃肿（作为前台编辑器时，可能会考虑）。
  3. 需求特殊，且无插件可以满足时，如果考虑修改核心代码成本高昂。
  4. 国内无核心社区。

  官网：http://ckeditor.com/

  在线例子：http://ckeditor.com/demo

  下载地址：http://ckeditor.com/download

  官方文档：http://docs.cksource.com/Main_Page

  开源地址：https://github.com/ckeditor/ckeditor-dev

• Tinymce

  • Ethan 编辑于 04-11
  • 版本0
  • 评论0

  Tinymce 是目前最优秀的免费、开源 web 富编辑器之一。

  

  主要特点：

  免费 开源 社区驱动 大量插件 高度可定制 编辑体验流畅 兼容所有主流浏览器

  默认不支持 Bootstrap 样式，但其高度可配置可以轻松的满足这一要求。

  需要考虑的：

  1. 如果想自定义特性，需要一定的初期学习成本。
  2. 功能完善导致架构复杂，使得体积稍显臃肿（作为前台编辑器时，可能会考虑）。
  3. 需求特殊，且无插件可以满足时，如果考虑修改核心代码成本高昂。
  4. 国内无核心社区。

  官网：http://www.tinymce.com/index.php

  在线例子：http://www.tinymce.com/tryit/basic.php

  官方文档：http://www.tinymce.com/wiki.php

  下载地址：http://www.tinymce.com/download/download.php

  开源地址：https://github.com/tinymce/tinymce

  Tinymce 与 CKEditor 是 web 富编辑器的两大阵营，分别占领了一定的富编辑器市场，如果一定要做个对比，较明显的区别如下：

  • 两者都提供了极其丰富的插件，但相比来说，同样的功能，CKEditor 的选项会多很多，尽量减少直接修改源码的可能。

  • 对于拷贝粘贴，CKEditor 更加友好，它总是能更加精确的替换来源网站的标签。

  • 新特性来说，CKEditor 也总是能领先其对手一步，更重要的是，它的开发者文档非常完善。

  • 大小上，Tinymce 具有明显优势，其几乎是 CKEditor 的一半，这也是后者为其它优势所付出的代价。

• UEditor

  • Ethan 编辑于 04-11
  • 版本0
  • 评论0

  UEditor 是由百度 WEB 前端研发部开发的所见即所得的开源富文本编辑器，具有轻量、可定制、用户体验优秀等特点。

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

  

  官网：http://ueditor.baidu.com/website/index.html

  在线例子：http://ueditor.baidu.com/website/onlinedemo.html

  官方文档：http://fex.baidu.com/ueditor/

  下载地址：http://ueditor.baidu.com/website/download.html

• CFEditor

  • Ethan 编辑于 04-11
  • 版本0
  • 评论0

  这是 classfoo.com 全站所使用的所见即所得（WYSIWYG）富编辑器（Rich Editor），其使用 BootStrap 3.x 样式，最低支持 IE 8。

  
  

  官网：http://classfoo.com/app/editor

  在线例子：http://classfoo.com/app/editor

  下载地址：https://github.com/ethan-chan/CFEditor

  开源地址：https://github.com/ethan-chan/CFEditor

• Summernote

  • Ethan 编辑于 04-11
  • 版本0
  • 评论0

  这是一款轻量的 Bootstrap 编辑器，压缩后实际大小为 58KB，最低支持为 IE 9。

  

  官网：http://summernote.org/#/

  开源地址：https://github.com/summernote/summernote

• bootstrap-wysihtml5

  • Ethan 编辑于 04-11
  • 版本0
  • 评论0

  基于 wysihtml5 开发的以 Bootstrap 为皮肤的编辑器。

  

  官网：http://jhollingworth.github.com/bootstrap-wysihtml5/

  开源地址：https://github.com/jhollingworth/bootstrap-wysihtml5/

• bootstrap-wysiwyg

  • Ethan 编辑于 04-11
  • 版本0
  • 评论0

  以 Bootstrap 为皮肤编辑器，压缩后仅有 5KB 大小，其通过直接开启浏览器编辑功能来实现，最底支持 IE 10。

  注意！该编辑器 Bug 较多，不建议正式使用，除非您的编辑需求极为简单。

  

  官网：http://mindmup.github.io/bootstrap-wysiwyg/

  开源地址：https://github.com/mindmup/bootstrap-wysiwyg/