CKEditor5 Balloon Build - Элементы буфера обмена для панели инструментов

Question

Я обновляюсь с CKEditor4 до CKEditor5.Я хочу иметь ту же конфигурацию панели инструментов, что и у нас, но не могу понять, как добавить функции буфера обмена (копировать, вырезать, вставить и т. Д.).

Я пытаюсь добавить их вckeditor5-build-balloon build.Я пробовал несколько разных вещей:

npm install --save @ckeditor/ckeditor5-clipboard

Я прочитал что-то, что подразумевает, что плагин Essentials включает в себя функции буфера обмена, но я добавляю его в build-config.js(@ ckeditor / ckeditor5-clipboard) на всякий случай ...

Я не могу найти примеров, показывающих, как добавить инструменты буфера обмена на панель инструментов.Основываясь на конфигурации v4, я пробую эту настройку:

config: {
        toolbar: {
            items: [
                'copy',
                'cut',
                'paste',
            ]
        },

Я также пытался указать параметры панели инструментов в моем случае использования BalloonEditor:

BalloonEditor
    .create( document.querySelector( '#editor' ), {
        toolbar: [ 'copy', 'cut', 'paste' ]
...

Но панель инструментовникогда не имеет никаких функций буфера обмена.Я понимаю, что есть новый «минималистский» подход к новой версии, и сочетания клавиш CTRL + C / V широко известны.Но похоже, что вы должны быть в состоянии включить их, верно?

Answer 1

@ckeditor/ckeditor5-clipboard не предлагает кнопки копирования, вырезания и вставки.Вы правы в том, что основная причина в том, что Ctrl + C / V / X широко известны.Но есть и другие причины - эти кнопки занимают драгоценное место на панели инструментов и ... вы все равно не можете вставить с помощью такой кнопки.

Например, проверьте, что будет делать CKEditor 4, если вы запуститедействие кнопки вставки (на самом деле вы можете видеть, что такой кнопки тоже нет на панели инструментов; мне пришлось вызывать ее с консоли):

Это потому, что доступ к буферу обмена ограничен по соображениям безопасности.Вы можете программно копировать / вырезать вещи (помещать содержимое в буфер обмена), но вы не можете вставить.В противном случае каждый веб-сайт может прочитать ваши скопированные данные.Не весело.

В любом случае, копировать / вырезать можно.И вы можете отобразить некоторые предупреждения, когда пользователь нажимает кнопку вставки.Если вы хотите этого, то вам нужно реализовать простой плагин:

import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';

import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials';
import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';

import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';

function ClipboardButtons( editor ) {
    addButton( 'copy', 'Copy' );
    addButton( 'cut', 'Cut' );
    addButton( 'paste', 'Paste' );

    function addButton( action, label ) {
        editor.ui.componentFactory.add( action, locale => {
            const view = new ButtonView( locale );

            view.set( {
                label: label,
                // Or use the 'icon' property.
                withText: true,
                tooltip: true
            } );

            view.on( 'execute', () => {
                if ( action === 'paste' ) {
                    alert( 'Sorry man, no can do!' );
                } else {
                    document.execCommand( action );
                }
            } );

            return view;
        } );
    }
}

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        plugins: [ Essentials, Paragraph, ClipboardButtons ],
        toolbar: [
            'copy', 'cut', 'paste'
        ]
    } )
    .then( editor => {
    } )
    .catch( err => {
        console.error( err.stack );
    } );

Подробнее о реализации плагинов можно прочитать в Кратком руководстве по CKEditor 5 Framework .

Вы должны достичь чего-то подобного: