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

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

    • 导语
    • 部署UEditor前端部分
    • 部署UEditor后端部分
    • 为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. 在需要的页面中放入插件并进行配置:
    
    <vue-ueditor-wrap v-model="msg" :config="myConfig">vue-ueditor-wrap>
    
     //JS部分
    data () {
       return {
    	    //测试文字
    	    msg: '

    Vue + UEditor + v-model双向绑定

    '
    , //配置信息 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.jsueditor.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.jsxiumi-ue-v5.cssxiumi-ue-dialog-v5.htmlinternal.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

结束啦!!!

你可能感兴趣的:(Vue憨批笔记)