Пользовательская кнопка CKEditor 5 не работает в компоненте Vue.js

Я реализую CKEditor5 из исходного кода в своем приложении Vue. Я использую ckeditor5-editor-classic (следуя это руководство) и хотите добавить пользовательскую кнопку.

Я следовал этому руководству и создал простой плагин для console.log одним нажатием кнопки. Это прекрасно работает.

Проблема: в момент включения моего пользовательского плагина плагины Link и Table начинают работать неправильно, что похоже на проблему с позиционированием CSS (отображает поле ссылки внизу страницы).

Мой компонент выглядит так:

<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>

Мой файл vue.config.js соответствует руководству. Мой пользовательский плагин выглядит так:

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;

package.json выглядит так:

    "@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",

Единственное указание, которое у меня есть, это то, что когда ButtonView не включен, ссылка работает правильно.

В противном случае никаких сообщений об ошибках. Я не включал ckeditor5-build-classic больше нигде в приложении.

Я потратил несколько дней на эту проблему и перепробовал все, что может предложить Интернет, но, похоже, не могу найти пути вперед. Любая помощь будет оценена по достоинству!


person Max Kehayov    schedule 19.05.2019    source источник
comment
plugincollection-load: Не удалось загрузить плагин. ошибка   -  person Neha    schedule 09.01.2020


Ответы (1)


Обновление зависимостей решило эту проблему благодаря быстрому ответу здесь.

Мальчики и девочки, обновляйте свои зависимости. :)

person Max Kehayov    schedule 20.05.2019
comment
Как создать событие внутри MyCustomPlugin? - person Caio Kawasaki; 24.05.2019
comment
Я прикрепляю пользовательское событие к документу и добавляю прослушиватель событий в хук жизненного цикла created() в компоненте Vue. Только не забудьте удалить обработчик событий на хуке жизненного цикла beforeDestroy, чтобы предотвратить утечку памяти: view.on( 'execute', () => { var event = new Event('eventName'); document.dispatchEvent(event); } ) - person Max Kehayov; 24.05.2019
comment
А по поводу кастомной иконки .svg, как настроить vue.config.js? - person Caio Kawasaki; 24.05.2019