[vue] summernote 컴포넌트로 사용하기

<div>
    <summernote
    class="editor"
    name="editor"
    :model="input.content"    //summernote에 작성한 텍스트가 vue에서 정의한 input.content에 저장
    :height="'300'"
    :lang="'ko-KR'"
    :placeholder="i18n('index.post.content.placeholder')"
    @change="value => { input.content = value }"/>
</div>

//출처 :  https://github.com/StefanNeuser/vuejs2-summernote-component/blob/master/src/Summernote.js


export default {

    template: '<textarea id="summernote" :name="name"></textarea>',

    props: {
        model: {
            required: true,
        },

        name: {
            type: String,
            required: true,
        },

        height: {
            type: String,
            default: '150'
        },
        placeholder:{
            type: String,
        },
        lang:{
            type:String,
        }
    },

    mounted() {


        let config = {
            height: this.height,
            lang : this.lang,
            placeholder : this.placeholder,
        };

        let vm = this;

        config.callbacks = {

            onInit: function () {
                $(vm.$el).summernote("code", vm.model);
            },

            onChange: function () {
                vm.$emit('change', $(vm.$el).summernote('code'));
            },

            onBlur: function () {
                vm.$emit('change', $(vm.$el).summernote('code'));
            },
        };

        $(this.$el).summernote(config);

    },

}