编程语言
首页 > 编程语言> > JavaScript-CKEditor 5粘贴为纯文本

JavaScript-CKEditor 5粘贴为纯文本

作者:互联网

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

我以这种方式尝试过,但这不起作用:

$(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而不是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,ckeditor5,javascript
来源: https://codeday.me/bug/20191025/1927155.html