Сбой пользовательской кнопки CKEditor 5 в компоненте Vue.js - PullRequest
Новая
       6

Сбой пользовательской кнопки CKEditor 5 в компоненте Vue.js

0 голосов
/ 19 мая 2019

Я реализую 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 где-либо еще в приложение.

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

1 Ответ

0 голосов
/ 20 мая 2019

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

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

...