vue使用ueditor富文本编辑器

富文本编辑器在web项目中还是很常见的，所以简单研究了下，主要用到了 vue-ueditor-wrap 依赖。

1. 安装依赖

npm i vue-ueditor-wrap -S

2. 全局注册组件，main.js 中加入以下代码：（富文本编辑器用到的地方不多，其实应该用局部注册组件，这里图方便用了全局）

import VueUeditorWrap from 'vue-ueditor-wrap'
Vue.component('vue-ueditor-wrap', VueUeditorWrap);

3. 使用组件

<template>
  <div class="hello">
    <vue-ueditor-wrap v-model="msg"></vue-ueditor-wrap>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: '<h2><img src="http://img.baidu.com/hi/jx2/j_0003.gif"/>Vue + UEditor + v-model双向绑定</h2>'
    }
  }
}
</script>

4. 效果如下：

【后续】实际项目中遇到不一样的需求，需要具体百度 vue-ueditor-wrap