vue中组件形式引入wangEditor

组件wangEditor

<template>

    <div>
        <div id="wangEditor" ref="editorElem" style="text-align:left" v-html="editContent"></div>
    </div>


</template>

<script>
    import E from 'wangeditor'

    export default {

        name: 'wangEditor',

        data() {
            return {
                content: '',
                editor:''
            }
        },

        props: ['addContent', 'editContent'],    //接收父组件的对象

        methods:{
            test(){
                this.editor = new E('#wangEditor');

                this.editor.customConfig.onchange = (html) => {
                    this.content = html;
                    this.addContent(this.content);
                };

                this.editor.create();
            }

        }
    }

</script>

<style lang="css">

</style>

父组件中引用

<template>
    <div id="footerBarSetting">
        <wangEditor v-if="bottomMessDialogVisible" ref="initWangEditor"></wangEditor>
    </div>
</template>

<script>
	import wangEditor from "../wangEditor/wangEditor";

	export default {
		components: {
			wangEditor
		},
		data() {
			return {

			}
		},
		monted(){
            this.$refs.initWangEditor.test();
		}
	}
</script>