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

有兴趣的同学研究吧