6

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();
        }

    });
});
5
  • I found this because I'm trying to solve a similar problem. How do you avoid having it strip all content, i.e. keeping the font and font color?
    – Kevin
    Mar 18, 2011 at 18:26
  • So you want CodeReview.StackExchange.com or what?
    – random
    Mar 18, 2011 at 20:30
  • Kevin, in your custom config.js, set "config.pasteFromWordRemoveFontStyles" to false. Check out the ckeditor api for other settings.
    – jbarreiros
    Mar 24, 2011 at 14:41
  • random, I did not know that site existed.
    – jbarreiros
    Mar 24, 2011 at 14:42
  • thanks, I hadn't seen that config setting! Also, it seems to be always 'paste from word' filtering for me right now, though I haven't tested it thoroughly, just with c.extraPlugins = "autogrow,resize,pastefromword"; Maybe adding it as an extraplugin makes it always take effect?
    – Kevin
    May 12, 2011 at 16:44

2 Answers 2

10

I'm trying to do something similar. I want a CKEditor instance which applies HTML cleanup rules contained in the pastefromword plugin to everything I paste (mostly snippets of web articles). At the moment this only happens in the following two cases:

  1. User clicks the 'paste from word' toolbar icon
  2. User pastes content copied from MS Word itself

In the second case, CKEditor looks for signs of MS Word formatting. It does this by testing whatever you paste against the following regular expression:

/(class=\"?Mso|style=\"[^\"]*\bmso\-|w:WordDocument)/

If there's a match, it will be cleaned up. Otherwise it will paste as normal.

Not wanting to edit the plugin code, or duplicate it. Here's what I've come up with, based on jbarreiros's code:

CKEDITOR.on('instanceReady', function(ev) {
    ev.editor.on('paste', function(evt) {    
        evt.data['html'] = '<!--class="Mso"-->'+evt.data['html'];
    }, null, null, 9);
});

I haven't tested extensively, but this appears to work as expected (CKEditor 3.6.2).

What the code does is it registers a new listener for the paste event, just like the Paste from Word plugin. When it receives the pasted HTML, it simply prepends an HTML comment containing one of the strings the Paste from Word plugin looks for. The listener has a priority of 9 to ensure it runs before the plugin which will trigger the actual cleaning (default priority of 10).

My solution is in this blog entry: http://www.keyvan.net/2012/11/clean-up-html-on-paste-in-ckeditor/

7
  • Awesome Keyvan! Simple and compact. Thanks for posting your solution.
    – jbarreiros
    Jan 24, 2012 at 15:34
  • This is a nice step forward. There are some inline styles creeping through still, but it's far better than what happens with default Ctrl+V.
    – Space
    Mar 12, 2012 at 12:37
  • 1
    Hey @Keyvan you should put the code in your answer just in case. I edited to add
    – Will
    Nov 19, 2012 at 17:11
  • Downvoted--answer is just a link. Please put the content of that link into this answer. Apr 2, 2013 at 21:30
  • 1
    Take that up with StackOverflow. In the meantime, linkrot happens, and as such, means that any answer that only contains a link isn't a good answer. See also: meta.stackexchange.com/questions/8231/… Apr 3, 2013 at 15:35
2

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.