开发环境：vue.js 2.0
文件名称：ueditor.vue
<template>
<div>
<div :id="this.id"></div>
</div>
</template>
<script>
module.exports ={
name: 'editor',
props: ['id','value'],
model: {
prop: 'value',
event: 'input',
},
data() {
return {
ue: '', //ueditor实例
content: '', //编辑器内容
}
},
methods: {
//初始化编辑器
initEditor() {
this.ue = UE.getEditor(this.id, {
initialFrameWidth: '100%',
initialFrameHeight: '250',
scaleEnabled: false
})
//编辑器准备就绪后会触发该事件
this.ue.addListener('ready',()=>{
//设置可以编辑
this.ue.setEnabled();
if(this.value != null)
this.ue.setContent(this.value);
});
//alert(this.data);
//编辑器内容修改时
//this.selectionchange();.
this.ue.addListener('blur', () => {
this.content = this.ue.getContent();
//this.data = this.content;
if(this.content == this.value){
return;
}
this.$emit('input',this.content);
this.$emit('change');
})
},
//编辑器内容修改时
//selectionchange() {
//}
},
activated() {
//初始化编辑器
this.initEditor();
},
mounted() {
//初始化编辑器
this.initEditor();
},
destroyed() {
//销毁编辑器实例，使用textarea代替
this.ue.destroy();
//重置编辑器，可用来做多个tab使用同一个编辑器实例
//如果要使用同一个实例,请注释destroy()方法
//this.ue.reset()
}
}
</script>
<style >
.params .el-form-item__content{
line-height: 0px !important;
position: relative;
font-size: 14px;
}
</style>使用示例：
1）引入vue.js 与httpVueLoade.js，示例：
<!--vue-->
<script src="/lib/vue/vue-2.6.11.min.js"></script>
<!-- vue组件解析 -->
<script src="/lib/httpVueLoader-1.4.2.js"></script>
文件下载地址：
链接：https://pan.baidu.com/s/1ydW88GgwJOu1jg6ifkZgAA
提取码：zxew
2）new Vue（）components 引入组件
new Vue({
el:"#app",
data:{
},
methods:{
},
components: {
// 引入富文本编辑器组件
'ueditor':"url:/component/ueditor.vue"
}
})3） 在页面上调用组件
<ueditor id="'content" v-model="content" @change="contentChange(index)">
</ueditor>