1.下载vue-ueditor-wrap
cnpm i vue-ueditor-wrap -S
下载最新的 UEditor 资源文件放入你项目的静态资源目录中（比如 static 或者 public，这取决于你项目的配置）。
2.引入VueUeditorWrap组件
import VueUeditorWrap from 'vue-ueditor-wrap'
3.注册组件
components: { VueUeditorWrap } // 或者在 main.js 里将它注册为全局组件 Vue.component('vue-ueditor-wrap',VueUeditorWrap)
4.v-model绑定数据
<vue-ueditor-wrap v-model="msg"></vue-ueditor-wrap>
5.示例
<template> div class="hello"> vue-ueditor-wrap ref="ueditor" v-model="msg" :destroy="false" :config="config" style="width: 600px;margin: 0 auto;"></vue-ueditor-wrapbutton @click="showData" class="preview">保存内容</buttondiv> > script> import VueUeditorWrap from 'vue-ueditor-wrap' // ES6 Module export default { name: HelloWorld,components: { VueUeditorWrap },data () { return { msg: 请输入内容 编辑器不自动被内容撑高 autoHeightEnabled: true 初始容器高度 initialFrameHeight: 240false 初始容器宽度 initialFrameWidth: 100%'' } } },mounted () { },methods: { showData () { console.log(this.msg) } } } >
详细的配置可参考UEditor富文本编辑器官网。
