Vue项目中使用ueditor富文本编辑器(二)

vue项目打包后引入的ueditor富文本编辑器,资源加载不正确

如下图:一个个解决:
这里写图片描述
1:ueditor.css

①如果用的是ueditor.all.js,在29336行修改如下:
这里写图片描述

②如果用的是ueditor.all.main.js,打开文件搜索ueditor.css ,定位到后在前面添加 ‘.’
这里写图片描述

下面只说ueditor.all.js中的修改方法,另外一个文件的修改方法和上面一样。

**括号里的是要修改的文件。**

2:iframe.css

直接修改8044行(ueditor.all. js)
这里写图片描述

3:codemirror.js 和 codemirror.css

修改下图所示位置,不要改错了,看清楚位置:ueditor.all. js
这里写图片描述

4:ZeroClipboard.js 14497行ueditor.all.js

这里写图片描述

5:修改上传图片、视频、文件对话框,也可以全都加上. ueditor.all.js

这里写图片描述

6:修改对话框样式css文件路径

UE/ dialogs / internal.js 中搜索dialogbase.css。修改如下:
这里写图片描述

7:fileTypeImages

修改文件上传后展示对应格式图片的路径ueditor.all.js
这里写图片描述

8:/images/spacer.gif 和 /images/videologo.gif

视频上传时用到的gif文件路径修改ueditor.all.js
这里写图片描述

9:最终效果:
上传图片

这里写图片描述

上传视频

这里写图片描述

上传文档

这里写图片描述
这里写图片描述

服务器中存储的文件结构:
这里写图片描述
以下是存到数据库中的正文内容。
这里写图片描述

vue项目打包后css中图片路径报错看这个 :

vue打包后css中引用的图片路径不正确

ueditor后端配置相关内容看这个 :

ueditor后端配置说明

猜你喜欢

转载自blog.csdn.net/fanhu6816/article/details/81224635
今日推荐