Question

我正在从CKEditor4升级到CKEditor5。我希望拥有相同的工具栏配置，但我无法弄清楚如何添加剪贴板功能（复制，剪切，粘贴等）。

我正在尝试将它们添加到ckeditor5-build-balloon构建中。我尝试过几件不同的事情：

toastr.info('info');

我读过暗示 Essentials 插件包含剪贴板功能的内容，但我将它添加到build-config.js（@ ckeditor / ckeditor5-clipboard）以防万一......

我找不到任何显示如何将剪贴板工具添加到工具栏的示例。根据v4配置，我正在尝试这个设置：

npm install --save @ckeditor/ckeditor5-clipboard

我还尝试在BalloonEditor的实例用法中指定工具栏选项：

config: {
        toolbar: {
            items: [
                '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的Quick Start guide中阅读有关实现插件的更多信息。

你应该达到这样的目的：

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

1 个答案: