vue 集成百度富文本编辑器

<template>
<div>
<textarea style="display:none" id="editor_content" name="contentHtml"></textarea>
<script id="editor" type="text/plain"></script>
</div>
</template>
<script>
// 导入ueditor相关
import '../../static/UE/ueditor.config.js'
import '../../static/UE/ueditor.all.js'
import '../../static/UE/lang/zh-cn/zh-cn.js'
import '../../static/UE/ueditor.parse.min.js'
export default {
name: 'UE',
data () {
return {
editor: null,
textarea:null,
}
},
props: {
defaultMsg: {
type: String
},
config: {
type: Object
}
},
watch:{
defaultMsg(val) {
const _this = this
if( !this.editor ){
this.editor = window.UE.getEditor('editor', this.config) // 初始化UE
}
this.editor.ready( function() {
_this.editor.setContent(val); // 确保UE加载完成后，放入内容。
_this.$parent._data.htmlDefaultMsg = _this.editor.getContent()
} );
},
},
mounted () {
const _this = this
if( !this.editor ){
this.editor = window.UE.getEditor('editor', this.config) // 初始化UE
}
this.editor.ready( function() {
_this.editor.setContent(_this.defaultMsg); // 确保UE加载完成后，放入内容。
var shellId = 'editor_content'
$('#' + shellId + ' #edui1_toolbarbox').css('display','none');
_this.editor.fireEvent("contentChange");
var $textarea = $('#editor iframe').contents();
var fn = function(){
_this.$parent._data.htmlDefaultMsg = _this.editor.getContent()
}
if (document.all) {
$textarea.get(0).attachEvent('onpropertychange',function(e) {
fn()
});
}else{
$textarea.on('input',fn);
}
})
this.editor.addListener("contentChange",function(){
_this.editor.getContent()
_this.$parent._data.htmlDefaultMsg = _this.editor.getContent()
});

},
methods: {
getUEContent () { // 获取内容方法
this.$parent._data.htmlDefaultMsg = this.editor.getContent()
return this.editor.getContent()
},
setUEContent (Msg) { // 设置内容方法
return this.editor.setContent(Msg)
},
getContentTxt () { // 获取纯文本内容方法
return this.editor.getContentTxt()
},
},
destroyed () {
this.editor.destroy()
}
}
</script>