springboot+vue集成百度富文本编辑器ueditor+后端上传图片配置
先来一张效果图
开始
1、下载UEditor官网最新的jsp版本的包，下载完成解压之后得到一个utf8-jsp的文件夹，里面包含的内容如下：
下载地址：https://ueditor.baidu.com/website/download.html。这里下载的是jsp版本。
除了jsp文件夹和index.html文件外，把所有的文件都复制到前台目录下的static里文件夹里，如下图：
2.编辑 UEditor 编辑器 配置文件
我们打开 ueditor.config.js，修改其中的window.UEDITOR_HOME_UR配置，如下：
window.UEDITOR_HOME_URL = “/static/UE/”; //指定编辑器资源文件根目录
var URL = window.UEDITOR_HOME_URL || getUEBasePath();
ueditor.config.js文件有很多配置，可以在这里进行一些初始化的全局配置，比如编辑器的默认宽高等：
,initialFrameWidth:1000 //初始化编辑器宽度,默认1000
,initialFrameHeight:320 //初始化编辑器高度,默认320
其他的参数配置，在该文件中有详细列出，或者参考官方文档 http://fex.baidu.com/ueditor/
3.将编辑器集成到系统中
打开 /src/main.js 文件，插入下面的代码：
import ‘…/static/UE/ueditor.config.js’
import ‘…/static/UE/ueditor.all.min.js’
import ‘…/static/UE/lang/zh-cn/zh-cn.js’
import ‘…/static/UE/ueditor.parse.min.js’
4.开发公共组件 UE.vue
我们在 /src/components/ 目录下创建 UE.vue文件，作为我们的编辑器组件文件。
下面代码提供简单功能，具体使用根据需求完善该组件即可。
<template>
<div>
<script id="editor" type="text/plain"></script>
</div>
</template>
<script>
import '../../static/UE/ueditor.config.js'
import '../../static/UE/ueditor.all.js'
import '../../static/UE/lang/zh-cn/zh-cn.js'
export default {
name: 'ue',
data () {
return {
editor: null
}
},
props: {
defaultMsg: {
type: String
},
config: {
type: Object,
serverUrl:"/baseApi/file/uploadFile",
// ,
UEDITOR_HOME_URL: '/static/UE/'
},
id: {
type: String
},
},
mounted () {
const _this = this;
this.editor = window.UE.getEditor('editor', this.config); // 初始化UE
//初始化UE
// const _this = this;
// this.editor = UE.delEditor("editor");
// this.editor = UE.getEditor('editor',this.config);
// this.editor = window.UE.getEditor('editor', this.config);
// this.editor.addListener('ready', () => {
// this.editor.setContent(this.value)
// })
},
methods: {
getUEContent () {
return this.editor.getContent()
},
getContentTxt () {
return this.editor.getContentTxt()
},
setUEContent (value) {
// this.editor.addListener('ready', (value) => {
// this.editor.setContent(value)
// })
this.editor.setContent(value)
},
init(){
const _this = this;
this.editor = window.UE.getEditor('editor', this.config); // 初始化UE
}
},
destroyed () {
this.editor.destroy()
}
}
</script>
<style lang="scss" scoped>
.edit{
width: 1200px;
margin: auto;
}
</style>
5.在其他页面中使用该组件
简单地创建一个需要UEditor的页面，再该页面中使用刚才封装好的UE.vue组件：
<template>
<div>
<div class="components-container" style="position:relative;top:50px;">
<div class="editor-container">
<Uediter style="overflow:auto;height:650px;" :defaultMsg=defaultMsg :config=config ref="ue"></Uediter>
</div>
<div slot="footer" class="dialog-footer">
<el-button class="buttons" @click="isConcel">取 消</el-button>
<el-button class="buttons" type="primary" @click="isOk">确 定</el-button>
</div>
</div>
</div>
</template>
<script>
import Uediter from '@/components/UE.vue';
import qs from 'qs'
import axios from 'axios'
export default {
components:{
Uediter
},
data (){
return{
defaultMsg: '这里是UE',
config: {
initialFrameWidth: 1000,
initialFrameHeight: 500
}
}
},
mounted(){
},
methods: {
returnContent () {
var content=this.$refs.ue.getUEContent(); //获取ueditor编辑器的html内容
this.$refs.ue.setUEContent(“”) //设置ueditor编辑器的内容
this.$refs.ue.getContentTxt () //获取ueditor编辑器的文本内容
}
}
</script>
<style scoped>
.div1{
background-image:url('https://park.zmzncs.com/images/2019816/introduc.png');
background-repeat:no-repeat; height:600px;
position: relative;top: 100px;
overflow: auto
}
</style>
6.配置完上述内容后，控制台可能会出现"后台配置项返回格式出错，上传功能将不能正常使用！“的报错，
我们在编辑器中上传图片或者视频，也会出现响应的报错，这是因为没有配置服务器的请求接口，在ueditor.config.js中，对serverUrl进行配置：
// 服务器统一请求接口路径
, serverUrl:”/baseApi/ueditor/exec" //连接后台的接口（/baseApi/为后台跨域的代理接口）
7.前端配置到这里就可以，剩下的是后端配置
idea 的pom文件导入一下jar包
<dependency>
<groupId>commons-codec</groupId>
<artifactId>commons-codec</artifactId>
<version>1.10</version>
</dependency>
<dependency>
<groupId>commons-io</groupId>
<artifactId>commons-io</artifactId>
<version>2.6</version>
</dependency>
<dependency>
<groupId>org.json</groupId>
<artifactId>json</artifactId>
<version>20180130</version>
</dependency>
<dependency>
<groupId>commons-fileupload</groupId>
<artifactId>commons-fileupload</artifactId>
<version>1.3</version>
</dependency>
<dependency>
<groupId>commons-lang</groupId>
<artifactId>commons-lang</artifactId>
<version>2.6</version>
</dependency>
将jsp目录下的lib目中的ueditor.jar文件中的所有类全部拿出来（具体方式自己决定，反编译工具或者拿到源码都可以）,放到后端项目中，然后将config.json放到项目的resources中，如下图：
然后在control层新建一个UeditorController.java的类，如下：
其中 public String exec(HttpServletRequest request) throws UnsupportedEncodingException {｝get请求为editor初始化， public Map<String, String> execPost(HttpServletRequest request, HttpServletResponse response) throws IOException {｝post请求为上传图片接口，
前端ueditor.config.js中，对serverUrl进行配置：
// 服务器统一请求接口路径
, serverUrl:"/baseApi/ueditor/exec" //此接口就是下面写的controller内的接口。
ResponseObject responseObject=fileManagerController.uploadFile(request);这个为调用的上传图片具体逻辑的方法
@RestController
@CrossOrigin
@RequestMapping("/api/ueditor")
public class UeditorController {
@Autowired
private FileManagerController fileManagerController;
@RequestMapping(value = "/exec", method = RequestMethod.GET)
public String exec(HttpServletRequest request) throws UnsupportedEncodingException {
request.setCharacterEncoding("utf-8");
String rootPath = request.getRealPath("/");
return new ActionEnter( request, rootPath ).exec();
}
@RequestMapping(value = "/exec", method = RequestMethod.POST)
public Map<String, String> execPost(HttpServletRequest request, HttpServletResponse response) throws IOException {
request.setCharacterEncoding("utf-8");
// response.setHeader("Content-Type","test/html");
response.setContentType("text/html;charset=utf-8");
String rootPath = request.getRealPath("/");
new ActionEnter( request, rootPath ).exec();
ResponseObject responseObject=fileManagerController.uploadFile(request);
Map map=(Map) responseObject.getData();
String title=String.valueOf(map.get("fileName"));
String group=String.valueOf(map.get("cruSavePath"));
String url=String.valueOf(map.get("cruUrlPath"));
Map<String,String> map1=new HashMap();
map1.put("title",title);
map1.put("group",group);
map1.put("url",url);
// map1.put("type",".jpg");
map1.put("state","SUCCESS");
// map1.put("size","0");
map1.put("original",title);
Object o = JSONObject.toJSON(map1);
System.out.println(o);
// return o.toString();
return map1;
}
@RequestMapping(value="/config",method = RequestMethod.GET)
public void config(HttpServletRequest request, HttpServletResponse response) {
response.setContentType("application/json");
String rootPath = request.getSession().getServletContext().getRealPath("/");
try {
String exec = new ActionEnter(request, rootPath).exec();
PrintWriter writer = response.getWriter();
writer.write(exec);
writer.flush();
writer.close();
} catch(IOException e) {
e.printStackTrace();
}
}
}
最后 后台代码打包到服务器，还需创建UeditorConfig类并修改ConfigManager.java这个类的
initEnv（）方法来解决把项目打成jar包后读取不到config.json配置文件的问题
package com.zm.homeapi.common.ueditor.config;
public final class UeditorConfig {
public static String configContent = "/*前后端通信相关的配置,注释只允许使用多行方式*/"+
"{"+
"/*上传图片配置项*/"+
"\"imageActionName\":\"uploadimage\",/*执行上传图片的action名称*/"+
"\"imageFieldName\":\"upfile\",/*提交的图片表单名称*/"+
"\"imageMaxSize\":2048000,/*上传大小限制，单位B*/"+
"\"imageAllowFiles\":[\".png\",\".jpg\",\".jpeg\",\".gif\",\".bmp\"],/*上传图片格式显示*/"+
"\"imageCompressEnable\":true,/*是否压缩图片,默认是true*/"+
"\"imageCompressBorder\":1600,/*图片压缩最长边限制*/"+
"\"imageInsertAlign\":\"none\",/*插入的图片浮动方式*/"+
"\"imageUrlPrefix\":\"\",/*图片访问路径前缀*/"+
"\"localSavePathPrefix\":\"\",/*图片访问路径前缀*/"+
"\"imagePathFormat\":\"/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}\",/*上传保存路径,可以自定义保存路径和文件名格式*/"+
"/*{filename}会替换成原文件名,配置这项需要注意中文乱码问题*/"+
"/*{rand:6}会替换成随机数,后面的数字是随机数的位数*/"+
"/*{time}会替换成时间戳*/"+
"/*{yyyy}会替换成四位年份*/"+
"/*{yy}会替换成两位年份*/"+
"/*{mm}会替换成两位月份*/"+
"/*{dd}会替换成两位日期*/"+
"/*{hh}会替换成两位小时*/"+
"/*{ii}会替换成两位分钟*/"+
"/*{ss}会替换成两位秒*/"+
"/*非法字符\\:*?\"<>|*/"+
"/*具请体看线上文档:fex.baidu.com/ueditor/#use-format_upload_filename*/"+
""+
"/*涂鸦图片上传配置项*/"+
"\"scrawlActionName\":\"uploadscrawl\",/*执行上传涂鸦的action名称*/"+
"\"scrawlFieldName\":\"upfile\",/*提交的图片表单名称*/"+
"\"scrawlPathFormat\":\"/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}\",/*上传保存路径,可以自定义保存路径和文件名格式*/"+
"\"scrawlMaxSize\":2048000,/*上传大小限制，单位B*/"+
"\"scrawlUrlPrefix\":\"\",/*图片访问路径前缀*/"+
"\"scrawlInsertAlign\":\"none\","+
""+
"/*截图工具上传*/"+
"\"snapscreenActionName\":\"uploadimage\",/*执行上传截图的action名称*/"+
"\"snapscreenPathFormat\":\"/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}\",/*上传保存路径,可以自定义保存路径和文件名格式*/"+
"\"snapscreenUrlPrefix\":\"\",/*图片访问路径前缀*/"+
"\"snapscreenInsertAlign\":\"none\",/*插入的图片浮动方式*/"+
""+
"/*抓取远程图片配置*/"+
"\"catcherLocalDomain\":[\"127.0.0.1\",\"localhost\",\"img.baidu.com\"],"+
"\"catcherActionName\":\"catchimage\",/*执行抓取远程图片的action名称*/"+
"\"catcherFieldName\":\"source\",/*提交的图片列表表单名称*/"+
"\"catcherPathFormat\":\"/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}\",/*上传保存路径,可以自定义保存路径和文件名格式*/"+
"\"catcherUrlPrefix\":\"\",/*图片访问路径前缀*/"+
"\"catcherMaxSize\":2048000,/*上传大小限制，单位B*/"+
"\"catcherAllowFiles\":[\".png\",\".jpg\",\".jpeg\",\".gif\",\".bmp\"],/*抓取图片格式显示*/"+
""+
"/*上传视频配置*/"+
"\"videoActionName\":\"uploadvideo\",/*执行上传视频的action名称*/"+
"\"videoFieldName\":\"upfile\",/*提交的视频表单名称*/"+
"\"videoPathFormat\":\"/ueditor/jsp/upload/video/{yyyy}{mm}{dd}/{time}{rand:6}\",/*上传保存路径,可以自定义保存路径和文件名格式*/"+
"\"videoUrlPrefix\":\"\",/*视频访问路径前缀*/"+
"\"videoMaxSize\":102400000,/*上传大小限制，单位B，默认100MB*/"+
"\"videoAllowFiles\":["+
"\".flv\",\".swf\",\".mkv\",\".avi\",\".rm\",\".rmvb\",\".mpeg\",\".mpg\","+
"\".ogg\",\".ogv\",\".mov\",\".wmv\",\".mp4\",\".webm\",\".mp3\",\".wav\",\".mid\"],/*上传视频格式显示*/"+
""+
"/*上传文件配置*/"+
"\"fileActionName\":\"uploadfile\",/*controller里,执行上传视频的action名称*/"+
"\"fileFieldName\":\"upfile\",/*提交的文件表单名称*/"+
"\"filePathFormat\":\"/ueditor/jsp/upload/file/{yyyy}{mm}{dd}/{time}{rand:6}\",/*上传保存路径,可以自定义保存路径和文件名格式*/"+
"\"fileUrlPrefix\":\"\",/*文件访问路径前缀*/"+
"\"fileMaxSize\":51200000,/*上传大小限制，单位B，默认50MB*/"+
"\"fileAllowFiles\":["+
"\".png\",\".jpg\",\".jpeg\",\".gif\",\".bmp\","+
"\".flv\",\".swf\",\".mkv\",\".avi\",\".rm\",\".rmvb\",\".mpeg\",\".mpg\","+
"\".ogg\",\".ogv\",\".mov\",\".wmv\",\".mp4\",\".webm\",\".mp3\",\".wav\",\".mid\","+
"\".rar\",\".zip\",\".tar\",\".gz\",\".7z\",\".bz2\",\".cab\",\".iso\","+
"\".doc\",\".docx\",\".xls\",\".xlsx\",\".ppt\",\".pptx\",\".pdf\",\".txt\",\".md\",\".xml\""+
"],/*上传文件格式显示*/"+
""+
"/*列出指定目录下的图片*/"+
"\"imageManagerActionName\":\"listimage\",/*执行图片管理的action名称*/"+
"\"imageManagerListPath\":\"/ueditor/jsp/upload/image/\",/*指定要列出图片的目录*/"+
"\"imageManagerListSize\":20,/*每次列出文件数量*/"+
"\"imageManagerUrlPrefix\":\"\",/*图片访问路径前缀*/"+
"\"imageManagerInsertAlign\":\"none\",/*插入的图片浮动方式*/"+
"\"imageManagerAllowFiles\":[\".png\",\".jpg\",\".jpeg\",\".gif\",\".bmp\"],/*列出的文件类型*/"+
""+
"/*列出指定目录下的文件*/"+
"\"fileManagerActionName\":\"listfile\",/*执行文件管理的action名称*/"+
"\"fileManagerListPath\":\"/ueditor/jsp/upload/file/\",/*指定要列出文件的目录*/"+
"\"fileManagerUrlPrefix\":\"\",/*文件访问路径前缀*/"+
"\"fileManagerListSize\":20,/*每次列出文件数量*/"+
"\"fileManagerAllowFiles\":["+
"\".png\",\".jpg\",\".jpeg\",\".gif\",\".bmp\","+
"\".flv\",\".swf\",\".mkv\",\".avi\",\".rm\",\".rmvb\",\".mpeg\",\".mpg\","+
"\".ogg\",\".ogv\",\".mov\",\".wmv\",\".mp4\",\".webm\",\".mp3\",\".wav\",\".mid\","+
"\".rar\",\".zip\",\".tar\",\".gz\",\".7z\",\".bz2\",\".cab\",\".iso\","+
"\".doc\",\".docx\",\".xls\",\".xlsx\",\".ppt\",\".pptx\",\".pdf\",\".txt\",\".md\",\".xml\""+
"]/*列出的文件类型*/"+
""+
"}";
}
private void initEnv () throws FileNotFoundException, IOException {
File file = new File(this.originalPath);
if (!file.isAbsolute()) {
file = new File(file.getAbsolutePath());
}
this.parentPath = file.getParent();
String configContent=this.filter(UeditorConfig.configContent);
try{
JSONObject jsonConfig = new JSONObject( configContent );
this.jsonConfig = jsonConfig;
} catch ( Exception e ) {
this.jsonConfig = null;
}
}
最后效果图：
ok搞定
扫一扫
2399
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
