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
解决方法:
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