1、百度UEditor插件的安装过程请查看我的另篇博文：/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", // 不同编辑器必须不同的idue2: "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>
关注我的技术公众号《漫谈人工智能》，每天推送优质文章
