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/files/ueditor-custom&aliupload下

猜你喜欢

转载自www.cnblogs.com/ljwsyt/p/12197953.html
今日推荐