1.前端vue搭建

首先不管vue-cli 2.0還是vue-cli 3.0你得會新建一個vue腳手架專案，讓它能夠正常執行起來

2.整合vue元件

npm i vue-ueditor-wrap -D 先安裝一下 vue-ueditor-wrap 外掛，我沒試過不安裝會是什麼效果，估計會導致沒法呼叫元件吧，可以理解為安裝驅動包。

不管你從網上或者官方原始碼，你得獲取一個ueditor的開發原始碼包，像下圖這樣的結構，vue-cli 2.0可以將ueditor資料夾放到static資料夾下，vue-cli 3.0可以將ueditor資料夾放到public資料夾下

App.vue程式碼

  <div id="app">
    <vue-ueditor-wrap v-model="msg" :config="myConfig" ref="myueditor"  @ready="ready"></vue-ueditor-wrap>
    <div @click="getContent">獲取編輯器內容</div>
  </div>
</template>

<script>
import VueUeditorWrap from 'vue-ueditor-wrap'

export default {
  name: 'App',
  components: {
    VueUeditorWrap
  },
  data(){
    return{
      msg: '437476',
      myConfig: {
        // 編輯器不自動被內容撐高
        autoHeightEnabled: false,
        // 初始容器高度
        initialFrameHeight: 240,
        // 初始容器寬度
        initialFrameWidth: '100%',
        // 上傳檔案介面（檔案上傳功能搭建的後端介面）
        serverUrl: 'http://localhost:8084/live/editor/config',
        // UEDITOR_HOME_URL: process.env.BASE_URL + 'UEditor/' 
        //專案內部相對路徑 可以找到我們引入的ueditor資料夾下的資源 
        UEDITOR_HOME_URL:'/UEditor/'
      },
      editorInstance: null
    }
  },
  methods:{
    ready(editorInstance) {
      console.log(`編輯器例項${editorInstance.key}: `, editorInstance)
      this.editorInstance = editorInstance
    },
    getContent() {
      console.log(this.msg)
      console.log(this.$refs.myueditor)
    }
  }
}
</script>
 

這是我們就可以訪問執行起來的vue專案，但是前提是你把serverUrl：這個介面能返回config.json資料

注意： 由於整合ueditor需要載入一個config.json的配置檔案，裡面定義了一些功能配置項，必須先獲取裡面的json，我們才能正常使用富文字的功能，不然上傳單張圖片圖示會被置灰，還有上傳多張圖片功能也不能使用，顯示“沒有配置後臺資料、、、、”，所有前端所有請求只會通過 serverUrl: 'http://localhost:8084/live/editor/config'這個介面發起，根據引數來區分各個功能。

3.後端

@RestController
@CrossOrigin
@RequestMapping("/live/editor")
public class LiveEditorController {


    @RequestMapping(value="/config")
    @ResponseBody
    public String ueditorGet(@RequestParam Map<String, Object> params) {
        String callback = (String) params.get("callback");
        System.out.println(callback);
        return callback + "(" + UEditorConfig.UEDITOR_CONFIG + ")";
//        return UEditorConfig.UEDITOR_CONFIG;
    }
    @PostMapping("/config")
    @ResponseBody
    public Map<String, Object> ueditorPost(@RequestParam Map<String, Object> params, @RequestParam("upfile") MultipartFile file) {
        String name = (String) params.get("name");
        String type = (String) params.get("type");
        String size = (String) params.get("size");

        String fileName = "";
        if (!file.isEmpty()) {
            //返回的是位元組長度,1M=1024k=1048576位元組 也就是if(fileSize<5*1048576)
            if (file.getSize() > (1048576 * 5)) {
                log.error("檔案大小不能超過5M");
            }
            //判斷檔案是否有後綴
            String suffix = Objects.requireNonNull(file.getOriginalFilename()).substring(file.getOriginalFilename().lastIndexOf("."));
            if (StringUtils.isBlank(suffix)) {
                log.error("上傳檔案沒有後綴，無法識別");
            }

        } else {
            log.error("上傳失敗");
        }

        return serviceInterface.imgUpload(file);

    }

}


    @Override
    public Map<String, Object> imgUpload(MultipartFile upFile) {
        Map<String, Object> rs = new HashMap<String, Object>();
        String originalFileName = "";
        try {
            if (!upFile.isEmpty()) {
                originalFileName = upFile.getOriginalFilename();
                String fileUrl =imgOssService.uploadFile(upFile.getBytes(),originalFileName);
                System.out.println(fileUrl);
                rs.put("state", "SUCCESS");// UEDITOR的規則:不為SUCCESS則顯示state的內容
                rs.put("url", fileUrl); // 能訪問到你現在圖片的路徑
                rs.put("title", originalFileName);
                rs.put("original", originalFileName);

            }
        } catch (Exception e) {
            e.printStackTrace();
            rs.put("state", e.getMessage());
            rs.put("url", "");
            rs.put("title", "");
            rs.put("original", "");
        }
        return rs;
    }
 

3.避坑

3.1 單張圖片可以上傳到伺服器但是會提示“上傳出錯”
解決辦法：修改ueditor.all.min.js原始碼檢索到指定位置註釋原始碼後加入以下程式碼， 由於專案會自動引用ueditor.all.min.js， 所以我將ueditor.all.js修改後直接貼上覆蓋到ueditor.all.min.js 中，問題解決。（參考：https://blog.csdn.net/csdn_shenguang/article/details/89026174?utm_medium=distribute.pc_relevant_download.none-task-blog-baidujs-1.nonecase&depth_1-utm_source=distribute.pc_relevant_download.none-task-blog-baidujs-1.nonecase）

                    // domUtils.on(iframe, 'load', callback);
                    // form.action = utils.formatUrl(imageActionUrl + (imageActionUrl.indexOf('?') == -1 ? '?':'&') + params);
                    // form.submit();
                    var formdata = new FormData(form);
                    var arr,reg=new RegExp("(^| )_token=([^;]*)(;|$)");

                    var myForm = document.getElementById("myForm");
                    var xhr= new XMLHttpRequest();
                    xhr.open("POST", me.getOpt('serverUrl')+'?action=uploadimage', true);
                    xhr.onreadystatechange = function() {
                        if (xhr.readyState === 4)
                            if ((xhr.status >=200 && xhr.status < 300) || xhr.status == 304)
                                alert(xhr.responseText);
                    }
                    xhr.send(formdata);

                    xhr.onreadystatechange = function () {
                        if(xhr.readyState == 4) {
                            var response = JSON.parse(xhr.responseText);
                            if(response.state=='SUCCESS' ){
                                loader = me.document.getElementById(loadingId);
                                loader.setAttribute('src', response.url);
                                loader.setAttribute('_src', response.url);
                                loader.setAttribute('title', response.title || '');
                                loader.setAttribute('alt', response.original || '');
                                loader.removeAttribute('id');
                                domUtils.removeClasses(loader, 'loadingclass');
                            }
                        }
                    }

3.2 單張或者多張上傳後不能回顯到ueditor編輯器內
原因分析：可能是由於前後端分離跨域導致的，也就是訪問圖片資源時它前面自動加了前端專案的域名，我本地專案那麼它就加localhost:8080/,如果部署到伺服器那就加伺服器域名，導致無法訪問到圖片資源

問題解決：這個問題搞了好久，但是解決起來很簡單，是由於瀏覽器在訪問伺服器資源時如果請求連線不是以http, https, ftp...等開頭的，都會被識別為相對路徑，跳轉時會被加上http://域名/(專案名/)，所以我們在返回圖片路徑是給他拼接一個http://的開頭即可。

插入視訊修改

上傳附件中文亂碼
var iframedoc = (iframe.contentDocument || iframe.contentWindow.document);
iframedoc.charset="gbk";