I have made some custom functionality to the CKEditor. In short, it shows a div tag with 5 links, for Small, Medium, Large X-Large and Original size.

When I click the links, it changes the SRC attribute of the image to the correct size.

It works, but it doesn't persist back to the editor. It's like the Image i get through the click event target, is not part of the Source code.

How can I change the Source code, when manipulating with the elements in the editor?

My code looks like this:

$(target).ckeditor(function (editor) {
    $(this.document.$).bind("click", function (event) {
        var target = $(event.target);

        if (target.is("img")) {
            var p = $("<div contenteditable='false' class='image-properties'>" + Milkshake.Resources.Text.size + ": <a class='sizeLink' href='#size1Img'>S</a>&nbsp;<a class='sizeLink' href='#size2Img'>M</a>&nbsp;<a class='sizeLink' href='#size3Img'>L</a>&nbsp;<a class='sizeLink' href='#size4Img'>XL</a>&nbsp;<a class='sizeLink' href='#size5Img'>Org.</a></div>");
            p.css("top", target.position().top);

            var regex = new RegExp(/(size\d{1}img)/i);
            var match = regex.exec(target.attr("src"));

            if (match != null) {
                var imgSrize = match[0];
                p.find("a[href=#" + imgSrize + "]").addClass("selected");
            }

            p.delegate("a", "click", function (e) {
                var link = $(e.target);

                if (!link.is(".selected")) {
                    $(".selected", link.parent()).removeClass("selected");
                    link.addClass("selected");

                    var imageSrc = target.attr("src");
                    imageSrc = imageSrc.replace(/(size\d{1}img)/i, link.attr("href").substring(1));

                    target.attr("src", imageSrc);
                    target.css("width", "");
                    target.css("height", "");
                }

                e.preventDefault();
            });

            p.insertAfter(target);
        } else if (!target.is("div.image-properties")) {
            $("div.image-properties", target.parent()).remove();
        }
    });

I have made some custom functionality to the CKEditor. In short, it shows a div tag with 5 links, for Small, Medium, Large X-Large and Original size.

When I click the links, it changes the SRC attribute of the image to the correct size.

It works, but it doesn't persist back to the editor. It's like the Image i get through the click event target, is not part of the Source code.

How can I change the Source code, when manipulating with the elements in the editor?

My code looks like this:

$(target).ckeditor(function (editor) {
    $(this.document.$).bind("click", function (event) {
        var target = $(event.target);

        if (target.is("img")) {
            var p = $("<div contenteditable='false' class='image-properties'>" + Milkshake.Resources.Text.size + ": <a class='sizeLink' href='#size1Img'>S</a>&nbsp;<a class='sizeLink' href='#size2Img'>M</a>&nbsp;<a class='sizeLink' href='#size3Img'>L</a>&nbsp;<a class='sizeLink' href='#size4Img'>XL</a>&nbsp;<a class='sizeLink' href='#size5Img'>Org.</a></div>");
            p.css("top", target.position().top);

            var regex = new RegExp(/(size\d{1}img)/i);
            var match = regex.exec(target.attr("src"));

            if (match != null) {
                var imgSrize = match[0];
                p.find("a[href=#" + imgSrize + "]").addClass("selected");
            }

            p.delegate("a", "click", function (e) {
                var link = $(e.target);

                if (!link.is(".selected")) {
                    $(".selected", link.parent()).removeClass("selected");
                    link.addClass("selected");

                    var imageSrc = target.attr("src");
                    imageSrc = imageSrc.replace(/(size\d{1}img)/i, link.attr("href").substring(1));

                    target.attr("src", imageSrc);
                    target.css("width", "");
                    target.css("height", "");
                }

                e.preventDefault();
            });

            p.insertAfter(target);
        } else if (!target.is("div.image-properties")) {
            $("div.image-properties", target.parent()).remove();
        }
    });

• javascript
• ckeditor

• 2 +1 I like tough CKEditor questions, although I don't know the answer. Maybe @AlfonsoML will see it, he's a CKEditor developer and pretty active here. – Pekka Commented Apr 8, 2011 at 9:47
• 1 Might be worth trying to trigger('change') on the editor, this worked for me in a custom TinyMCE piece I wrote. – No Results Found Commented Apr 8, 2011 at 12:11
• 1 @Madmartigan Didn't work. Damn. – MartinHN Commented Apr 8, 2011 at 15:49
• 2 Sorry, I can't understand that jQuery code, but if you use Firebug you'll see that images have their src protected (to avoid all the browser bugs) with something like data-ckeditor-src – AlfonsoML Commented Apr 9, 2011 at 8:51
• @AlfonsoML - you deserve the points for the correct answer. The attribute was called 'data-cke-saved-src', and now it works. Damn I missed that - but please write your answer so I can accept it :) – MartinHN Commented Apr 10, 2011 at 10:25

1 Answer 1

The src of images and href of links are protected in CKEditor to avoid browser bugs (when copying, dragging or sometimes even just loading the content), so you must update also this custom attribute:

data-cke-saved-src