CKEditor

CKEditor.vue

<!-- Based on https://github.com/dangvanthanh/vue-ckeditor -->

<template>
    <div class="ckeditor">
        <textarea :id="id" :value="value"></textarea>
    </div>
</template>

<style scoped>
    .ckeditor {
        width: 100%;
        clear: both;
    }
</style>

<script>
    if (process.BROWSER_BUILD) {
        global.CKEDITOR_BASEPATH = '/admin/vendor/ckeditor/';
        require('ckeditor');
    }

    export default{
        props: {
            value: {
                type: String
            },
            config: {
                type: Object,
                default: () => {
                },
            },
            id: {
                type: String,
                default: 'editor'
            },
            height: {
                type: String,
                default: '200px',
            },
            toolbar: {
                type: Array,
                default: () => [
                    {name: 'styles', items: ['Format']},
                    {name: 'basicstyles', items: ['Bold', 'Italic', 'Strike', 'RemoveFormat']},
                    {
                        name: 'paragraph',
                        items: ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', 'Blockquote']
                    },
                    {
                        name: 'alignment',
                        items: ['JustifyBlock', 'JustifyRight', 'JustifyCenter', 'JustifyLeft']
                    },
                    {name: 'links', items: ['Link', 'Unlink']},
                    {name: 'insert', items: ['Image', 'EmbedSemantic', 'Table']},
                    {name: 'clipboard', items: ['Paste', 'PasteText', 'PasteFromWord']},
                ],
            },
            language: {
                type: String,
                default: 'en'
            },
            extraplugins: {
                type: String,
                default: 'image2,justify,uploadimage'
            },
            uploadUrl: String,
        },

        beforeUpdate () {
            if (this.value !== this.ckeditor.getData()) {
                this.ckeditor.setData(this.value)
            }
        },

        computed: {
            ckeditor(){
                return CKEDITOR.instances[this.id];
            }
        },

        mounted () {
            // Set config
            const ckeditorConfig = Object.assign({}, {
                // Define the toolbar: http://docs.ckeditor.com/#!/guide/dev_toolbar
                toolbar: this.toolbar,

                // Editor language
                language: this.language,

                // Editor height
                height: this.height,

                // Enabling extra plugins, available in the standard-all preset: http://ckeditor.com/presets-all
                extraPlugins: this.extraplugins,

                // Remove the default image plugin because image2, which offers captions for images, was enabled above.
                removePlugins: 'image',

                // Simplify the Image and Link dialog windows. The "Advanced" tab is not needed in most cases.
                removeDialogTabs: 'image:advanced;link:advanced',

                // Since we define all configuration options here, let's instruct CKEditor to not load config.js which it does by default.
                // One HTTP request less will result in a faster startup time.
                // For more information check http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-customConfig
                customConfig: '',

                // Reduce the list of block elements listed in the Format dropdown to the most commonly used.
                format_tags: 'p;h1;h2;h3;pre',

                // Define the list of styles which should be available in the Styles dropdown list.
                // If the "class" attribute is used to style an element, make sure to define the style for the class in "mystyles.css"
                // (and on your website so that it rendered in the same way).
                // Note: by default CKEditor looks for styles.js file. Defining stylesSet inline (as below) stops CKEditor from loading
                // that file, which means one HTTP request less (and a faster startup).
                // For more information see http://docs.ckeditor.com/#!/guide/dev_styles
                stylesSet: null,

                uploadUrl: this.uploadUrl,

            }, this.config);
            CKEDITOR.replace(this.id, ckeditorConfig);

            // Set value
            this.ckeditor.setData(this.value);

            // Handle on change
            this.ckeditor.on('change', () => {
                let ckeditorData = this.ckeditor.getData();
                if (ckeditorData !== this.value) {
                    this.$emit('input', ckeditorData)
                }
            })
        },

        destroyed () {
            if (!this.ckeditor) return;
            this.ckeditor.destroy()
        },

    }
</script>