是否可以选择始终从剪贴板粘贴为纯文本?
我这样试过,但是不行:
$(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
最佳答案
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' } );
关于javascript - CKEditor 5 粘贴为纯文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49709031/