【石家庄校区】总复习系列贴-富文本编辑器

什么是富文本编辑器

       富文本编辑器，Rich Text Editor, 简称 RTE, 是一种可内嵌于浏览器，所见即所得的文本编辑器。它是一种解决可一般的用户不同html等网页标记但是需要在网页上设置字体的颜色、大小、样式等信息问题一个文本编辑器。下面简单的介绍一下富文本编辑器的用法和简要的原理。

具体表现如下

      

   

几种知名开源富文本编辑器记录和对比（仅供参考）

       1、UEditor 百度的。

优点：插件多，基本满足各种需求，类似贴吧中的回复界面。

缺点：不再维护，文档极少，使用并不普遍，图片只能上传到本地服务器，如果需要上传到其他服务器需要改动源码，较为难办，加载速度慢。

总结：小项目，可以用用，不推荐使用。

2、kindeditor

界面类似百度，效果很像

文档齐全但用例较少，使用还算方便。

缺点：总感觉样子不是很好看，没有现代那种风格，还是老式的传统图标。

http://kindeditor.net/demo.php

使用文档参考淘淘第三天课堂笔记

3、simditor

样式好看，插件不多，基本满足需求

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

github上面开源，维护较好

因为文档看起来吃力，所以本人没有考虑继续使用。

http://simditor.tower.im/

4、bootstrap-wysiwyg

利用bootstrap实现的，简洁大方好看。

优点：轻量，好看，使用方便。

缺点：需要一定的浏览器支持，毕竟需要bootstrap

http://www.bootcss.com/p/bootstrap-wysiwyg/

5、wangEditor

js和css实现

优点：轻量简洁，最重要的是开源且中文文档齐全。设计的UI漂亮。

插件基本能满足需求，本人推荐使用。

http://www.wangeditor.com/index.html

6、CKEditor

功能强大，使用较多，可以看他们官网的例子，马上就有感觉。

优点：编辑能力极强，基本和word差不多了。看起来界面极其优秀的一款。

缺点：网站访问速度一般，文档英文，需要花时间开发。

http://ckeditor.com/

7、tinymce

支持图片在线处理，插件多，功能强

编辑能力优秀，界面好看。

同样文档为英文，开发需要花时间。

https://www.tinymce.com/

使用之前需要考虑的点：

1需要插件，是否需要很多的插件，还是说简单的那些功能就行了。

2界面考虑，看你喜欢那个界面了。

3图片是否需要上传图片服务器。

4文档如果为英文是否会影响开发。

5支持浏览器类型和版本。

KindEditor使用：

第一步：在jsp中引入KindEditor的css和js代码。

第二步：在表单中添加一个textarea控件。是一个富文本编辑器的载体。类似数据源。

第三步：初始化富文本编辑器。使用官方提供的方法初始化。

第四步：取富文本编辑器的内容。

表单提交之前，把富文本编辑器的内容同步到textarea控件中。

【石家庄校区】总复习系列贴-富文本编辑器

什么是富文本编辑器

       富文本编辑器，Rich Text Editor, 简称 RTE, 是一种可内嵌于浏览器，所见即所得的文本编辑器。它是一种解决可一般的用户不同html等网页标记但是需要在网页上设置字体的颜色、大小、样式等信息问题一个文本编辑器。下面简单的介绍一下富文本编辑器的用法和简要的原理。

具体表现如下

      

   

几种知名开源富文本编辑器记录和对比（仅供参考）

       1、UEditor 百度的。

优点：插件多，基本满足各种需求，类似贴吧中的回复界面。

缺点：不再维护，文档极少，使用并不普遍，图片只能上传到本地服务器，如果需要上传到其他服务器需要改动源码，较为难办，加载速度慢。

总结：小项目，可以用用，不推荐使用。

2、kindeditor

界面类似百度，效果很像

文档齐全但用例较少，使用还算方便。

缺点：总感觉样子不是很好看，没有现代那种风格，还是老式的传统图标。

http://kindeditor.net/demo.php

使用文档参考淘淘第三天课堂笔记

3、simditor

样式好看，插件不多，基本满足需求

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

github上面开源，维护较好

因为文档看起来吃力，所以本人没有考虑继续使用。

http://simditor.tower.im/

4、bootstrap-wysiwyg

利用bootstrap实现的，简洁大方好看。

优点：轻量，好看，使用方便。

缺点：需要一定的浏览器支持，毕竟需要bootstrap

http://www.bootcss.com/p/bootstrap-wysiwyg/

5、wangEditor

js和css实现

优点：轻量简洁，最重要的是开源且中文文档齐全。设计的UI漂亮。

插件基本能满足需求，本人推荐使用。

http://www.wangeditor.com/index.html

6、CKEditor

功能强大，使用较多，可以看他们官网的例子，马上就有感觉。

优点：编辑能力极强，基本和word差不多了。看起来界面极其优秀的一款。

缺点：网站访问速度一般，文档英文，需要花时间开发。

http://ckeditor.com/

7、tinymce

支持图片在线处理，插件多，功能强

编辑能力优秀，界面好看。

同样文档为英文，开发需要花时间。

https://www.tinymce.com/

使用之前需要考虑的点：

1需要插件，是否需要很多的插件，还是说简单的那些功能就行了。

2界面考虑，看你喜欢那个界面了。

3图片是否需要上传图片服务器。

4文档如果为英文是否会影响开发。

5支持浏览器类型和版本。

KindEditor使用：

第一步：在jsp中引入KindEditor的css和js代码。

第二步：在表单中添加一个textarea控件。是一个富文本编辑器的载体。类似数据源。

第三步：初始化富文本编辑器。使用官方提供的方法初始化。

第四步：取富文本编辑器的内容。

表单提交之前，把富文本编辑器的内容同步到textarea控件中。