vue-ueditor-wrap Ant-Design-Vue Egg.js Node.js 配置 避坑記錄

項目場景：

1，編輯器使用，自定義編輯公告，推送文案等場景…

2，涉及圖檔上傳，圖檔線上管理等操作需求…

3，前背景統一伺服器 部署方案

4，Egg.JS 背景配置方案（NodeJS）Eggjs适配位址

問題描述：

在程式配置中會遇到如下問題

1，前端BUG

（ueditor原型擷取報錯，ueditor背景路徑配置錯誤擷取報錯）

2，後端BUG

（接口路由傳回的配置資訊無法擷取[跨域，編寫路由方案有誤，檔案目錄建立失敗，檔案通路位址未重寫，通路目錄定向失敗]）

部落客項目是挂在在本機服務的，故本次描述僅以前背景統一伺服器部署為例；

原因分析：

1，前端配置serverUrl無效，導緻擷取編輯器原型失敗；

2，背景傳回的Config編輯器配置資訊參數擷取失敗，導緻圖檔上傳功能失效；

3，回顯拼接檔案路徑失敗，導緻圖檔等檔案無法顯示；

4，請求跨域，結果和 2 相同 (可自行研究方案，本文章不做具體講解)；

解決方案：

為了描述更加清晰，可以将此網址打開與自己程式服務配置的傳回參數做比較；

網絡請求對照組位址

https://hc199421.gitee.io/vue-ueditor-wrap/#/uparse

Ueditor前端配置位址

https://github.com/HaoChuan9421/vue-ueditor-wrap/tree/2.x

UeditorEgg後端配置

https://github.com/inmyjs/egg-ueditor

注意下文JS代碼描述的此參數 FIX 路徑，程式檔案的通路位址，程式服務需要改成自己服務所對應的檔案靜态目錄位址，正常情況此處放置項目 程式IP位址或項目位址 既可；

官方位址的檔案目錄指向 //ueditor.szcloudplus.com/cos

例如：//niuwa.niuwa.cn

//前端——>後端——>索要編輯器配置參數 如下圖1，圖2
https://ueditor.szcloudplus.com/cos？action=config&callback=bd__editor__3k7zyg
//前端上傳圖檔接口 如下圖3
https://ueditor.szcloudplus.com/cos?action=uploadimage
//請求檔案的服務位址 參數名稱以'FIX'
//它的業務目的是，後續的編輯内容拼接展示，伺服器傳回的檔案路徑，如下圖3
↓↓↓例如↓↓↓
//192.168.0.1:10201
catcherUrlPrefix
fileManagerUrlPrefix
fileUrlPrefix
imageManagerUrlPrefix
imageUrlPrefix
scrawlUrlPrefix
snapscreenUrlPrefix
videoUrlPrefix
//請求檔案目錄位置 參數名稱以'Format'
↓↓↓例如↓↓↓
storage/image/{yyyy}{mm}{dd}/{time}
           

圖1

圖2

圖3.1

圖3.2

内容總結：

1，背景服務路由處，配置以 fix 結尾的檔案通路位址，官方示例文檔是不提供此處的資料； 1.1，配置正确目錄位址，重寫檔案通路位址 2，前端

引入

npm install vue-ueditor-wrap
           

注冊元件

import VueUeditorWrap from 'vue-ueditor-wrap'; // ES6 Module
// main.js 裡将它注冊為全局元件
Vue.component('vue-ueditor-wrap', VueUeditorWrap);
           

xml

js

content:"",//編輯器内容
editorConfig:{
  UEDITOR_HOME_URL: "UEditor/",//本地程式的Ueditor包的相對位置
  serverUrl:'ueditor?_csrf=safe',//背景給予的上傳位址->由于本文以前後端不分離做處理，是以此處直接填寫路由既可。
}
           

業務回顯

尋找一個可以解析它的仔仔，載入資料既可回顯

效果展示：

内容效果

線上管理目錄圖庫

批量上傳