Vue中部署百度富文本编辑器UEditor及其自带的后端，并加入秀米插件

导语

本文使用vue-ueditor-wrap插件将UEditor编辑器嵌入Vue中，实践过程中颇多曲折，以下错误和解决方案都是个人摸索的经历，谨慎模仿。
vue-ueditor-wrap的github地址
Ueditor官方文档
秀米插件官方文档

部署UEditor前端部分

1. 在项目中安装vue-ueditor-wrap：npm i vue-ueditor-wrap -S
2. 下载一个版本的UEditor源码，本文以utf8-jsp为例说明
3. 解压下载的压缩包，并重命名为UEditor，放在项目的static目录下
4. 在main.js文件中全局引入VueUeditorWrap组件并注册：
   import VueUeditorWrap from 'vue-ueditor-wrap'
Vue.component('vue-ueditor-wrap', VueUeditorWrap)
5. 在需要的页面中放入插件并进行配置：

   <!--HTML部分，(将编辑器的文本双向绑定到this.msg上-->
   <vue-ueditor-wrap v-model="msg" :config="myConfig"></vue-ueditor-wrap>
   

    //JS部分
   data () {
      return {
   	    //测试文字
   	    msg: '<h2><img src="http://img.baidu.com/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',
   	    }
        }
   }
   

6. 在main.js中引入配置文件

   import '../static/UEditor/ueditor.config'
   import '../static/UEditor/ueditor.all'
   

7. UEditor的最大字数限制为10000，如果不够的话可以在UEditor/ueditor.all.js中修改，第28738行，将maximumWords:10000修改为maximumWords:65535
8. 至此基本功能已经实现，但是无法上传图片，需要上传图片，请看UEditor的后端配置方法

部署UEditor后端部分

• 因为我的后端太渣，这里使用百度默认的后端在本地进行部署，大佬可以自己写后端接口

1. 确保本地有JDK和tomcat
2. 打开tomcat，将之前下载的UEditor-jsp（UEditor）再复制一份到webapps目录下
3. 在UEditor-jsp目录下新建WEB-INF文件夹，在WEB-INF文件夹内再新建一个lib文件夹
4. 将UEditor-jsp/jsp/lib下的文件复制到新建的lib文件夹中
5. 后端的地址是http://localhost:8080/UEditor-jsp，由于UEditor默认调用的接口是jsp/controller.jsp，因此之后的请求地址应该是http://localhost:8080/UEditor-jsp/jsp/controller.jsp，这个地址就是前端配置时serverUrl的值，如部署在服务器上同理
6. 可以在浏览器的网址栏输入该后端地址，如http://localhost:8080/UEditor-jsp/jsp/controller.jsp?action=config验证配置是否成功，如果成功会返回json格式的配置信息
   
7. 这个时候本地运行前端测试图片上传，会发现报错上传失败，请重试,这是因为本地跨端口调用8080的接口，受跨域的限制，因此无法成功，需要将前端项目打包，同样部署在tomcat下，在同一个端口运行两个项目进行测试
8. 前端项目打包上传后，会发现富文本编辑器无法显示，打开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中的引用路径
9. 然后再次测试上传图片功能，发现上传成功，但是图片无法回显，打开F12查看NetWork中的请求，发现路径又出错了，需要为图片设置访问路径前缀
10. 打开UEditor-jsp/jsp/config.json文件，找到imageUrlPrefix属性，将其值（原来为“ ”）设置为http://域名:端口/UEditor-jsp，根据外层文件夹的名字命名，下面的视频、附件等的UrlPrefix均需修改，如果前面不加域名和端口，src属性访问时默认访问当前网站域名下的文件，就无法在别的域名下正常显示图片了
11. 至此图片上传功能实现，但是多图上传中本地管理中的图片依旧无法显示，原因是图片访问的路径中多了一串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 ); 
    

12. 最后一个问题，敲黑板！！！！部署在服务器上的后端需要用前端编译过的dist文件夹里的后端，并且部署上去之后要重启tomcat

为UEditor添加秀米插件

1. 在秀米插件的官方文档中下载四个文件xiumi-ue-dialog-v5.js、xiumi-ue-v5.css、xiumi-ue-dialog-v5.html、internal.js
   下载方式：有链接的右键另存为链接，没有链接的复制网址在浏览器中打开，复制网页的中的内容，创建同名文件即可
2. 将这四个文件放在前端项目中UEditor的dialogs目录下
3. 修改ueditor.config.js文件中的section:[]选项，改为section:[‘class’,‘style’]
4. 修改xiumi-ue-dialog-v5.js中的iframeUrl值，修改前为'xiumi-ue-dialog-v5.html'，修改后为editor.ui.UEDITOR_HOME_URL+'dialogs/xiumi-ue-dialog-v5.html'
5. 在main.js中引入两个文件

   import '../static/UEditor/dialogs/xiumi-ue-dialog-v5'
   import '../static/UEditor/dialogs/xiumi-ue-v5.css'
   

6. 完成后刷新前端页面，发现编辑器菜单栏最后多了一个秀米图标，打开后弹出一个秀米编辑网页，在网页内编辑文本，完成后点击中央上方的对勾图标，即可将图文保存到编辑器中
7. 此时如果在编辑器中引入秀米提供的图片，在后期展示时会出现无法展示的情况，因为该图片存储在秀米的服务器上，通过网址访问，秀米拒绝第三方的访问，因此无法显示。解决方法是开启编辑器的远程图片抓取到本地保存功能
   设置方法：打开UEditor/ueditor.config.js文件，找到//,catchRemoteImageEnable: true //设置是否抓取远程图片这一行，取消这一行的注释即可
8. 注意：这个时候图片会被自动保存到后端地址，但是编辑器生成的HTML代码中，img标签的src属性/UEditor-jsp/ueditor...，并不包括域名，如果在其他域名下渲染该HTML，图片就无法显示。
   最简单的解决方法：在将该HTML上传给后端之前进行字符串替换处理，将所有src="/UEditor替换为src="http://域名:端口/UEditor

结束啦！！！