该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-管道集成)
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' } );