<template>
	<div class="cke_div" style="flex: 1;" v-loading="loading">
		<textarea :id="id" name="content"></textarea>
	</div>
</template>
<script>
export default {
	props: ["content", "placeholder",'type'],//从父组件转递的内容
	mounted: function () {
		const self = this;
		// 渲染编辑器
		if(self.type&&self.type=='mini'){ //跟进
			self.ckeditor = window.CKEDITOR.replace('content', { toolbar : 'Mini' });//定义编辑器的高度
		}else{
			self.ckeditor = window.CKEDITOR.replace('content', self.editorConfig);//定义编辑器的高度
		}

		// 设置初始内容
		self.ckeditor.setData(self.content);

		// 监听内容变更事件
		self.ckeditor.on("change", function () {
			self.$emit("sendContnet", self.ckeditor.getData());
		});
		self.loading = false
	},
	data: function () {
		const self = this;
		return {
			id: parseInt(Math.random() * 10000).toString(),
			ckeditor: null,
			editorConfig: {
				versionCheck: false,
				dragDrop: false,
				editorplaceholder: self.placeholder || '',
			},
			loading:true
		};
	},
	watch: {
		// 监听prop的变化，更新ckeditor中的值
		content: function () {
			if (this.content !== this.ckeditor.getData()) {
				this.ckeditor.setData(this.content);
			}
		}
	},
	beforeDestroy() {
		// 组件销毁前释放CKEditor资源
		if (this.ckeditor) {
			this.ckeditor.destroy();
			this.ckeditor = null;
		}
	},
};
</script>
<style lang="scss">
.cke_div {
	.cke_chrome {
		height: 100%;
		box-sizing: border-box;
		.cke_inner {
			height: 100%;
			display: flex;
			flex-direction: column;
		}
		.cke_contents{
			flex: 1;
		}
	}
}
</style>
