<template>
	<div style="border: 1px solid #ccc;">
		<Toolbar
			style="border-bottom: 1px solid #ccc"
			:editor="editor"
			:defaultConfig="toolbarConfig"
			:mode="mode"
		/>
		<Editor
			style="height: 500px; overflow-y: hidden;"
			v-model="html"
			:defaultConfig="editorConfig"
			:mode="mode"
			@onCreated="onCreated"
			@onChange="onChange"
		/>
	</div>
</template>

<script>
	import { Editor, Toolbar } from '@wangeditor/editor-for-vue'

	export default {
		components: { Editor, Toolbar },
		data() {
			return {
				editor: null,
				html: '',
				toolbarConfig: {
					toolbarKeys: []
				},
				editorConfig: {
					placeholder: '请输入内容...'
				},
				mode: 'default', // or 'simple'
			}
		},
		props: {
			modelValue: {
				type: String,
				default: ""
			}
		},
		watch: {
			modelValue(val) {
				this.init(val)
			}
		},
		methods: {
			init (val) {
				if (this.commonJS.isNotEmpty(val)) {
					this.html = val
				} else {
					this.html = ''
				}
			},
			onCreated(editor) {
				this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
			},
			onChange(editor) {
				this.$emit('update:modelValue', editor.getHtml()) // 将内容同步到父组件中
			},
			disable () {
				// 禁用编辑器，设置为只读
				this.editor.disable()
			},
			enable () {
				// 取消禁用，取消只读
				this.editor.enable()
			},
			clear () {
				// 清空编辑器内容
				this.editor.clear()
			}
		},
		mounted() {
		},
		beforeDestroy() {
			const editor = this.editor
			if (editor == null) return
			editor.destroy() // 组件销毁时，及时销毁编辑器
		}
	}
</script>

<style src="@wangeditor/editor/dist/css/style.css"></style>
