vue wangEditor 实现富文本编辑器组件

父组件 richText.vue

<template>
	<div>
		<div class="editorBox">
			<editor ref="editor" :catchData="catchData" :content="contentHTML"></editor>
		</div>
	</div>
</template>

<script type="text/javascript">
	import editor from '@/components/tempNews/editor.vue'
	export default {
		data() {
			return {
				contentHTML: '',
			}
		},
		components: {
			editor
		},
		methods: {
                    // 子组件里的内容
                    catchData(html) {
            	        console.log(html);
                    }
		}
	}
</script>

<style type="text/css" scoped="scoped">
	.editorBox { margin-bottom: 10px; }
</style>

子组件 editor.vue

<template>
	<div>
		<div id="editorMenu" class="menu"></div>
		<div id="editorBody" class="body"></div>
	</div>
</template>

<script type="text/javascript">
	import E from 'wangeditor'
	import { MessageBox } from 'element-ui';
	import { uploadPoster } from '@/assets/js/api'
	export default {