百度富文本在vue项目中的使用

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/A_one2010/article/details/79581482

百度富文本配置这里不做过多的说明，详情请参看官网文档，http://fex.baidu.com/ueditor/#start-config

1. 定义富文本单独的组件

<template>
  <script  ref="editor" type="text/plain"></script>
</template>

<script>
  /* eslint-disable */
  import '../../static/ueditor/ueditor.config.js'
  import '../../static/ueditor/ueditor.all.js'
  import '../../static/ueditor/lang/zh-cn/zh-cn.js'
  export default {
    name:"ueditor",
    data() {
      return {
        id:'ueditorId'+Math.random().toString(16).substring(2) ,
        editor:null
      };
    },
    props: {
      value: {
        type: String,
        default: null,
      },
      config: {
        type: Object,
        default: function(){
          return {
            autoHeightEnabled: false,
            autoFloatEnabled: true,
            initialContent: "",
            autoClearinitialContent: true,
            initialFrameWidth: null,
            initialFrameHeight: 450,
            BaseUrl: "",
            UEDITOR_HOME_URL: "static/ueditor/"
          }
        },
      }
    },
    watch: {
    },
    mounted() {
      this.$nextTick(function f1() {
        // 保证 this.$el 已经插入文档
        this.$refs.editor.id = this.id;
        this.editor= UE.getEditor(this.id, this.config);
        this.editor.ready(function f() {
        }.bind(this));
      });
    },
    methods: {
      getUEContent: function () { //对外暴露的获取富文本内容接口
        return this.editor.getContent();
      },
      setUEContent: function (data) {  //对外暴露的获取富文本内容接口
        this.editor.ready(function f() {
          this.editor.setContent('<p>'+data+'</p>', false);
        }.bind(this));
      },
      destroyUE(){ //对外暴露销毁组件接口
        // this.editor1.destroy();
      }
    }
  }
</script>

    2. 使用

//引入
inport ueditorOne from '组件位置'
//template部分
<ueditorOne ref="diseaseFileUeditor"></ueditorOne>
//使用
this.$refs.diseaseFileUeditor.setUEContent('要加载的数据。。。。。')
this.$refs.diseaseFileUeditor.getUEContent() //获取富文本编辑后的内容