CKEditor 5粘贴为纯文本 [英] CKEditor 5 paste as plain text

问题描述

是否可以将剪贴板中的所有内容始终粘贴为纯文本格式？

Is there an option to paste always from the clipboard as plain text?

我尝试过这种方法，但这不起作用：

I tried it that way, but that does not work:

$(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) {

    });

});

https://docs.ckeditor.com/ckeditor5/latest/api/module_clipboard_clipboard-Clipboard.html

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

https://docs.ckeditor.com/ckeditor5/latest/api/module_engine_view_document-Document.html#event-event:paste

推荐答案

clipboardInput 事件在 Document ，而不是 视图 。因此，第一件事就是监听正确的对象。

The clipboardInput event is fired on the Document, not the View. So the first thing will be to listen on the right object.

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

The second thing is ensuring that the content inserted into the editor is a plain text. This can be done in two ways:

• 从剪贴板中获取的HTML可以纯文本格式。但这很难。


• 我们可以从剪贴板中获取纯文本并将其插入编辑器中。但是，编辑器希望粘贴HTML，因此您需要 HTMLize此纯文本。 CKEditor 5为此提供了一个功能– plainTextToHtml（） 。

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

To override the editor's default behaviour we'll need to override this callback: https://github.com/ckeditor/ckeditor5-clipboard/blob/a7819b9e6e2bfd64cc27f65d8e56b0d26423d156/src/clipboard.js#L137-L158

要做到这一点，我们会听同样的话事件（具有更高的优先级），请执行所有相同的操作，但是忽略剪贴板数据的 text / html 风格。最后，我们将调用 evt.stop（）阻止默认监听器被执行并破坏我们的工作：

To do that, we'll listen to the same event (with a higher priority), do all the same things, but ignore text/html flavour of the clipboard data. Finally, we 'll call evt.stop() to block the default listener from being executed and ruining our job:

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 5粘贴为纯文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！