CODEWITHSUNDEEP
javascriptckeditor
Eth
Eth

Reputation: 240

CKeditor removes the image align attribute

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.

Upvotes: 2

Views: 4268

Answers (3)

Dylan
Dylan

Reputation: 811

As a quick fix (for those of you who don't want to dig into the CKEditor files) you can actually style the images with CSS even if there is no align or class added to the image with the * property.

example:

img[style*=left] { 
    float: left; 
    margin: 0px 20px 10px 0px; 
}

img[style*=right] { 
    float: right;
    margin: 0px 0px 10px 20px; 
}

You can use the [style*=] property to check the inline style="" attribute for the word 'left' or 'right' which gets applied to images by CKEditor, then style them any way you want. Clients will still use the alignment dropdown to select whether they want the image to float to the left or the right, so they won't notice any change at all.

We ran into the same issue as @Eth, however our entire ckEditor had been minified and was nearly uneditable. Hope this offers another solution!

Upvotes: 2

Rakesh
Rakesh

Reputation: 1

Make sure filter is "Full HTML", Limit allowed HTML Tags is unchecked, Convert media tags to mark ups is checked and in Filter processing order Convert Media tags to markup is at top. Voila it is done

Upvotes: 0

Eth
Eth

Reputation: 240

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://stackoverflow.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;
            }
        }
    });
});

Upvotes: 3

Related Questions