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

文章目录

• • 前言
  • 手册
  • Installation 安装
  • Events 事件

前言

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 实例