准备工作
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名称