1. 程式人生 > >Vue專案中使用ueditor富文字編輯器(二)

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中圖片路徑報錯看這個 :

ueditor後端配置相關內容看這個 :