vue中使用ueditor编辑器

一，下载包

从Ueditor的官网下载1.4.3.3jsp版本的Ueditor编辑器，官网地址为：
http://fex.baidu.com/ueditor/
下载解压后会得到如果下文件目录：
　
将上述Ueditor文件夹拷贝到vue项目的static文件夹中，此文件夹为项目的静态服务文件夹；

二 、修改配置

在ueditor.config.js中修改如下代码：

// 这里是配置Ueditor内部进行文件请求时的静态文件服务地址
window.UEDITOR_HOME_URL = “/static/Ueditor/”
var URL = window.UEDITOR_HOME_URL || getUEBasePath();

三、文件引入

在vue项目的入口文件main.js中将Ueditor所有的基础文件引入如下：（路径自行配制）

import’…/static/Ueditor/ueditor.config.js’
　　　　import’…/static/Ueditor/ueditor.all.js’
　　　　import’…/static/Ueditor/lang/zh-cn/zh-cn.js’
　　　　import’…/static/Ueditor/ueditor.parse.js’

四、在vue组件中使用ueditor

<template>
  　　　　<div>
    　　　　
    <!--editor的div为富文本的承载容器-->
    　　　　<div id="editor"></div>
    　　　　</div>
</template>
　　　　<script>
  export default {
    name: '',
    data() {
      return {
        editor: null,
      }
    },
    mounted() {
      // 实例化editor编辑器
      this.editor = UE.getEditor('editor');
      // console.log(this.editor.setContent("1223"))
    },

    destroyed() {
      // 将editor进行销毁
      this.editor.destroy();
    }
  }

</script>

实现效果如下