vue-ueditor-wrap 是什么？怎么使用？

前言

vue-ueditor-wrap 是什么

一个“包装”了 UEditor 的 Vue 组件支持通过 v-model 来绑定富文本编辑器的内容让 UEditor 的使用简单到像 Input 框一样。

UEditor 并不支持通过 npm 的方式来安装vue-ueditor-wrap 也只是一个 Vue 组件组件本身并不是 UEditor 的 Vue 版。

手册

地址https://www.npmjs.com/package/vue-ueditor-wrap

Installation 安装

1. 安装组件

# vue-ueditor-wrap v2 仅支持 Vue 2
npm i vue-ueditor-wrap@2.x
# 或者
yarn add vue-ueditor-wrap@2.x

2. 引入VueUeditorWrap组件

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

3. 注册组件

components: {
  VueUeditorWrap;
}
// 或者在 main.js 里将它注册为全局组件
Vue.component('vue-ueditor-wrap', VueUeditorWrap);

4. v-model绑定数据

<vue-ueditor-wrap v-model="msg"></vue-ueditor-wrap>

data () {
  return {
    msg: '<h2>Hello World!</h2>'
  }
}

5. 配置

完整配置请参考 ueditor.config.js 或 官方文档

<vue-ueditor-wrap v-model="msg" :config="editorConfig" editor-id="editor-demo-01"></vue-ueditor-wrap>

data() {
  return {
    msg: "<h2>Hello World!</h2>",
    editorConfig: {
      // 访问 UEditor 静态资源的根路径可参考 https://hc199421.gitee.io/vue-ueditor-wrap/#/faq
      UEDITOR_HOME_URL: "/UEditor/",
      // 服务端接口这个地址是我为了方便各位体验文件上传功能搭建的临时接口请勿在生产环境使用
      serverUrl: "//ueditor.szcloudplus.com/cos",
    },
  };
},

Events 事件

事件名	说明	回调参数
before-init	在 UEditor 的 scripts 加载完毕之后、编辑器初始化之前触发	editorId: string
ready	UEditor ready 时触发	editor: UEditor 实例