79 lines
1.8 KiB
Vue
79 lines
1.8 KiB
Vue
<template>
|
|
<div class="editor" id="editor"></div>
|
|
</template>
|
|
|
|
<script>
|
|
import wangEditor from 'wangeditor'
|
|
export default {
|
|
name:"WangEdit",
|
|
props:{
|
|
/* 编辑器的内容 */
|
|
value: {
|
|
type: String,
|
|
default: "",
|
|
},
|
|
/* 高度 */
|
|
height: {
|
|
type: Number,
|
|
default: null,
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
editor: null,
|
|
editorData: ''
|
|
}
|
|
},
|
|
/*computed: {
|
|
styles() {
|
|
let style = {};
|
|
if (this.minHeight) {
|
|
style.minHeight = `${this.minHeight}px`;
|
|
}
|
|
if (this.height) {
|
|
style.height = `${this.height}px`;
|
|
}
|
|
return style;
|
|
},
|
|
},*/
|
|
watch:{
|
|
value:{
|
|
handler(val){
|
|
if(val !== this.editorData){
|
|
this.editorData = val === null ? "" : val;
|
|
if (this.editor) {
|
|
this.editor.txt.html(this.editorData);
|
|
}
|
|
}
|
|
},
|
|
immediate: true,
|
|
},
|
|
},
|
|
mounted() {
|
|
const editor = new wangEditor(`#editor`)
|
|
editor.config.height = this.height ? this.height : 500;
|
|
// 创建编辑器
|
|
editor.create()
|
|
this.editor = editor
|
|
this.editor.txt.html(this.editorData);
|
|
// 配置 onchange 回调函数，将数据同步到 vue 中
|
|
editor.config.onchange = (newHtml) => {
|
|
this.editorData = newHtml
|
|
this.$emit("input", this.editorData);
|
|
}
|
|
},
|
|
methods: {
|
|
getEditorData() {
|
|
// 通过代码获取编辑器内容
|
|
let data = this.editor.txt.html()
|
|
alert(data)
|
|
}
|
|
},
|
|
beforeDestroy() {
|
|
// 调用销毁 API 对当前编辑器实例进行销毁
|
|
this.editor.destroy()
|
|
this.editor = null
|
|
}
|
|
}
|
|
</script>
|