富文本编辑器:UEditor与wangEditor 初使用总结

## 1、UEditor

 1. UEditor 是由百度「FEX前端研发团队」开发的所见即所得富文本web编辑器，具有轻量，可定制，注重用户体验等特点，开源基于MIT协议，允许自由使用和修改代码。
 2. 插件多，基本满足各种需求


### 1.1、环境

> 环境搭建，结合了XAMPP(建站集成软件包)搭建后台，图片上传功能实现的必备-结合后台

### 1.2、使用

>1、研究官方文档，使用官方提供的一些[方法][1]
2、[工具栏定制][2]
3、本次研究主要研究UEditor的图片上传功能
4、研究具体文件中具体功能的事件执行
...
### 1.3、遇见的问题
> 1、复制的图片有些不能上传到服务器上
2、批量上传--重复，顺序错乱
3、从word文档中复制图片--空白显示

### 1.4、问题点
>1、对于不能上传的服务器上的，比如冲网上复制粘贴的，只要被复制的文件是以图片格式保存的就可以上传到服     务器上，但是如果不是图片格式的，复制到编辑器中的图片就指向他原来的服务器上
2、图片上传重复，Uploader.class.php 中 的随机数函数$randNum = rand(1, 10000000000) . rand(1,           10000000000); 这个取值范围太大了，超过了int的范围，从而导致了错误。
3、图片上传错乱，多图上传使用插件webuploader，他是多线程上传的，ueditor对“uploadSuccess”的处理是上传   成功一张，就加入到数组中，这样如果靠后图片很小，上传就很快，以至先加入队例，最终加入文本框的顺序也乱了
4、xss过滤中，任何不在白名单中的标签和属性功能直接消失

### 1.5、后续
>在文件管理系统中，使用编辑器时，发现在ueditor，没有使用模块化,为了在react中使用该编辑器，对他的源码做了一下修改，参照网上[大神][3]的做法，关键文件修改导出方式为模块化，并且以import的方式引入其他文件依赖。同时需要引入一些loader，使react项目有处理这些文件的能力。目前已在react中引入
缺点：不利于更新ueditor的版本

--- 
## 2、wangEditor
> 基于javascript和css开发的 Web富文本编辑器， 轻量、简洁、易用、开源免费

### 2.1、使用
> 结合[官方文档][4]使用方法，在项目中搭建起来
在项目中由于使用的弹框，所以使用了setTimeout定时函数，获取节点，创建编辑器
H标签无效 ---> 被清除了

--- 
## 3、比较

 1. 模块化
 
> UEditor 未模块化,在react中使用需要修改源码
wangEdior 模块化可以很好的在react 框架结合使用

 2. 丰富度

> UEditor 插件多，基本满足各种需求 由百度web前端研发部开发
wangEdior 轻量简洁，目前是个人维护，真的很简洁~


  [1]: https://ueditor.baidu.com/doc/
  [2]: http://fex.baidu.com/ueditor/#start-toolbar
  [3]: https://www.jianshu.com/p/d5d5ee66e733
  [4]: https://www.kancloud.cn/wangfupeng/wangeditor3/335769
复制代码