Vue集成Ueditor - 刘世涛6192

公告

转载：https://juejin.cn/post/6844903781709119495

vue-ueditor-wrap地址：https://github.com/HaoChuan9421/vue-ueditor-wrap

vue-ueditor-wrapdemo地址：http://ueditor.gitrr.com/#/

前言

使用vue-cli3.0+element-ui+webpack做项目时,遇到了一个需求:文章管理中添加富文本编辑器(暂未添加上传图片功能),在百度上查看到好几个富文本编辑器,最终选择了百度的Ueditor,基本能满足所有需求。经过多番采坑之后，已实现相关功能,特此做一个记录。

安装流程：

第一步，先下载依赖

npm i vue-ueditor-wrap -S

第二步，引入到项目中

import VueUeditorWrap from 'vue-ueditor-wrap'

第三步，注册组件

components: {
    VueUeditorWrap
}

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

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

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

WX20190603-234937@2x.png

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

WX20190603-234802@2x.png

下载不同的版本：https://github.com/HaoChuan9421/vue-ueditor-wrap/tree/master/assets/downloads

接下来，请看全部代码

<template>
  <div class="">
        <!-- <VueUeditorWrap 
        v-model="message" 
        :config="editorConfig" 
        @ready="ready"
        /> -->
        <vue-ueditor-wrap :config="editorConfig" ></vue-ueditor-wrap>
  </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: '',
      message: '',
      // 简单配置
      editorConfig: {
        // 编辑器不自动被内容撑高
        autoHeightEnabled: false,
        // 初始容器高度
        initialFrameHeight: 300,
        // 初始容器宽度
        initialFrameWidth: '100%',
        // 上传文件接口, 报错属于正常，若需要验证可使用(也是盗大神的)http://35.201.165.105:8000/controller.php
        // 调试完毕打包上线则切换回/static/UEditor/php/controller.php即可，不用做其他处理
        serverUrl: '',
        UEDITOR_HOME_URL:'/UE/'
        // 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>

<style scoped>
</style>