vue-cli3.0使用富文本编辑器vue-ueditor-wrap

参考文档：vue-ueditor-wrap
该文档主要介绍的是再vue-cli2中的使用。

而我的项目用的是vue-cli3.x，所以下面主要介绍在vue-cli3.0中的使用。

1.下载UEditor

下载地址：UEditor官方下载
UEditor文档：UEditor官方文档

2.安装

npm i vue-ueditor-wrap -S
或者 
yarn add vue-ueditor-wrap -S

3.引入

import VueUeditorWrap from 'vue-ueditor-wrap' // ES6 Module
或者
const VueUeditorWrap = require('vue-ueditor-wrap') // CommonJS

4.注册组件

// 在.vue组件中注册
components: {
  VueUeditorWrap
}

// 在main.js中注册
Vue.component('vue-ueditor-wrap', VueUeditorWrap)

5.绑定数据

data () {
  return {
    msg: 'Vue + UEditor + v-model双向绑定'
  }
}

到此，初始化UEditor便OK了。

6.自定义配置

// 添加config属性，可修改菜单
data () {
  return {
    msg: 'Vue + UEditor + v-model双向绑定',
    myConfig: {
      // 编辑器不自动被内容撑高
      autoHeightEnabled: false,
      // 初始容器高度
      initialFrameHeight: 240,
      // 初始容器宽度
      initialFrameWidth: '100%',
      // 上传文件接口（这个地址是我为了方便各位体验文件上传功能搭建的临时接口，请勿在生产环境使用！！！）
      serverUrl: 'http://35.201.165.105:8000/controller.php',
      // UEditor 资源文件的存放路径，如果你使用的是 vue-cli2.0 生成的项目，通常不需要设置该选项，默认是：UEDITOR_HOME_URL: '/static/UEditor/'
      //但是 vue cli 3.x 生成的项目中，默认值是 process.env.BASE_URL + 'UEditor/'，如果项目不是部署在根目录下，则需要自己配置路径，我的项目是在根目录下，手动下载的UEditor放在了public目录下
      UEDITOR_HOME_URL: '/UEditor/',
      // 自定义菜单
      toolbars: [
          ['fullscreen', 'undo', 'redo', 'fontfamily', 'fontsize', 'bold', 'italic', 'underline', 'forecolor', 'fontborder', 'pasteplain','background', 'backcolor', 'strikethrough', 'superscript', 'subscript', 'spechars', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', 'horizontal']
        ]
    }
  }
}

7.获取UEditor实例

methods: {
  ready (editorInstance) {
    console.log(`编辑器实例${editorInstance.key}: `, editorInstance)
  }
}