zoukankan      html  css  js  c++  java
  • 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下

  • 相关阅读:
    VS2010/MFC编程入门之三十八(状态栏的使用详解)
    VS2010/MFC编程入门之三十七(工具栏:工具栏的创建、停靠与使用)
    VS2010/MFC编程入门之三十六(工具栏:工具栏资源及CToolBar类)
    VS2010/MFC编程入门之三十五(菜单:菜单及CMenu类的使用)
    VS2010/MFC编程入门之三十四(菜单:VS2010菜单资源详解)
    VS2010/MFC编程入门之三十三(常用控件:标签控件Tab Control 下)
    走进JDK(十二)------TreeMap
    深入理解java虚拟机(二)-----垃圾回收
    深入理解java虚拟机(一)-----java内存区域以及内存溢出异常
    走进JDK(十一)------LinkedHashMap
  • 原文地址:https://www.cnblogs.com/ljwsyt/p/12197953.html
Copyright © 2011-2022 走看看