[삭제대기] VUE + TOAST UI (에디터) #토스트 #에디터 #VUE

<template>
    <li>
        <label>{{ title }} <span v-if="required">*</span></label>
        <div class="input-box">
            <div id="editor"></div>
<!--            <editor
                ref="editor"
                :initialValue="value"
                :hideModeSwitch="true"
                :hooks="{addImageBlobHook : onUploadImage}"
                @change="changeContents"
                initialEditType="wysiwyg"" />-->
        </div>
    </li>
</template>
<script>

import '@toast-ui/editor/dist/toastui-editor.css';
import { Editor } from '@toast-ui/vue-editor';

export default {
    components: {Editor},

    props: {
        default: "",
        title: {
            required: true,
            default: ""
        },
        required: {
            default: true
        },
    },

    data(){
        return {
            value: this.default,
            editor: "",
        }
    },

    methods: {
        changeContents(e){
            if(this.editor)
                this.$emit("change", this.editor.getHTML());

            if(this.editor)
                console.log(this.editor.getHTML());
        },

        async uploadImage(blob){
            let formData = new FormData();

            formData.append("file", blob);

            return axios.post("/api/imageUpload", formData)
                .then(response => {
                    return response.data;
                });
        },

        async onUploadImage(blob, callback) {
            const url = await this.uploadImage(blob);

            callback(url, '');

            this.changeContents();

            return false;
        }
    },

    mounted() {
        let self = this;
        this.editor = new toastui.Editor({
            el: document.querySelector('#editor'),
            previewStyle: 'vertical',
            height: '500px',
            initialValue: this.value,
            initialEditType: "wysiwyg",
            options: {
                minHeight: '200px',
                language: 'en-US',
                useCommandShortcut: true,
                usageStatistics: true,
                hideModeSwitch: true,
                toolbarItems: [
                    ['heading', 'bold', 'image'],
                ]
            },
            toolbarItems: [
                ['heading', 'bold', 'image'],
            ],
            hooks: {
                addImageBlobHook: self.onUploadImage
            },
            events: {
                change: self.changeContents
            }
        });
    },

    watch: {
        value: function(value, oldValue) {
            this.$emit("change", value);
        }
    }
}
</script>