UEditor富文本编辑器上传图片到阿里云

　　UEditor是一款百度旗下的富文本编辑器，样式和功能都很好看很多，所以在一个项目中使用了这个编辑器。使用起来很方便，直接引入即可，只有表情和文件图片上传的地方需要配置一下。表情的去年的一篇文章里有，这里主要说一下图片上传。以前一直是上传到电信的服务器，今年公司买了某里的服务器后，要切过去，后台目前只提供了一个公共的接口查域名、key、签名等，前端是参照某里官网介绍的上传方法来实现上传的。但是UEditor里的图片上传是写在自己里边的，要改的话一是怕改出问题，二是怕万一以后又要改，所以采用增加一个自定义上传的功能。

1.UEditor文件图片上传

　　关于这个网上有很多文章，一致的方法是后台定义一个接口来辅助上传。这里不再赘述，可以直接搜一下，很多文章介绍，或者官网也有指导。这里提一下UEditor的源码，因为下边的内容是要修改源码的。

源码很长，几万行，我也只看了几眼主要的地方。比如在config.js里的配置，在all.js里的指令UE.commands，执行指令execCommand。

2.某里上传文件

　　这里使用的是某里的OSS文件系统，官网有demo，是基于plupload的。plupload也看了几眼代码，然后写了两个方案，一个是直接使用某里的demo做修改（需要依赖plupload），一个是仿照plupload组织一下上传的请求的格式（某里的接口的参数是按照这个定义的），这样就不需要进行那么多依赖。参数是form格式，大致代码如下

　　　　let params = {
            // key--路径+名称
            'key' : this.storageId,
            'policy': this.policy,
            'OSSAccessKeyId': this.OSSAccessKeyId, 
            'success_action_status' : this.success_action_status //让服务端返回200,不然，默认会返回204
            ,'signature': this.signature,
            file
        }
        for(let key in params) {
            fd.append(key, params[key])
        }

3.UEditor自定义功能

　　上传到阿里云，最好的实现方法是服务来实现，即1里边说的接口。如果服务支持，可以不用在这里浪费时间了。我是因为没有接口，所以才自己写的。

　　自定义新功能步骤：

3.1在ueditor.config.js中找到toolbars的数组，并在数组中添加一个你需要新增的按钮功能名称；

3.2在zh-cn.js 中找到labelMap并添加key是你3.1的名称的提示，主要是用于鼠标放置上去显示的文字提示内容，当然你也可以顺便加一下英文文件里的提示；

3.3.在ueditor.all.js  中找到"btnCmds" ,在数组的最后添加上你的3.1的功能的名称。到这一步，你的页面上已经可以出现新的图标了，但是现在显示的是B，即默认的加粗按钮的样式；

3.4在ueditor.css中添加你的按钮的样式，仿照其他按钮，可以使用图片，也可以使用编辑器上的图片，这里同样要用到上边的名称；

3.5在ueditor.all.js 找到UE.commands的地方，写在一起方便查找，仿照它的格式写你自己的按钮的事件，这里同样要用到上边的名称；

　　如果你的页面是使用的全部功能，那到这里已经完成了。如果是自定义的（自己选择的），别忘了加上你新增的这个名称。

　　如果嫌all.js太大，可以找一些在线压缩的网站压缩一下。比如：https://tool.oschina.net/jscompress?type=3

到这里已经完成了，如果想看详细代码的可以留言或者看我的git：

https://github.com/MRlijiawei/demos/tree/master/files/ueditor-custom&aliupload下