详解vue.js+UEditor集成 [前后端分离项目]

2020-06-14 06:05:34易采站长站整理

}

然后jsp目录下的config.json文件放到java/main/resources目录下,修改ConfigManager.java类,如下:

注释掉原有的读取配置文件的方式,添加新的读取路径,这样确保ueditor在初始化能够正确的加载配置文件。此时,修改前端项目中ueditor.config.js中的serverUrl的值为:


// 服务器统一请求接口路径
, serverUrl: http://localhost:8080/sys/ueditor/exec

而,针对ActionEnter.java类中,如下代码后的文件上传的处理,请大家针对自身的上传方式和文件服务器选择适合自己的方式:


switch ( actionCode ) {
//读取配置文件时的请求处理
case ActionMap.CONFIG:
return this.configManager.getAllConfig().toString();
//上传图片、视频、文件时的处理
case ActionMap.UPLOAD_IMAGE:
case ActionMap.UPLOAD_SCRAWL:
case ActionMap.UPLOAD_VIDEO:
case ActionMap.UPLOAD_FILE:
conf = this.configManager.getConfig( actionCode );
state = new Uploader( request, conf, baseFileService ).doExec();
break;
//抓取远程图片时的处理方式,此处也可以关闭

//当从网页上复制内容到编辑器中,如果图片与该域名不同源,则会自动抓到本地的服务器保存
case ActionMap.CATCH_IMAGE:
conf = configManager.getConfig( actionCode );
String[] list = this.request.getParameterValues( (String)conf.get( "fieldName" ) );
state = new ImageHunter( conf ).capture( list );
break;
//上传多文件时的文件在线管理
case ActionMap.LIST_IMAGE:
case ActionMap.LIST_FILE:
conf = configManager.getConfig( actionCode );
int start = this.getStartIndex();
state = new FileManager( conf ).listFile( start );
break;

}
return state.toJSONString();

最终的一步,写vue页面,插入ueditor组件,直接贴上源代码如下:


<template>
<div>
<el-row :gutter="20">
<el-col :span="24" class="toolbar">
<h1>完整demo</h1>
<div id="editor" type="text/plain" style="width:100%;height:400px;"></div>
</el-col>
</el-row>
</div>
</template>

<script>
import AppConfig from '@/config'
import '../../../../static/ueditor/ueditor.config.js'
import '../../../../static/ueditor/ueditor.all.js'
import '../../../../static/ueditor/lang/zh-cn/zh-cn.js'

export default {
name: "ueditor",
data() {
return {
id: Math.random().toString(16).substring(2) + 'ueditorId',