Vue使用ueditor百度富文本编辑器

 

 

1.进入官网或者github下载源码

地址：https://github.com/fex-team/ueditor 

推荐 git clone https://github.com/fex-team/ueditor.git

 

2.使用grunt编译

grunt是什么

全局安装grunt

npm install -g grunt-cli

安装后在全局变量里配置 ！！！

找到安装目录

 

3.编译 ueditor 项目

安装依赖

npm install 

依赖安装好以后，使用命令

grunt default

进行编译，编译后会生成 dist 文件 

将dist目录中 utf8-php 目录复制到vue原项目的 public 目录中，修改 utf8-php 目录名为 UEditor

4.原项目安装 vue-ueditor-wrap

npm install vue-ueditor-wrap

5.组件中引入，自定义组件

引入组件：

<template>
  <vue-ueditor-wrap v-model="dataStr" :config="myConfig"  @ready="ready"></vue-ueditor-wrap>
</template>

参数配置：

<script>
import VueUeditorWrap from 'vue-ueditor-wrap'
export default {
  components: { VueUeditorWrap },
  data() {
    return {// 编辑器
      dataStr: '我是渲染字段',
      myConfig: {
        // 编辑器不自动被内容撑高
        autoHeightEnabled: false,
        // 初始容器高度
        initialFrameHeight: 600,
        // 初始容器宽度
        initialFrameWidth: '100%',
        // 上传文件接口
        serverUrl: '',
        // UEditor 是文件的存放路径，
        UEDITOR_HOME_URL: '/static/ueditor/'
      }
    }
  },
  mounted() {
    this.ready()
  },
  methods: {
    ready(editorInstance) {
      console.log(`编辑器实例${editorInstance.key}: `, editorInstance)
    },
  }
}
</script>