CKEditor5 Balloon Build - 工具栏的剪贴板项目

Question

我正在从 CKEditor4 升级到 CKEditor5。我想拥有与我们相同的工具栏配置，但我不知道如何添加剪贴板功能（复制、剪切、粘贴等）。

我正在尝试将它们添加到 ckeditor5-build-balloon 构建中。我尝试了一些不同的方法：

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 框架的Quick Start guide 中阅读有关实现插件的更多信息。

你应该实现这样的目标：