在Vue中使用UEditor

UEditor是百度的一个javascript富文本编辑器，功能强大，常见的富文本编辑器中总有它的一席之地，今天我们就写一个简单的demo来学习如何在vue-cli中使用它，以及图片上传！

第一步，先下载依赖

npm i vue-ueditor-wrap -S

第二步，引入到项目中

import VueUeditorWrap from 'vue-ueditor-wrap'

第三步，注册组件

components: {
    VueUeditorWrap
}

第四步，在模板中使用组件

<template>
  <div>
    <VueUeditorWrap/>
  </div>
</template>

这个时候我们已经可以在页面中看到编辑器的样子了

但是我们往往需要更多的功能，比如图片上传，因此我们需要一些其他东西来支持我们的工作，这里通过点赞后盗用大神的一份文件（n(≧≦)n）https://github.com/HaoChuan9421/vue-ueditor-wrap/tree/master/assets/downloads (opens new window)，我在本项目中所使用的是utf8-php.zip，解压后放在static下并命名为UEditor

接下来，请看全部代码

<template>
  <div>
    <VueUeditorWrap 
      v-model="message" 
      :config="editorConfig" 
      @ready="ready"
    />
  </div>
</template>
<script>
import VueUeditorWrap from 'vue-ueditor-wrap'
import evtHub from '@/common/eventHub.js'
export default {
  name: "Editor",
  components: {
    VueUeditorWrap
  },
  props: ["content"],
  data() {
    return {
      evtHub: evtHub,
      message: '',
      // 简单配置
      editorConfig: {
        // 编辑器不自动被内容撑高
        autoHeightEnabled: false,
        // 初始容器高度
        initialFrameHeight: 300,
        // 初始容器宽度
        initialFrameWidth: '100%',
        // 上传文件接口, 报错属于正常，若需要验证可使用(也是盗大神的)http://35.201.165.105:8000/controller.php
        // 调试完毕打包上线则切换回/static/UEditor/php/controller.php即可，不用做其他处理
        serverUrl: '/static/UEditor/php/controller.php',
      }
    };
  },
  mounted() {
    // 这里是从列表页编辑时做的内容注入，没有需要可以不写
    this.message = this.content;
  },
  methods: {
    ready(editorInstance) {
    // 这里可以拿到ueditor的实例，比如editorInstance.getContent()就可以拿到编辑器的html内容
      this.evtHub.$emit('editor.data', editorInstance);
    }
  }
};
</script>