vue+springboot前后端分离集成ueditor，避坑之
1.前端vue搭建
首先不管vue-cli 2.0还是vue-cli 3.0你得会新建一个vue脚手架项目，让它能够正常运行起来
2.集成vue组件
npm i vue-ueditor-wrap -D 先安装一下 vue-ueditor-wrap 插件，我没试过不安装会是什么效果，估计会导致没法调用组件吧，可以理解为安装驱动包。
不管你从网上或者官方源码，你得获取一个ueditor的开发源码包，像下图这样的结构，vue-cli 2.0可以将ueditor文件夹放到static文件夹下，vue-cli 3.0可以将ueditor文件夹放到public文件夹下
image.png
App.vue代码
<div id="app">
<vue-ueditor-wrap v-model="msg" :config="myConfig" ref="myueditor" @ready="ready"></vue-ueditor-wrap>
<div @click="getContent">获取编辑器内容</div>
</div>
</template>
<script>
import VueUeditorWrap from 'vue-ueditor-wrap'
export default {
name: 'App',
components: {
VueUeditorWrap
},
data(){
return{
msg: '437476',
myConfig: {
// 编辑器不自动被内容撑高
autoHeightEnabled: false,
// 初始容器高度
initialFrameHeight: 240,
// 初始容器宽度
initialFrameWidth: '100%',
// 上传文件接口（文件上传功能搭建的后端接口）
serverUrl: 'http://localhost:8084/live/editor/config',
// UEDITOR_HOME_URL: process.env.BASE_URL + 'UEditor/'
//项目内部相对路径 可以找到我们引入的ueditor文件夹下的资源
UEDITOR_HOME_URL:'/UEditor/'
},
editorInstance: null
}
},
methods:{
ready(editorInstance) {
console.log(`编辑器实例${editorInstance.key}: `, editorInstance)
this.editorInstance = editorInstance
},
getContent() {
console.log(this.msg)
console.log(this.$refs.myueditor)
}
}
}
</script>
这是我们就可以访问运行起来的vue项目，但是前提是你把serverUrl：这个接口能返回config.json数据
image.png
注意： 由于集成ueditor需要加载一个config.json的配置文件，里面定义了一些功能配置项，必须先获取里面的json，我们才能正常使用富文本的功能，不然上传单张图片图标会被置灰，还有上传多张图片功能也不能使用，显示“没有配置后台数据、、、、”，所有前端所有请求只会通过 serverUrl: 'http://localhost:8084/live/editor/config'这个接口发起，根据参数来区分各个功能。
3.后端
@RestController
@CrossOrigin
@RequestMapping("/live/editor")
public class LiveEditorController {
@RequestMapping(value="/config")
@ResponseBody
public String ueditorGet(@RequestParam Map<String, Object> params) {
String callback = (String) params.get("callback");
System.out.println(callback);
return callback + "(" + UEditorConfig.UEDITOR_CONFIG + ")";
// return UEditorConfig.UEDITOR_CONFIG;
}
@PostMapping("/config")
@ResponseBody
public Map<String, Object> ueditorPost(@RequestParam Map<String, Object> params, @RequestParam("upfile") MultipartFile file) {
String name = (String) params.get("name");
String type = (String) params.get("type");
String size = (String) params.get("size");
String fileName = "";
if (!file.isEmpty()) {
//返回的是字节长度,1M=1024k=1048576字节 也就是if(fileSize<5*1048576)
if (file.getSize() > (1048576 * 5)) {
log.error("文件大小不能超过5M");
}
//判断文件是否有后缀
String suffix = Objects.requireNonNull(file.getOriginalFilename()).substring(file.getOriginalFilename().lastIndexOf("."));
if (StringUtils.isBlank(suffix)) {
log.error("上传文件没有后缀，无法识别");
}
} else {
log.error("上传失败");
}
return serviceInterface.imgUpload(file);
}
}
@Override
public Map<String, Object> imgUpload(MultipartFile upFile) {
Map<String, Object> rs = new HashMap<String, Object>();
String originalFileName = "";
try {
if (!upFile.isEmpty()) {
originalFileName = upFile.getOriginalFilename();
String fileUrl =imgOssService.uploadFile(upFile.getBytes(),originalFileName);
System.out.println(fileUrl);
rs.put("state", "SUCCESS");// UEDITOR的规则:不为SUCCESS则显示state的内容
rs.put("url", fileUrl); // 能访问到你现在图片的路径
rs.put("title", originalFileName);
rs.put("original", originalFileName);
}
} catch (Exception e) {
e.printStackTrace();
rs.put("state", e.getMessage());
rs.put("url", "");
rs.put("title", "");
rs.put("original", "");
}
return rs;
}
3.避坑
3.1 单张图片可以上传到服务器但是会提示“上传出错”
解决办法：修改ueditor.all.min.js源码检索到指定位置注释源码后加入以下代码， 由于项目会自动引用ueditor.all.min.js， 所以我将ueditor.all.js修改后直接粘贴覆盖到ueditor.all.min.js 中，问题解决。（参考：https://blog.csdn.net/csdn_shenguang/article/details/89026174?utm_medium=distribute.pc_relevant_download.none-task-blog-baidujs-1.nonecase&depth_1-utm_source=distribute.pc_relevant_download.none-task-blog-baidujs-1.nonecase）
// domUtils.on(iframe, 'load', callback);
// form.action = utils.formatUrl(imageActionUrl + (imageActionUrl.indexOf('?') == -1 ? '?':'&') + params);
// form.submit();
var formdata = new FormData(form);
var arr,reg=new RegExp("(^| )_token=([^;]*)(;|$)");
var myForm = document.getElementById("myForm");
var xhr= new XMLHttpRequest();
xhr.open("POST", me.getOpt('serverUrl')+'?action=uploadimage', true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4)
if ((xhr.status >=200 && xhr.status < 300) || xhr.status == 304)
alert(xhr.responseText);
}
xhr.send(formdata);
xhr.onreadystatechange = function () {
if(xhr.readyState == 4) {
var response = JSON.parse(xhr.responseText);
if(response.state=='SUCCESS' ){
loader = me.document.getElementById(loadingId);
loader.setAttribute('src', response.url);
loader.setAttribute('_src', response.url);
loader.setAttribute('title', response.title || '');
loader.setAttribute('alt', response.original || '');
loader.removeAttribute('id');
domUtils.removeClasses(loader, 'loadingclass');
}
}
}
3.2 单张或者多张上传后不能回显到ueditor编辑器内
原因分析：可能是由于前后端分离跨域导致的，也就是访问图片资源时它前面自动加了前端项目的域名，我本地项目那么它就加localhost:8080/,如果部署到服务器那就加服务器域名，导致无法访问到图片资源
image.png
问题解决：这个问题搞了好久，但是解决起来很简单，是由于浏览器在访问服务器资源时如果请求连接不是以http, https, ftp...等开头的，都会被识别为相对路径，跳转时会被加上http://域名/(项目名/)，所以我们在返回图片路径是给他拼接一个http://的开头即可。
image.png
插入视频修改
image.png
上传附件中文乱码
var iframedoc = (iframe.contentDocument || iframe.contentWindow.document);
iframedoc.charset="gbk";
image.png
