UEditor富文本编辑器上传图片到阿里云
UEditor是一款百度旗下的富文本编辑器，样式和功能都很好看很多，所以在一个项目中使用了这个编辑器。使用起来很方便，直接引入即可，只有表情和文件图片上传的地方需要配置一下。表情的去年的一篇文章里有，这里主要说一下图片上传。以前一直是上传到电信的服务器，今年公司买了某里的服务器后，要切过去，后台目前只提供了一个公共的接口查域名、key、签名等，前端是参照某里官网介绍的上传方法来实现上传的。但是UEditor里的图片上传是写在自己里边的，要改的话一是怕改出问题，二是怕万一以后又要改，所以采用增加一个自定义上传的功能。
1.UEditor文件图片上传
关于这个网上有很多文章，一致的方法是后台定义一个接口来辅助上传。这里不再赘述，可以直接搜一下，很多文章介绍，或者官网也有指导。这里提一下UEditor的源码，因为下边的内容是要修改源码的。
源码很长，几万行，我也只看了几眼主要的地方。比如在config.js里的配置，在all.js里的指令UE.commands，执行指令execCommand。
2.某里上传文件
这里使用的是某里的OSS文件系统，官网有demo，是基于plupload的。plupload也看了几眼代码，然后写了两个方案，一个是直接使用某里的demo做修改（需要依赖plupload），一个是仿照plupload组织一下上传的请求的格式（某里的接口的参数是按照这个定义的），这样就不需要进行那么多依赖。参数是form格式，大致代码如下
1 let params = { 2 // key--路径+名称 3 'key' : this.storageId, 4 'policy': this.policy, 5 'OSSAccessKeyId': this.OSSAccessKeyId, 6 'success_action_status' : this.success_action_status //让服务端返回200,不然，默认会返回204 7 ,'signature': this.signature, 8 file 9 } 10 for(let key in params) { 11 fd.append(key, params[key]) 12 }
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下
