<template>
    <div>
        <ckeditor
                v-model="body"
                :editor="editor"
                :config="editorConfig">
        </ckeditor>
    </div>
</template>

<script>
    import CKEditor from '@ckeditor/ckeditor5-vue';
    import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
    import EssentialsPlugin from '@ckeditor/ckeditor5-essentials/src/essentials';
    import BoldPlugin from '@ckeditor/ckeditor5-basic-styles/src/bold';
    import LinkPlugin from '@ckeditor/ckeditor5-link/src/link';
    import MyCustomPlugin from '@/components/common/MyCustomPlugin';

    export default {
        components: {
            ckeditor: CKEditor.component,
        },
        data: function() {
            return {
                editor: ClassicEditor,
                editorConfig: {
                    plugins: [
                        EssentialsPlugin,
                        BoldPlugin,
                        LinkPlugin,
                    ],
                    extraPlugins: [MyCustomPlugin,],
                    toolbar: {
                        items: [
                            'bold',
                            'link',
                            'myCustomPlugin'
                        ]
                    }
                },

            };
        },
    };
</script>

import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
import imageIcon from '@ckeditor/ckeditor5-core/theme/icons/image.svg';
import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';

class MyCustomPlugin extends Plugin {
    init() {
        const editor = this.editor;

        editor.ui.componentFactory.add( 'myCustomPlugin', locale => {
            const view = new ButtonView( locale );

            view.set( {
                label: 'Insert image',
                icon: imageIcon,
                tooltip: true
            } );

            view.on( 'execute', () => {
                console.log('dispatch some event');
            } );

            return view;
        } );
    }
}

export default MyCustomPlugin;

"@ckeditor/ckeditor5-basic-styles": "^11.0.0",
    "@ckeditor/ckeditor5-dev-utils": "^12.0.1",
    "@ckeditor/ckeditor5-dev-webpack-plugin": "^8.0.1",
    "@ckeditor/ckeditor5-editor-classic": "^12.0.0",
    "@ckeditor/ckeditor5-essentials": "^11.0.0",
    "@ckeditor/ckeditor5-font": "^10.0.4",
    "@ckeditor/ckeditor5-highlight": "^11.0.0",
    "@ckeditor/ckeditor5-link": "^11.0.0",
    "@ckeditor/ckeditor5-paragraph": "^11.0.0",
    "@ckeditor/ckeditor5-vue": "^1.0.0-beta.1",