CKEditor: Apply removeFormat on paste

Question

I have successfully managed to set up an on paste event to capture the HTML pasted into the text area as it is pasted.

I need to automatically apply the removeFormat command to that HTML before or at the time it is pasted into the text area, so that I can strip it of classes, various tags, and other attributes. Could somebody point me in the right direction to apply the removeFormat command correctly?

Here's my code so far:

$(function(){
        $('textarea').ckeditor(
            function( textarea ){
                var editor = this;
                editor.on('paste', function( e ) { 
                    //alert(e.data.html); // This shows the HTML
                    editor.execCommand( 'removeFormat', e.data.html ); // Doesn't seem to do anything, HTML is pasted with the attributes intact
                    });              
            }
        )
    });

Thanks!

P.S. Force plain text option is not viable as there are some HTML elements I wish to keep (p,table and others).

Answer 1

You can use

config.forcePasteAsPlainText = true;

cf http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html

Answer 2

You need to select the content before you can apply removeFormat to it.

You could try grabbing the range ( even if it's just the cursor sitting at the insertion point ) and saving a bookmark before you paste.

After you paste, use the bookmark to select that range again.

That should select everything that you pasted between the start and end of the range.

Then you can use removeFormat:

editor.execCommand( 'removeFormat', editor.selection );

Here are the links to the range and selection API pages:

http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.dom.range.html

http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.dom.selection.html

I've found it easier to work with ranges, the createBookmark method is good because it sets markers and you can grab the correct start and end points even if the DOM changes ( as it will when you paste in the new content ). You can use moveToBookmark() after the paste to select the range.

http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.dom.range.html#createBookmark

Because the documentation is sparse, I've found it helpful to search the source code for places where the methods are called. Looking at how they're used gives me a better idea of what kind of object I need to apply the methods to.

Be Well, Joe

Answer 3

Starting from CKEditor 4.1 there is no need to do custom coding to define the list of elements that should be kept when pasting data into CKEditor, Advanced Content Filter should do the trick.

Either leave ACF enabled with the default configuration - CKEditor will accept all tags that can be created with it, or define your own set of rules with more or less strict set of allowed tags/attributes/styles. See documentation