ueditor上传文件七牛云

准备工作

ueditor插件:百度云下载资源: https://pan.baidu.com/s/1EL_hoJGTyZEf49WX0KQfvA

Ueditor下载官网https://ueditor.baidu.com/website/download.html

第一导入Maven项目中

第二创建访问编辑器的controller

package cn.itsource.controller;
import java.util.HashMap;
import java.util.Map;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import com.qiniu.util.Auth;
@Controller
public class IndexController {
//访问文本编辑页面
@RequestMapping("/ueditor")
public String ueditorPage() {
return "ueditor";
}
}

第三 ueditor前台

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>ueditor demo</title>
</head>
<body>
<!-- 加载编辑器的容器 -->
<script style="height: 500px; width: 600px" id="container"
                        name="content" type="text/plain">
        这里写你的初始化内容
    </script>
<!-- 配置文件 -->
<script type="text/javascript" src="/static/ueditor/ueditor.config.js"></script>
<!-- 编辑器源码文件 -->
<script type="text/javascript" src="/static/ueditor/ueditor.all.js"></script>
<!-- 实例化编辑器 -->
<script type="text/javascript">
UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
UE.Editor.prototype.getActionUrl = function(action) {
    if (action == 'uploadimage' || action == 'uploadscrawl' || action == 'uploadimage') {
        return '/upload/uploadimages';
    } else if (action == 'uploadvideo') {
        return '';
    } else {
        return this._bkGetActionUrl.call(this, action);
    }
}
var ue = UE.getEditor('container');
<!--自定义编辑框功能图标-->
/* var ue = UE.getEditor('container', {
    toolbars: [
        ['fullscreen', 'source', 'undo', 'redo', 'bold']
    ],
    autoHeightEnabled: true,
    autoFloatEnabled: true
}); */
</script>
</body>
</html>

第四配置application.yml/等于application.xml,注意结构层次

#设置端口
server:
  port:8080
#设置上传文件大小
spring:
  http:
    multipart:
      maxFileSize: 100Mb
      maxRequestSize: 1000Mb
  #设置视图解析器
  mvc:
    view:
      prefix: /WEB-INF/jsp/
      suffix: .jsp
#日志打印
logging:
  level:
    cn:
      itsource: DEBUG
#七牛云配置 上传凭证AccessKey，SecretKey和Bucket
qiniu:     
     accessKey: P63Fl_oUacfVwpMGuiR826rc7byWqwqyy_OBIVm3
     secretKey: yL_Uk2M3b68aM96ZC2dW-F8eir0R2Vuq5vE9wItz
     domain: http://pi5zfw3xm.bkt.clouddn.com/
     bucket: testdemo

第五后台处理

// 获取上传凭证
@RequestMapping("/uploadimages")
@ResponseBody
public Object uploadImage(MultipartFile upfile) {
    // ...生成上传凭证，然后准备上传
    Map<String,Object> map=new HashMap<>();
    //上传七牛云
    // 构造一个带指定Zone对象的配置类
    Configuration cfg = new Configuration(Zone.zone2());
    // ...其他参数参考类注释
    UploadManager uploadManager = new UploadManager(cfg);
    String fileName=upfile.getOriginalFilename();//xxx.jpg
    String uuid=UUID.randomUUID().toString();//abcd
    String newFileName=uuid+fileName.substring(fileName.lastIndexOf("."));//新的文件名
    Auth auth = Auth.create(accessKey, secretKey);
    String upToken = auth.uploadToken(bucket);
try{
    Response response = uploadManager.put(upfile.getBytes(), newFileName, upToken);
    // 解析上传成功的结果
    /* DefaultPutRet putRet = new Gson().fromJson(response.bodyString(),         
      DefaultPutRet.class);
        System.out.println(putRet.key);
        System.out.println(putRet.hash);*/
        map.put("state","SUCCESS");
        map.put("url",domain+newFileName);
        map.put("title",newFileName);
        map.put("original",newFileName);
    }catch(Exception ex){
        System.out.println("上传失败"+ex.getMessage());
        map.put("state","ERROR");
        map.put("url","");
        map.put("title","");
        map.put("original","");
    }
        return map;
}

第六注意:其实百度的ueditor官网是提供了上传文件到七牛云的官方文档的,文档最后面有介绍,网上修改ueditor源码不建议采用;

如何自定义请求地址

本文档说明修改请求地址的方法。

应用场景

ueditor 1.4.2+ 推荐使用唯一的请求地址，通过GET参数action指定不同请求类型。但很多用户都希望使用自己写好的上传地址，下面提供一种解决方法：由于所有ueditor请求都通过editor对象的getActionUrl方法获取请求地址，可以直接通过复写这个方法实现，例子如下：s._bkGetActionUrl.call(this, action);

UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
UE.Editor.prototype.getActionUrl = function(action) {
    if (action == 'uploadimage' || action == 'uploadscrawl' || action == 'uploadimage') {
        return 'http://a.b.com/upload.php';
    } else if (action == 'uploadvideo') {
        return 'http://a.b.com/video.php';
    } else {
        return this._bkGetActionUrl.call(this, action);
    }}

action类型以及说明

uploadimage：//执行上传图片或截图的action名称
uploadscrawl：//执行上传涂鸦的action名称
uploadvideo：//执行上传视频的action名称
uploadfile：//controller里,执行上传视频的action名称
catchimage：//执行抓取远程图片的action名称
listimage：//执行列出图片的action名称
listfile：//执行列出文件的action名称

ueditor上传文件七牛云

准备工作

第一 导入Maven项目中

第二 创建访问编辑器的controller

第三 ueditor前台

第四 配置application.yml/等于application.xml,注意结构层次

第五 后台处理

第六 注意:其实百度的ueditor官网是提供了上传文件到七牛云的官方文档的,文档最后面有介绍,网上修改ueditor源码不建议采用;