CKEditor 5粘贴为纯文本

Question

是否有选项可以将剪贴板始终粘贴为纯文本？

我试过了，但那不管用：

$(document).ready(function () {

    ClassicEditor.create(document.querySelector('#text'), {
        toolbar: [
            'heading',
            'bold',
            'italic',
            'link',
            'bulletedList',
            'numberedList',
            'blockQuote',
            'undo',
            'redo'
        ]
    }).then(function (editor) {

        this.listenTo(editor.editing.view, 'clipboardInput', function (event, data) {
            // No log.
            console.log('hello');
        });

    }).catch(function (error) {

    });

});

clipboard-Clipboard.html

https://docs.ckeditor.com/ckeditor5/latest/api/clipboard.html

文档-document.html#事件-事件:粘贴

Answer 1

clipboardInput事件是在Document上触发的，而不是View上触发的。所以第一件事就是倾听正确的对象。

第二件事是确保插入到编辑器中的内容是纯文本。这可以通过两种方式实现：

• 从剪贴板上提取的HTML可以是“纯文本化”。但这很难。
• 我们可以从剪贴板上获取纯文本并将其插入编辑器中。然而，编辑器期望HTML被粘贴，所以您需要"HTMLize“这个纯文本。CKEditor 5为此提供了一个函数-- plainTextToHtml()。

要覆盖编辑器的默认行为，我们需要重写这个回调：https://github.com/ckeditor/ckeditor5-clipboard/blob/a7819b9e6e2bfd64cc27f65d8e56b0d26423d156/src/clipboard.js#L137-L158

要做到这一点，我们将监听同一个事件(具有更高的优先级)，执行所有相同的事情，但忽略剪贴板数据的text/html味道。最后，我们将调用evt.stop()来阻止默认侦听器被执行并破坏我们的任务：

import plainTextToHtml from '@ckeditor/ckeditor5-clipboard/src/utils/plaintexttohtml';

// ...

const clipboardPlugin = editor.plugins.get( 'Clipboard' );
const editingView = editor.editing.view;

editingView.document.on( 'clipboardInput', ( evt, data ) => {
    if ( editor.isReadOnly ) {
        return;
    }

    const dataTransfer = data.dataTransfer;

    let content = plainTextToHtml( dataTransfer.getData( 'text/plain' ) );

    content = clipboardPlugin._htmlDataProcessor.toView( content );

    clipboardPlugin.fire( 'inputTransformation', { content, dataTransfer } );

    editingView.scrollToTheSelection();

    evt.stop();
} );

编辑：

从CKEditor 27.0.0开始，代码已经更改(您可以在这里阅读更多关于它的https://ckeditor.com/docs/ckeditor5/latest/builds/guides/migration/migration-to-27.html#clipboard-input-pipeline-integration)。

import plainTextToHtml from '@ckeditor/ckeditor5-clipboard/src/utils/plaintexttohtml';
//...
const clipboardPlugin = editor.plugins.get( 'ClipboardPipeline' );
const editingView = editor.editing.view;

editingView.document.on( 'clipboardInput', ( evt, data ) => {
    if ( editor.isReadOnly ) {
        return;
    }
    const dataTransfer = data.dataTransfer;
    let content = plainTextToHtml( dataTransfer.getData( 'text/plain' ) );
    data.content = editor.data.htmlProcessor.toView( content );
                
    editingView.scrollToTheSelection();
}, { priority: 'high' } );

Answer 2

无任何进口：

.then(editor => {
                editor.editing.view.document.on('clipboardInput', (evt, data) => {
                    data.content = editor.data.htmlProcessor.toView(data.dataTransfer.getData('text/plain'));
                });
            })

在ckeditor剪贴板事件的文档中有完整的方法