vue2封装WangEdtior组件

一、封装组件

<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"
            @onChange="onChange"
            :defaultConfig="editorConfig"
            :mode="mode"
            @onCreated="onCreated"
        />
    </div>
</template>

<script>
    import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
    import Vue from 'vue';
    import { API_URL } from '@/utils/request'
    export default Vue.extend({
    components: { Editor, Toolbar },
    props:['content'],
    data() {
        return {
            editor: null,
            html: '<p>hello</p>',
            toolbarConfig: { },
            api_url:API_URL,
            editorConfig: {
                 placeholder: '请输入内容...',
                 MENU_CONF:{
                    uploadImage:{
                        server: this.api_url+'/api/upload2.php'
                    }
                 }
            },
            mode: 'default', // or 'simple'
        }
    },
    methods: {
        onCreated(editor) {
            this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
        },
        onChange(){
            console.log(this.html);
            this.$emit('update:content',this.html);
        }
    },
    watch:{
        content:{
            handler(){
                console.log(this.content);
               this.html=this.content;
            },
            immediate:true
        }
    },
    beforeDestroy() {
        const editor = this.editor
        if (editor == null) return
        editor.destroy() // 组件销毁时，及时销毁编辑器
    }
})
</script>
<style src="@wangeditor/editor/dist/css/style.css"></style>

 

二、使用组件

 <wang-edtior v-if="dialogVisible" :content.sync="form.content"></wang-edtior>