How to remove image style property from CKEDITOR

Posted: July 18, 2011 in Javascript

Add this code in ckeditor/config.js.
Which will convert style property height, width and float to height=””, width=”” and align=””.

CKEDITOR.on('instanceReady', function (ev) {		
									  
// Ends self closing tags the HTML4 way, like <br>.
ev.editor.dataProcessor.htmlFilter.addRules(
    {
        elements:
        {
            $: function (element) {
                // Output dimensions of images as width and height
                if (element.name == 'img') {
                    var style = element.attributes.style;

                    if (style) {
                        // Get the width from the style.
                        var match = /(?:^|\s)width\s*:\s*(\d+)px/i.exec(style),
                        width = match && match[1];

                        // Get the height from the style.
                        match = /(?:^|\s)height\s*:\s*(\d+)px/i.exec(style);
                        var height = match && match[1];
						
						// Get the float from the style.
                        match = /(?:^|\s)float\s*:\s*(\w+)/i.exec(style);
                        var float = match && match[1];
						
                        if (width) {
                            element.attributes.style = element.attributes.style.replace(/(?:^|\s)width\s*:\s*(\d+)px;?/i, '');
                            element.attributes.width = width;
                        }

                        if (height) {
                            element.attributes.style = element.attributes.style.replace(/(?:^|\s)height\s*:\s*(\d+)px;?/i, '');
                            element.attributes.height = height;
                        }
						 if (float) {
                            element.attributes.style = element.attributes.style.replace(/(?:^|\s)float\s*:\s*(\w+)/i, '');
                            element.attributes.align = float;
                        }
						
                    }
                }



                if (!element.attributes.style)
                    delete element.attributes.style;

                return element;
            }
        }
    });
});
Advertisements
Comments
  1. lin says:

    thank you very much .
    it is help for me , but after I uploaded the image by ‘Image’ button
    the style still on the editor how do I remove it ?

    • vibhajadwani says:

      Are you checking image tag’s style? If yes try to debug all javascript code, 1st alert style and then height, width, float. If you are getting all variables right then it will work.

  2. Rob says:

    Everyone hitting this issue with CKEDITOR 4: Insert

    element.forEach = function(){}; element.writeChildrenHtml = function(){};

    those functions prevent writing the .width and .height attributes, instead if u did write on them they get deleted and the content gets written into the style attribute!!! I nearly freaked out on this 😉

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s