vue 使用Ueditor富文本的配置

UEditor是百度的一個javascript富文本編輯器，功能強大，以下是vue項目中的引入過程

1.下載vue-ueditor-wrap:  

說明：下載這個插件對vue使用方便，有雙向數據綁定的優勢，操作相對方便點

第一步，先下載依賴

npm i vue-ueditor-wrap -S

第二步，引入到項目中（我是引入到需要的頁面中，沒有全局引入）

import VueUeditorWrap from 'vue-ueditor-wrap'

第三步，注冊組件

components: {

    VueUeditorWrap //ueditor富文本編輯器

  },

第四步，在模板中使用組件

<template>
  <div>
    <VueUeditorWrap/>
  </div>
</template>

2，下載ueditor官方提供的壓縮包：

  下載地址：https://ueditor.baidu.com/website/download.html

3.將下載好的官方壓縮包放到static或public下面：

項目如果使用的是vue-cil2.0版本的，就放到static，若為vue-cil3.0版本的，就放到public文件夾下

 

 4,修改引用處

<VueUeditorWrap :config="editorConfig" v-model="formData.Remark" />

 editorConfig: {
        autoHeightEnabled: false, //編譯器不自動被內容撐高
        initialFrameHeight: 350, //初始容器高度
        initialFrameWith: "100%",
        serverUrl: "/api/ueditor/net/controller.ashx", //上傳文件地址
        UEDITOR_HOME_URL: "/UEditor/", //UEditor資源文件的存放路徑
      },

至此，已完成配置

1，鑒於第二次進頁面會報“ueditor TypeError: Cannot set property 'innerHTML' of null"”

此問題可以修改  ueditor源碼  ueditor.all.js

 UE.getEditor = function(id, opt) {

      //下面是源碼  先去頁面找是否存在已經實例化的編輯器對象,

      // 如果沒有,就新生成一個編輯器.

      // 否則直接將頁面上找到的那個編輯器給返回.

      // 再聯想到剛才的報錯Cannot set property 'innerHTML' of null(而不是undefined,而且控制台也沒有輸出編輯器2實例化完成),

      // 那么真相只有一個! 那就是當你在一次來到編輯器頁面時,編輯器早已經存在,都已經存在的編輯器,自然不會觸發ready事件,所以自然不能觸發卸載ready事件里的setContent事件了.

      // var editor = instances[id];

      // if (!editor) {

      //     editor = instances[id] = new UE.ui.Editor(opt);

      //     editor.render(id);

      // }

      // return editor;

      // 下面是修改后的，解決問題：‘Cannot set property 'innerHTML' of null’每一次直接根據js傳來的id,生成一個全新的ueditor對象

      UE.delEditor(id);

      var editor = new UE.ui.Editor(opt);

      editor.render(id);

      return editor;

    };

    UE.delEditor = function(id) {

      var editor;

      if ((editor = instances[id])) {

        editor.key && editor.destroy();

        delete instances[id];

      }

    };

,2，新增需求，需要返回沒有html格式的純文本給接口，使用

vue-ueditor-wrap的v-model獲取的是有html格式的文本
解決辦法就是獲取編輯器實例

 <VueUeditorWrap
              id="editor"
              :config="editorConfig"
              v-model="formData.Remark"
              :destroy="true"
              @ready="ready"
            />

//method中加入
 ready(editorInstance) {
      //編輯器實例
      this.myEditor = editorInstance;
    },

this.myEditor.getContentTxt(); //不帶html格式的商品詳情信息

3, ueditor的圖片浮動的失效問題

在ueditor.config.js文件中，有一個xss過濾白名單，這個地方對img標簽的style進行配置，加上去，就好啦（這個問題查了蠻久的，沒有找對方向）