之前我已經(jīng)發(fā)表過了vue+wangeditor編輯器的文章了，今天又玩了一下寝并，發(fā)現(xiàn)一個(gè)問題，添加是沒有問題了衬潦，但是如果我在另一個(gè)組件里面也使用wangeditor編輯器，運(yùn)行以后會(huì)報(bào)錯(cuò)镀岛，可能是由于vue是單頁應(yīng)用的緣故，所以我重新修改了一下漂羊，把wangeditor單獨(dú)封裝成一個(gè)組件來調(diào)用
封裝代碼如下
<template>
<div id="wangeditor">
<div ref="editorElem" style="text-align:left"></div>
</div>
</template>
<script>
import E from 'wangeditor'
export default {
props: ['editortext'],
watch: {
editortext(newdata) {
return newdata
}
},
data() {
return {
editorContent: this.editortext,
neweditor: function() {
var editor = new E(this.$refs.editorElem)
editor.customConfig.onchange = (html) => {
window.console.log(html)
this.editorContent = html
}
editor.customConfig.zIndex = 1;
editor.customConfig.uploadImgServer = '/upload';
editor.create()
editor.txt.html(this.editorContent);
},
}
},
mounted() {
this.neweditor()
}
}
</script>
<style>
</style>
調(diào)用的時(shí)候父組件傳入一個(gè)editortext代表編輯器的初始值如果是添加的話都是空走越，默認(rèn)進(jìn)入就渲染了一個(gè)編輯器稻据，但是如果是編輯功能的話，首先進(jìn)入頁面渲染成功是一個(gè)空的編輯器捻悯，但點(diǎn)擊編輯的時(shí)候要?jiǎng)討B(tài)改變編輯器的值，這個(gè)時(shí)候我們就需要加一個(gè)監(jiān)聽事件今缚，watch監(jiān)聽到數(shù)據(jù)變化以后我們在給編輯器賦值，editor.txt.html(this.editorContent);只要添加這一句diamante以后就可以實(shí)現(xiàn)動(dòng)態(tài)賦值瞬项。
