CKEditor is a great editor and the pastefromword plugin is very good. I'd like to have the filtering provided by the plugin applied to all pasted text. For example, when pasting from word, all fonts and sizes are stripped. This does not happen when pasting from an email.
That said, I came up with the following solution and posting it here to get some feedback. I'm wondering if I made it too complicated, or if there is an easier way. I kind of just copied the code from pastefromword/plugin.js.
via my custom config.js
...
CKEDITOR.config.pasteFromWordCleanupFile = '/pastefromword.js';
...
CKEDITOR.on( 'instanceReady', function( ev ) {
/**
* Paste event to apply Paste From Word filtering on all text.
*
* The pastefromword plugin will only process text that has tell-tale signs
* it is from Word. Use this hook to treat all pasted text as if
* it is coming from Word.
*
* This method is a slightly modified version of code found in
* plugins/pastefromword/plugin.js
*/
ev.editor.on( 'paste', function( evt ) {
var data = evt.data,
editor = evt.editor,
content;
/**
* "pasteFromWordHappened" is a custom property set in custom
* pastefromword.js, so that filtering does not happen twice for content
* actually coming from Word. It's a dirty hack I know.
*/
if( editor.pasteFromWordHappened ) {
// Reset property and exit paste event
editor.pasteFromWordHappened = 0;
return;
}
var loadRules = function( callback ) {
var isLoaded = CKEDITOR.cleanWord;
if( isLoaded ) {
callback();
}
else {
CKEDITOR.scriptLoader.load( CKEDITOR.config.pasteFromWordCleanupFile, callback, null, false, true );
}
return !isLoaded;
};
content = data['html'];
// No need to filter text if html tags are not presence, so perform a regex
// to test for html tags.
if( content && (/<[^<]+?>/).test(content) ) {
var isLazyLoad = loadRules( function(){
if( isLazyLoad ) {
editor.fire('paste', data);
}
else {
data[ 'html' ] = CKEDITOR.cleanWord( content, editor );
// Reset property or if user tries to paste again, it won't work
editor.pasteFromWordHappened = 0;
}
});
isLazyLoad && evt.cancel();
}
});
});
My solution is now in this blog entry: http://www.keyvan.net/2012/11/clean-up-html-on-paste-in-ckeditor/
Commenting on a old question: The issue at hand is not just word cleaning in CKEditor. Its also a matter of what the browser does when you ask for clip board content via javascript api. that differs heavily between IE, FF, Safari etc. Typically the non IE browsers will clean up the HTML themself, beofore giving the HTML to the browser. Thus removing a lot of formatting.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With