javascript - CKEditor: Apply removeFormat on paste - Stack Overflow

admin管理员组

文章数量:1189210

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).

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).

• javascript
• ckeditor

Share Improve this question Follow asked Aug 30, 2011 at 15:53 MateoMateo 1,27122 gold badges1212 silver badges1919 bronze badges 1

• 3 Any chance you could share how you solved this in the end? I've tried reading the various docs and the links provided in the accepted answer but just can't seem to figure out how to select the text and apply the removeFormat command to it. – Jens Wegar Commented Feb 6, 2012 at 11:06

Add a comment  | 

3 Answers 3

Sorted by: Reset to default 26

You can use

config.forcePasteAsPlainText = true;

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

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

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

本文标签： javascriptCKEditor Apply removeFormat on pasteStack Overflow