百度富文本配置这里不做过多的说明,详情请参看官网文档,http://fex.baidu.com/ueditor/#start-config
- 定义富文本单独的组件
<template>
<script ref="editor" type="text/plain"></script>
</template>
<script>
/* eslint-disable */
import '../../static/ueditor/ueditor.config.js'
import '../../static/ueditor/ueditor.all.js'
import '../../static/ueditor/lang/zh-cn/zh-cn.js'
export default {
name:"ueditor",
data() {
return {
id:'ueditorId'+Math.random().toString(16).substring(2) ,
editor:null
};
},
props: {
value: {
type: String,
default: null,
},
config: {
type: Object,
default: function(){
return {
autoHeightEnabled: false,
autoFloatEnabled: true,
initialContent: "",
autoClearinitialContent: true,
initialFrameWidth: null,
initialFrameHeight: 450,
BaseUrl: "",
UEDITOR_HOME_URL: "static/ueditor/"
}
},
}
},
watch: {
},
mounted() {
this.$nextTick(function f1() {
// 保证 this.$el 已经插入文档
this.$refs.editor.id = this.id;
this.editor= UE.getEditor(this.id, this.config);
this.editor.ready(function f() {
}.bind(this));
});
},
methods: {
getUEContent: function () { //对外暴露的获取富文本内容接口
return this.editor.getContent();
},
setUEContent: function (data) { //对外暴露的获取富文本内容接口
this.editor.ready(function f() {
this.editor.setContent('<p>'+data+'</p>', false);
}.bind(this));
},
destroyUE(){ //对外暴露销毁组件接口
// this.editor1.destroy();
}
}
}
</script>
2. 使用
//引入
inport ueditorOne from '组件位置'
//template部分
<ueditorOne ref="diseaseFileUeditor"></ueditorOne>
//使用
this.$refs.diseaseFileUeditor.setUEContent('要加载的数据。。。。。')
this.$refs.diseaseFileUeditor.getUEContent() //获取富文本编辑后的内容