Vue使用UEditor富文本编辑器

UEditor是一个功能强大、兼容性比较好的富文本编辑器，大概是长成以下的样子：

要在Vue的webpack项目中使用UEditor，具体的步骤如下：

一、下载UEditor源码包

1、到https://ueditor.baidu.com/website/download.html下载相应的版本

2、把下载好的包放在项目的目录中（我放在static目录下）

二、修改文件参数

打开/static/UM/umeditor.config.js文件，加入一行参数：

window.UMEDITOR_HOME_URL = '/static/UE/'

三、引入文件

1、下载Jquery的文件，我把文件放在/static目录下：

因为UEditor插件是依赖到Jquery的，所以在目录的index.html文件中，引入Jquery文件：

2、引入UEditor相关文件

在main.js文件中引入：

import '../static/UM/umeditor.config.js'

import '../static/UM/umeditor.min.js'

import '../static/UM/lang/zh-cn/zh-cn.js'

import '../static/UM/themes/default/css/umeditor.min.css'

注意引入的顺序，引入之后window.UM就是UEditor的对象了。

四、封装一个组件

在components下新建一个.vue文件，代码写成这样：

<template>
  <div>
    <script id="editor" type="text/plain"></script>
  </div>
</template>
<script>
  export default {
    name: 'UM',
    data () {
      return {
        editor: null
      }
    },
    props: {
      defaultMsg: {
        type: String
      },
      config: {
        type: Object
      }
    },
    mounted() {
      const _this = this;
      this.editor = UM.getEditor('editor', this.config); 
      this.editor.ready(() => {
        this.editor.setContent(this.defaultMsg);
      });
    },
    methods: {
      getContent() { 
        return this.editor.getContent()
      }
    },
    destroyed() {
      this.editor.destroy();
    }
  }
</script>

五、使用组件

可以在需要用到编辑器的地方，引入组件：

<template>
    <div>
        <UM :defaultMsg="defaultMsg" :config="config" ref="um"></UM>
    </div>
</template>

<script>
  import UM from '@/components/editor.vue';
  export default {
    data() {
        return {
             defaultMsg: '初始文字',

             config: {
                 initialFrameWidth: null,
                 initialFrameHeight: 350
             }
        }
    
    }
    components: {
      UM
    }

   }
</script>

defaultMsg：初始的文本内容；

config: 编辑器相应的配置；

this.$refs.um.getContent():获取文本的内容。

根据以上的步骤就可以在Vue项目使用UEditor，具体对编辑器的参数修改或操作处理，请查看官方API。