vue项目中引入UE的方式：
首先，当然是去官网把ue的本地下载下来，使用vue-cli构建项目的话通常都是把外部插件放到static文件夹中，所以目录就会呈现如下：无视前面几个文件夹
配置Ueditor.config.js
主要的还是
···var URL = window.UEDITOR_HOME_URL || '/static/ueditor/';···
其他的配置大可看看官方文档设置一下，常用的默认宽高、默认功能按钮、层级(zIndex,我就遇到过这个坑。。)
- 创建components
在components中创建基础的vue组件模板，引入ueditor的主要文件，然后就是一些初始话的设置，这里就直接上代码了，网上也都一样
<template>
<div>
<!--下面通过传递进来的id完成初始化-->
<script :id="randomId" type="text/plain"></script>
</div>
</template>
<script>
//主体文件引入
import '../../../static/ueditor/ueditor.config.js'
import '../../../static/ueditor/ueditor.all.min.js'
import '../../../static/ueditor/lang/zh-cn/zh-cn.js'
export default {
name: 'UE',
props: {
value: {
default: function() {
return ''
}
},
//配置可以传递进来
ueditorConfig: {}
},
data() {
return {
//每个编辑器生成不同的id,以防止冲突
randomId: 'editor_' + (Math.random() * 100000000000000000),
//编辑器实例
instance: null,
ready: false,
};
},
watch: {
value: function(val, oldVal) {
if (val != null && this.ready) {
this.instance = UE.getEditor(this.randomId, this.ueditorConfig);
this.instance.setContent(val);
}
}
},
//此时--el挂载到实例上去了,可以初始化对应的编辑器了
mounted() {
this.initEditor();
},
beforeDestroy() {
// 组件销毁的时候，要销毁 UEditor 实例
if(this.instance !== null && this.instance.destroy) {
this.instance.destroy();
}
},
methods: {
initEditor() {
const _this = this;
//dom元素已经挂载上去了
this.$nextTick(() => {
this.instance = UE.getEditor(this.randomId, this.ueditorConfig);
// 绑定事件，当 UEditor 初始化完成后，将编辑器实例通过自定义的 ready 事件交出去
this.instance.addListener('ready', () => {
this.ready = true;
this.$emit('ready', this.instance);
});
});
},
setText(con) {
this.instance = UE.getEditor(this.randomId, this.ueditorConfig);
this.instance.setContent(con);
},
}
};
</script>
<style>
</style>
使用方式：
<template>
<div class="box-container">
<Ueditor @ready="editorReady" ref="ue" :value="defaultMSG" :ueditorConfig="config" style="width:100%;"></Ueditor>
</div>
</template>
<script>
import Ueditor from '@/components/Ueditor';
export default {
data() {
return {
defaultMSG: null,
form: {
content: ''
},
config: {
initialFrameHeight: 500
}
};
},
created() {
this.getInfo();
},
components: {
Ueditor
},
methods: {
getInfo() {
getCategoryInfo(this.form.cateId).then(res => {
if (res.message =='SUCCESS') {
this.form = Object.assign({}, res.data);
this.defaultMSG = this.form.content;
} else {
this.$message({
message: res.message,
type: 'error',
duration: 5 * 1000
});
}
})
},
editorReady(instance) {
instance.setContent(this.form.content);
instance.addListener('contentChange', () => {
this.form.content = instance.getContent();
});
},
}
}
</script>
<style scoped lang="scss">
</style>
- 这样基本上就可以将百度编辑器引入到各个页面中去了，这是修改后的版本，介绍下遇到的坑
第一个问题：异步请求的数据如何赋值到content中去：
这一步也跟一个之前遇到的坑有关，就是：vue2父组件传递props异步数据到子组件的问题，之后在整理下再发个博文吧；
为什么会有这个问题呢？ 因为之前傻乎乎的在ueditor组件上绑定的值是 form.content，然后监听contentChange时赋值给的还是form.content，这样就导致了内容一直刷新，使得光标会自动跳到最前方，错误的示范如下：
//在使用中：
<Ueditor @ready="editorReady" ref="ue" :value="form.content" :ueditorConfig="config" style="width:100%;"></Ueditor>
editorReady(instance) {
instance.setContent(this.form.content);
instance.addListener('contentChange', () => {
this.form.content = instance.getContent();
});
},
//就这样，在ueditor中已经watch了value，导致form.content一变，就处罚setContent，然后又触发了contentChange事件，又赋值了一遍。。。。如此就导致内容一直更新，光标一直会移动到最前放。。。所以，最主要的问题还是在父级组件中设置一个defaultMSG来保存默认值，作为第一次内容的填充，填充完之后的修改就不关它啥事了。。。
第二个问题：使用watch添加默认值的时候，在watch触发时，ueditor却还没有ready，会导致报错，各种奇葩的错，所以呢，
添加一个ready属性，在initEditor的时候监听ready事件，在其中赋值 this.ready = true;就可以避免那些乱七八糟的错误了。
第三个问题：在一个没有默认值的时候，需要清空content的内容时，设置defaultMSG为空是不行的，如下效果，要再切换时清空content
这时候就要用到我们在组件内添加的setText method了，使用的是vue的$refs.组件ref名来获取组件实例，并可以使用methods中的方法
this.$refs.ue.setText(''); //ue是父级在组件上加的 ref="ue"属性
第四个问题： 百度编辑器层级问题
我将百度编辑器放置在element-ui的dialog中，dialog组件默认层级是2000，这就导致了UE中一些定位的下拉框层级不够，被隐藏在了下面，比如表情，字体，字号这些设置，
经过一番查找，发现UE中有个配置项 zIndex用于设置ueditor编辑器层级的基数，瞬间解决~~