vue2 接入富文本编辑器

基于百度富文本编辑器封装的vue 组件

链接 https://github.com/haochuan9421/vue-ueditor-wrap

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. 绑定数据

<vue-ueditor-wrap v-model="msg"></vue-ueditor-wrap>
data () {
  return {
    msg: '<h2>Hello World!</h2>'
  }
}

5. 配置项

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",
    },
  };
},