CKEditor: Custom HTML when inserting image

Question

I'm using CKEditor as a rich text editor for my website. On that site I also have a custom image manager that I use in CKEditor using the "filebrowserImageBrowseUrl" config parameter. This puts a "Browse Server" button in the image properties that lets me select a file from my image manager. This works just fine.

However, when I insert an image from my image manager and resize it in CKEditor this only adds a style attribute to the img tags. When people browse me website they will see the image as the size I want, but they also have to download a large amount of data, even if the image size is only a thumbnail.

My image manager has automatic resizing when you put a width and height as a query string to the image url.

How can I override the img tag CKEditor creates so that the selected width and height is put as query variables into the src attribute in the img tag in addition to the style attribute (so that CKEditor still knows which size the image has)?

I did find another question posted here: CKEditor: Customized HTML on inserting an image But the answers for that question doesn't seem to work since the width and height from that example contains the image's original size instead of the custom size. I've also debugged the various variables from those methods without finding the custom size.

So the question remains: How can I override CKEditor's output HTML to put an image's size as query variables as well as in the style attributes where CKEditor puts it by default?

UPDATE

To make all the comments below a bit more comprehensive, here's a condensed version:

CKEDITOR.on('instanceReady', function (ev) {
    var editor = ev.editor,
        dataProcessor = editor.dataProcessor,
        htmlFilter = dataProcessor && dataProcessor.htmlFilter;

    htmlFilter.addRules( {
        elements : {
            $ : function( element ) {
                // Output dimensions of images as width and height attributes on src
                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];

                        var imgsrc = element.attributes.src + "?width=" + width + "&height=" + height;

                        element.attributes.src = imgsrc;
                        element.attributes['data-cke-saved-src'] = imgsrc;
                    }
                }
            }
        }
    });
});

This code is run whenever the CKEditor generates the actual HTML, which happens when you either view the source by clicking the "Source" button, or by performing an HTTP POST of that page.

A small warning, though. The code above will keep appending the width and height query strings for each click on the "Source" button, or for each postback, so you might want to add some extra logic to filter out the width and height query strings before appending them to the src attribute.

AlfonsoML AlfonsoML · Accepted Answer · 2012-06-03T18:00:37

If you look at the Output HTML sample in your copy of CKEditor you can see how it uses the htmlFilter to change the images to put the dimensions in attributes. Based on that code you can write your own code so that it changes the url of the image.

And be careful: URLs are protected to avoid problems with the browsers, so modifying the "src" attribute might not be enough. Look at the properties of the object that you are modifying.

CKEditor: Custom HTML when inserting image

1 Answers