1、百度UEditor插件的安装过程请查看我的另篇博文:http://blog.csdn.net/lzc4869/article/details/78438121
2、组件
(1)组件页面
ueditor.vue
<template>
<script :id=id type="text/plain"></script>
</template>
<script>
export default {
name: 'UE',
data() {
return {
editor: null
}
},
props: {
content: {
type: String,
default:''
},
config: {
type: Object,
},
id: {
type: String
}
},
ready() {
const _this = this;
_this.editor = UE.getEditor(_this.id, _this.config); // 初始化UE
_this.editor.addListener("ready", function () {
_this.editor.setContent(_this.content); // 确保UE加载完成后,放入内容。
});
},
methods: {
getContent() { // 获取内容方法
return this.editor.getContent();
}
},
destroyed() {
this.editor.destroy();
},
}
</script>
(2)测试页面
test_ue.vue
<template>
<div class="content-wrapper">
<div class="content">
<div class="info">UE编辑器示例<br>需要使用编辑器时,调用UE公共组件即可。可设置填充内容content,配置信息config(宽度和高度等),可调用组件中获取内容的方法。支持页面内多次调用。
</div>
<button @click="getUEContent()">获取内容</button>
<ueditor :content=content1 :config=config1 :id="ue1"></ueditor>
<ueditor :content=content2 :config=config2 :id="ue2"></ueditor>
</div>
</div>
</template>
<script>
import ueditor from '../common/component/ueditor.vue';
export default {
components: {
ueditor
},
data() {
return {
content1: '这里是UE测试1',
content2: '这里是UE测试2',
config1: {
initialFrameWidth: 1600,
initialFrameHeight: 350,
wordCount: false,
},
config2: {
autoHeight: false,
wordCount: false,
},
ue1: "ue1", // 不同编辑器必须不同的id
ue2: "ue2"
}
},
methods: {
getUEContent() {
// 获取ueditor值
let content1 = UE.getEditor(this.ue1).getContent();
let content2 = UE.getEditor(this.ue2).getContent();
console.log(content1)
console.log(content2)
}
}
};
</script>
关注我的技术公众号《漫谈人工智能》,每天推送优质文章