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>
posted @ 2022-09-16 15:25  往暮  阅读(1781)  评论(0)    收藏  举报