vue+富文本编辑器UEditor

昨天的需求是把textarea换成富文本编辑器的形式，

网上找了几种富文本编辑器ueditor、tinymce等，

觉得ueditor实现双向绑定还挺有意思，

分享一下～

vue+富文本编辑器UEditor-LMLPHP

按照下面步骤即可

前言

vue-cli3

安装插件

npm i vue-ueditor-wrap

// 或者

yarn add vue-ueditor-wrap

下载最新编译的UEditor

你可以登陆官网下载也可以使用一个修复好的版本

点击连接修复好的内容如图所示：

vue+富文本编辑器UEditor-LMLPHP

根据你的需要下载这八个中的一个即可。

将下载好的压缩包解压并命名为UEditor

放入你的static目录下

vue+富文本编辑器UEditor-LMLPHP

引入VueUeditorWrap组件

import VueUeditorWrap from 'vue-ueditor-wrap' // ES6 Module

// 或者

const VueUeditorWrap = require('vue-ueditor-wrap') // CommonJS

注册组件

components: {

  VueUeditorWrap

}

// 或者在 main.js 里将它注册为全局组件

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

v-model绑定数据

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

data () {

  return {

    msg: '<h2><img src="http://img.baidu.com/hi/jx2/j_0003.gif"/>Vue + UEditor + v-model双向绑定</h2>'

  }

}

至此你已经可以在页面中看到一个初始化之后的 UEditor 了，并且它已经成功和数据绑定了！