vue項目添加百度富文本編輯器（ueditor）

<template>
  <div>
    <script id="editor" type="text/plain"></script>
  </div>
</template>

<script>
  export default {
    name: "UE",
    data() {
      return {
        editor: null
      }
    },
    props: {
      defaultMsg: {
        type: String
      },
      config: {
        type: Object
      }
    },
    mounted() {
      const _this = this;
      this.editor = UE.getEditor('editor', this.config); // 初始化UE
      this.editor.addListener("ready", function () {
        _this.editor.setContent(_this.defaultMsg); // 確保UE加載完成后，放入內容。
      });
    },
    watch: {
      defaultMsg(newVal) {
        this.editor.setContent(newVal);
      }
    },
    methods: {
      getUEContent() { // 獲取內容方法
        return this.editor.getContent()
      }
    },
    destroyed() {
      this.editor.destroy();
    }
  }
</script>

<style scoped>

</style>

 

使用百度富文本

第一步：下載富文本，下載鏈接：http://ueditor.baidu.com/website/

 

 

 第二步：把你的下載的富文本添加到項目中，然后在main.js中引用相關

import '../static/ueditor/ueditor.config'
import '../static/ueditor/ueditor.all.min'
import '../static/ueditor/lang/zh-cn/zh-cn'
import '../static/ueditor/ueditor.parse.min'
本人是放在static目錄下了，視你自己的情況放（記得修改目錄地址）

第三步：把ueditor分裝成組件便於以后使用

分裝代碼：

 

<template>
  <div>
    <script id="editor" type="text/plain"></script>
  </div>
</template>

<script>
  export default {
    name: "UE",
    data() {
      return {
        editor: null
      }
    },
    props: {
      defaultMsg: {
        type: String
      },
      config: {
        type: Object
      }
    },
    mounted() {
      const _this = this;
      this.editor = UE.getEditor('editor', this.config); // 初始化UE
      this.editor.addListener("ready", function () {
        _this.editor.setContent(_this.defaultMsg); // 確保UE加載完成后，放入內容。
      });
    },
    methods: {
      getUEContent() { // 獲取內容方法
        return this.editor.getContent()
      }
    },
    destroyed() {
      this.editor.destroy();
    }
  }
</script>

<style lang="scss">
  #editor {
    line-height: 1;
  }
</style>

第四步：引用

import ueditor from '@/components/ue'  導入組件

components: { // 定義組件名稱
  ueditor
},

<ueditor :defaultMsg=defaultMsg :config=config ref="ue"></ueditor> // 組件引用

data（）{ // 設置數據

defaultMsg: '', // 富文本默認提示信息
/*富文本配置項*/
config: {
  initialFrameWidth: null, // 寬度
  initialFrameHeight: 350 // 高度
},

}

this.$refs.ue.getUEContent(); // 獲取富文本內容


后續：后續發現很多相關的問題，例如圖片上傳和富文本放在彈窗中，而彈窗使用的是一個富文本。這就導致添加和編輯的時候富文本的值回顯有問題。
下面給出本人的解決方案：
首先我們對分裝的富文本進行了修改：

<template>
  <div>
    <script id="editor"
            type="text/plain"></script>
  </div>
</template>

<script>
export default {
  name: "UE",
  data () {
    return {
      editor: null
    }
  },
  props: {
    defaultMsg: {
      type: String,
      default: ''
    },
    config: {
      type: Object
    }
  },
  mounted () {
    const _this = this;
    this.editor = UE.getEditor('editor', this.config); // 初始化UE
    this.editor.addListener("ready", function () {
      _this.editor.setContent(_this.defaultMsg); // 確保UE加載完成后，放入內容。
    });
  },
  watch:{ defaultMsg (newVal) { this.editor.setContent(newVal); } },
  methods: {
    getUEContent () { // 獲取內容方法
      return this.editor.getContent()
    },
    setText (con) { const _this = this; _this.editor.setContent(con); }
  },
  destroyed () {
    this.editor.destroy();
  }
}
</script>

<style scoped>
</style>

紅色字問修改部分。

下面說一下邏輯頁面的實現。

在彈窗關閉的時候添加：

closeRzDialog() {
      this.setUEContent("");
      this.addRzDialog = false;
    },

setUEContent (data) {
      this.$refs.ue.setText(data);
    },

在關閉彈窗的時候把值清空一下。

導致這個問題出現是因為：vue為雙向綁定的，一開始添加了watch監聽默認的

defaultMsg 值

只能解決兩個彈層切換賦值的問題。並不能解決添加彈窗里面添加了內容，再次打開新增清空上次輸入值的問題。所以有加了一個

setText方法。
關閉彈窗的時候設置一下值為空值。這樣間接的算是完成了功能吧。
如果你使用的是element中的dialog組件也可以使用

官方給出的屬性
destroy-on-close   關閉時銷毀Dialog 中的元素   boolean  —false
這個屬性設置ture也能實現。就不需要每次關閉的時候去設置空值了。但是對渲染不好。


下面是個人的建議。一開始就不要使用這個插件。本人后來又找了一個富文本的vue插件。

  Vue-Quill-Editor

下面使用方式，我就不再寫了，懶

介紹一個寫的比較詳細的

https://www.cnblogs.com/wjlbk/p/12884661.html

有興趣的同學研究吧