vue+富文本编辑器UEditor

vue+富文本编辑器UEditor

 

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

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

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

分享一下～

 

按照下面步骤即可

 

前言

vue2  https://github.com/yangTwo100/vue2UEditor

vue-cli3

 

 

安装插件

npm i vue-ueditor-wrap
// 或者
yarn add vue-ueditor-wrap

 

 

下载最新编译的UEditor

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

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

 

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

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

放入你的static目录下

 

 

引入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 了，并且它已经成功和数据绑定了！