CKEditor 5 粘贴为纯文本

Posted 2023-02-16

【中文标题】CKEditor 5 粘贴为纯文本

【英文标题】：CKEditor 5 paste as plain text

【发布时间】：2018-09-17 10:34:26

【问题描述】：

是否可以选择始终从剪贴板粘贴为纯文本？

我试过这样，但不起作用：

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

【参考方案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'  );