CKeditor removes the image align attribute

Question

I have a CMS which uses ckeditor at its heart. I have just upgraded the version of ckeditor to the latest and now when you align an image left or right in the editor it puts in the inline style rather than the 'align' attribute.

While the inline style is not a problem I need the 'align' attribute to remain so that I can apply padding to images through CSS programmatically without needing to add styles to each image in the editor (as the users of the CMS would not be technically competent to do this).

I have been successful in making a function to find images with the style attribute and assigning an align attribute. Then updating the editor using 'setData' and when I 'getData' the update seems to remain. However, at somepoint during the save process it seems to remove this. Any ideas on where this is, or how to add both align and style align at the same time.

Eth Eth · Accepted Answer · 2013-08-21T11:01:43

After alot more Googling ironically I found the answer on here:

CKEditor align images instead of float

Why it didnt come up in searches I have no idea. This certainly did the trick, though I removed the lines relating to width and height and removed the replacement of the 'float' css attribute as this caused the WYSIWYG to not pickup the styling. Apart from that its all good!

UPDATE: I found there were instances where this didn't quite work with CKeditor 4 and found this small edition to the code fixed it.

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

See: http://vibhajadwani.wordpress.com/2011/07/18/how-to-remove-image-style-property-from-ckeditor/

So the complete code block is as follows:

CKEDITOR.on('instanceReady', function( ev )
{        
    // Ends self closing tags the HTML4 way, like <br>.
    // See: https://stackguides.com/questions/4466185/ckeditor-align-images-instead-of-float
    // Mod added for CKE 4
    // See: http://vibhajadwani.wordpress.com/2011/07/18/how-to-remove-image-style-property-from-ckeditor/
    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 align = match && match[ 1 ];

                        if( align )
                        {
                            element.attributes.align = align;
                        }
                    }

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

                return element;
            }
        }
    });
});

CKeditor removes the image align attribute

3 Answers