如图所示,今天接收一个项目其中富文本编辑器报错
此项目为vue2项目,富文本编辑器为直接下载好的资源存放在public目录下的
经过排查发现报错的函数在ueditor.all.min.js文件内,但是ueditor.all.min.js文件夹是经过压缩的
所以直接,将index.html中的引用路径修改为ueditor.all.js,发现报错,排查问题也没发现哪里引入,于是采用方法B将ueditor.all.min.js删除,再将改成ueditor.all.js名字改成ueditor.all.min.js,还是不行,抱着试一试的心态重启了一下项目,发现终于跑通了 正确引用文件变成了ueditor.all.js
文件列表如图
index.html如下
然后再在ueditor.all.js里面排查问题,发现图片上传路径没有错(前提是配置请求路径),然后经过一系列排查,发现是一个叫imageActionName的配置报错,全局搜索只有php下面的config.json有这个属性,但是这个PHP原来项目是没有这个文件夹的,于是又抱着试试的心态直接在ueditor.config.js加了一下这个属性,发现可行,并且这个属性不能为空
图片上传正确配置请求路径的方法如图:
ueditor.config.js配置
然后发现有正常发起请求了,但是请求没有携带token,于是只能去改源码
在 ueditor.all.js下面的autoupload方法里面去修改相关请求
一下为相关修改示例
然后发现请求可以正常发出并且有返回了正确图片路径,但是编辑器却没有正确显示图片
再排查发现 代码错误拼接了图片路径导致图片无法显示
所以直接修改源代码不拼接urlPrefix
然后编辑器就可以正常粘贴图片了
此处还有一个小问题就是
vue-ueditor-wrap自定义封装的上传图片dialog点击上传的时候打开的窗口竟是当前项目
原因:路由模式的变更导致渲染的时候路径发生错误,所以重定向到了跟路径然后就变成了当前项目
解决方法:
判断当前的路由模式,然后判断是否拼接“#”
以上问题均出自开源项目yshop商城前端运行时的错误,虽然控制台还是会报错,但是基本不影响使用,有时间的可以尝试去解决,或者直接删掉报错的地方