CKEditor - Change image source

Question

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();
        }
    });

+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, Apr 08 '11 at 09:47
Might be worth trying to `trigger('change')` on the editor, this worked for me in a custom TinyMCE piece I wrote. — Wesley Murch, Apr 08 '11 at 12:11
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, Apr 09 '11 at 08: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, Apr 10 '11 at 10:25

score 5 · Accepted Answer · edited Dec 17 '13 at 09:28

5

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

edited Dec 17 '13 at 09:28

Vito Gentile

13,336
9
61
96

answered Apr 10 '11 at 12:50

AlfonsoML

12,634
2
46
53

is there any way to unprotect the source of the editor when an image is added to it? – Chris Hough Aug 09 '12 at 05:26
I don't understand what you mean. You can get the HTML by calling editor.getData() – AlfonsoML Aug 09 '12 at 09:13
when you use the file browser to add an image to the content of the wysiwyg it disables the source button so you can no longer view source. is there anyway to override this? – Chris Hough Aug 09 '12 at 15:22
No, it doesn't do that and in any way that's totally unrelated to the original question. If you have that problem create your own question and provide as much detail as possible. – AlfonsoML Aug 09 '12 at 17:46
I thought it was related because of your statement "The src of images and href of links are protected in CKEditor to avoid browser bugs" + I did create a question. thanks for being such an AMAZING HELP. – Chris Hough Aug 09 '12 at 18:01

CKEditor - Change image source

1 Answers1

Linked