Vue中部署百度富文本编辑器UEditor及其自带的后端，并加入秀米插件
导语部署UEditor前端部分部署UEditor后端部分为UEditor添加秀米插件导语
本文使用vue-ueditor-wrap插件将UEditor编辑器嵌入Vue中，实践过程中颇多曲折，以下错误和解决方案都是个人摸索的经历，谨慎模仿。
vue-ueditor-wrap的github地址
Ueditor官方文档
秀米插件官方文档
部署UEditor前端部分
在项目中安装vue-ueditor-wrap：npm i vue-ueditor-wrap -S下载一个版本的UEditor源码，本文以utf8-jsp为例说明解压下载的压缩包，并重命名为UEditor，放在项目的static目录下在main.js文件中全局引入VueUeditorWrap组件并注册：import VueUeditorWrap from 'vue-ueditor-wrap'
ponent('vue-ueditor-wrap', VueUeditorWrap)在需要的页面中放入插件并进行配置：
<!--HTML部分，(将编辑器的文本双向绑定到this.msg上--><vue-ueditor-wrap v-model="msg" :config="myConfig"></vue-ueditor-wrap>
//JS部分data () {return {//测试文字msg: '<h2><img src="/hi/jx2/j_0003.gif"/>Vue + UEditor + v-model双向绑定</h2>',//配置信息myConfig: {// 编辑器自动被内容撑高autoHeightEnabled: ture,// 初始容器高度initialFrameHeight: 240,// 初始容器宽度initialFrameWidth: '100%',// 上传文件接口，实现上传图片功能必须的配置，这个地址会在后端配置的时候产生，此处先放上结果serverUrl: 'http://localhost:8080/UEditor-jsp/jsp/controller.jsp',}}}
在main.js中引入配置文件
import '../static/UEditor/ueditor.config'import '../static/UEditor/ueditor.all'
UEditor的最大字数限制为10000，如果不够的话可以在UEditor/ueditor.all.js中修改，第28738行，将maximumWords:10000修改为maximumWords:65535至此基本功能已经实现，但是无法上传图片，需要上传图片，请看UEditor的后端配置方法
部署UEditor后端部分
因为我的后端太渣，这里使用百度默认的后端在本地进行部署，大佬可以自己写后端接口 确保本地有JDK和tomcat打开tomcat，将之前下载的UEditor-jsp（UEditor）再复制一份到webapps目录下在UEditor-jsp目录下新建WEB-INF文件夹，在WEB-INF文件夹内再新建一个lib文件夹将UEditor-jsp/jsp/lib下的文件复制到新建的lib文件夹中后端的地址是http://localhost:8080/UEditor-jsp，由于UEditor默认调用的接口是jsp/controller.jsp，因此之后的请求地址应该是http://localhost:8080/UEditor-jsp/jsp/controller.jsp，这个地址就是前端配置时serverUrl的值，如部署在服务器上同理可以在浏览器的网址栏输入该后端地址，如http://localhost:8080/UEditor-jsp/jsp/controller.jsp?action=config验证配置是否成功，如果成功会返回json格式的配置信息这个时候本地运行前端测试图片上传，会发现报错上传失败，请重试,这是因为本地跨端口调用8080的接口，受跨域的限制，因此无法成功，需要将前端项目打包，同样部署在tomcat下，在同一个端口运行两个项目进行测试前端项目打包上传后，会发现富文本编辑器无法显示，打开F12查看报错信息，发现两个文件zh-cn.js和ueditor.css访问路径出错，原因是Vue-ueditor-wrap在配置window.UEDITOR_HOME_URL时配置的是绝对路径，而不是相对路径，该错误无法在ueditor.config.js中直接修改window.UEDITOR_HOME_URL来校正，疑似会被覆盖，需要修改前端项目中的node_modules/vue-ueditor-wrap/lib/vue-ueditor-wrap.min.js源码
将该文件reform code后的第211行的修改为UEDITOR_HOME_URL: "http://localhost:8080/dist/static/UEditor/",，其中http://8080/dist应该替换为服务器下项目的真实路径
修改完源码后应该讲该插件的源码转移到static目录下，并修改在main中的引用路径然后再次测试上传图片功能，发现上传成功，但是图片无法回显，打开F12查看NetWork中的请求，发现路径又出错了，需要为图片设置访问路径前缀打开UEditor-jsp/jsp/config.json文件，找到imageUrlPrefix属性，将其值（原来为“ ”）设置为http://域名:端口/UEditor-jsp，根据外层文件夹的名字命名，下面的视频、附件等的UrlPrefix均需修改，如果前面不加域名和端口，src属性访问时默认访问当前网站域名下的文件，就无法在别的域名下正常显示图片了至此图片上传功能实现，但是多图上传中本地管理中的图片依旧无法显示，原因是图片访问的路径中多了一串webapps的绝对路径，解决方法是修改后端的controller.jspm，该文件路径为tomcat/webapps/UEditor-jsp/jsp/controller.jsp，将该文件中的out.write( new ActionEnter( request, rootPath ).exec() );这行删除，替换为以下代码:
String action = request.getParameter("action"); String result = new ActionEnter( request, rootPath ).exec(); //获得默认路径if( action!=null && (action.equals("listfile") || action.equals("listimage") ) ){rootPath = rootPath.replace("\\", "/"); result = result.replaceAll(rootPath, "/"); //将默认路径中的绝对路径替换为'/'} out.write( result );
最后一个问题，敲黑板！！！！部署在服务器上的后端需要用前端编译过的dist文件夹里的后端，并且部署上去之后要重启tomcat
为UEditor添加秀米插件
在秀米插件的官方文档中下载四个文件xiumi-ue-dialog-v5.js、xiumi-ue-v5.css、xiumi-ue-dialog-v5.html、internal.js下载方式：有链接的右键另存为链接，没有链接的复制网址在浏览器中打开，复制网页的中的内容，创建同名文件即可将这四个文件放在前端项目中UEditor的dialogs目录下修改ueditor.config.js文件中的section:[]选项，改为section:[‘class’,‘style’]修改xiumi-ue-dialog-v5.js中的iframeUrl值，修改前为'xiumi-ue-dialog-v5.html'，修改后为editor.ui.UEDITOR_HOME_URL+'dialogs/xiumi-ue-dialog-v5.html'在main.js中引入两个文件
import '../static/UEditor/dialogs/xiumi-ue-dialog-v5'import '../static/UEditor/dialogs/xiumi-ue-v5.css'
完成后刷新前端页面，发现编辑器菜单栏最后多了一个秀米图标，打开后弹出一个秀米编辑网页，在网页内编辑文本，完成后点击中央上方的对勾图标，即可将图文保存到编辑器中此时如果在编辑器中引入秀米提供的图片，在后期展示时会出现无法展示的情况，因为该图片存储在秀米的服务器上，通过网址访问，秀米拒绝第三方的访问，因此无法显示。解决方法是开启编辑器的远程图片抓取到本地保存功能
设置方法：打开UEditor/ueditor.config.js文件，找到//,catchRemoteImageEnable: true //设置是否抓取远程图片这一行，取消这一行的注释即可注意：这个时候图片会被自动保存到后端地址，但是编辑器生成的HTML代码中，img标签的src属性/UEditor-jsp/ueditor...，并不包括域名，如果在其他域名下渲染该HTML，图片就无法显示。
最简单的解决方法：在将该HTML上传给后端之前进行字符串替换处理，将所有src="/UEditor替换为src="http://域名:端口/UEditor
结束啦！！！
