1. 下载并安装Ueditor编辑器，可以去百度UEditor的官网去下载，网址是http://ueditor.baidu.com/website/，下载下来之后要记得引入必要的js文件 ，如ueditor.all.js、ueditor.config.js等。

2. 进入到vue2项目当中，在components文件夹下新建Ueditor文件夹，在Ueditor文件夹下创建index.vue文件，初始化编辑器，代码如下：

components/Ueditor/index.vue

<template>
  <div>
    <!--也可将script便签替换成div标签-->
    <script :id="randomId" type="text/plain" style="height: 300px;"></script>
  </div>
</template>

<script>

export default {
  name: 'UE',
  props: {
    value: {
      default: function () {
        return ''
      }
    }
  },
  data () {
    return {
      randomId: 'editor_' + Math.random() * 100000000000000000,
      // 编辑器实例
      instance: null,
      ready: false
    }
  },
  watch: {
    value: function (val, oldVal) {
      if (val != null && this.ready) {
        this.instance = UE.getEditor(this.randomId)
        this.instance.setContent(val)
      }
    }
  },
  mounted () {
    this.initEditor()
  },

  beforeDestroy () {
    if (this.instance !== null && this.instance.destroy) {
      this.instance.destroy()
    }
  },
  methods: {
    initEditor () {
      this.$nextTick(() => {
        this.instance = UE.getEditor(this.randomId)
        this.instance.addListener('ready', () => {
          this.ready = true
          this.$emit('ready', this.instance)
        })
      })
    },
    getUEContent () {
      return this.instance.getContent()
    },
    setText (con) {
      this.instance = UE.getEditor(this.randomId)
      this.instance.setContent(con)
    }
  }
}
</script>

3. 在需要用到Ueditor编辑器的页面中引入ueditor.vue

import Ueditor from '@/components/Ueditor'

4. 引入后，可用el-dialog控制编辑器的展示与隐藏，代码如下：

<el-dialog  :visible.sync="richEditor.dialogVisible"  
            append-to-body :close-on-click-modal="false" 
            style="width: 100%;height: 100%"   
            :show-close="false" center>
    <Ueditor @ready="editorReady"/>
    <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="editorConfirm">确 定</el-button>
        <el-button @click="richEditor.dialogVisible = false">取 消</el-button>
    </span>
</el-dialog>

5. 在需要使用Ueditor编辑器输入的地方，调用inputClick方法

以form表单中input框为例

<el-form-item label="描述：" prop="description" required>
    <el-input v-model="form.description"  @focus="inputClick(form,'description')" />
</el-form-item>

6. script标签中代码如下（下面只截取了关于富文本编辑器的一部分）

<script>
import Ueditor from '@/components/Ueditor'
export default {
  components: {
    Ueditor
  },
  data () {
    return {
      richEditor: {
        dialogVisible: false,
        object: null,
        parameterName: '',
        instance: null
      }
    }
  },
  methods: {
    editorReady (instance) {
      this.richEditor.instance = instance
      let currentContent = this.richEditor.object[this.richEditor.parameterName]
      this.richEditor.instance.setContent(currentContent)
      // 光标定位到Ueditor
      this.richEditor.instance.focus(true)
    },
    inputClick (object, parameterName) {
      this.richEditor.object = object
      this.richEditor.parameterName = parameterName
      this.richEditor.dialogVisible = true
    },
    editorConfirm () {
      // 获取编辑器内容getContent()，获取纯文本内容getPlainTxt()
      let content = this.richEditor.instance.getContent()
      this.richEditor.object[this.richEditor.parameterName] = content
      this.richEditor.dialogVisible = false
    },
    // 编辑器内容置空
    // clearRichEditor () {
    //   this.richEditor.instance.setContent('');
    // }
}
</script>

7. 实现效果

前端小萌新，第一次写，如有错误的地方，欢迎各位大佬批评指正(*^▽^*)