CODEWITHSUNDEEP
jqueryckeditor
Steve Owen
Steve Owen

Reputation: 2071

Updating CKEditor with setData leaves img tag with no src

I'm using jquery to change the mark-up in a CKEditor instance. Specifically I let someone select a logo from a select list in my form and then update the logo in the ckeditor with their choice.

The problem is, though, that the logo appears as a broken link. If I check the ckeditor source it's correct, and if I right-click the image and select Image Properties, it shows up correctly in the img dialog box, and if I then OK that dialog the image appears in the preview correctly.

If I use Firebug to check the img tag itself on the page, ckeditor has put the src into two data tags, data-cke-565-src (this name seems to change) and data-cke-saved-src. But the img itself no longer has a src property. When I use the Image Properties window to make the image appear correctly in the editor, the src property has returned.

I'm using getData and setData to change the content:

var emailSupport = {
editorName: 'HtmlBody',
getBodyText: function () {
    return CKEDITOR.instances[emailSupport.editorName].getData();
},

$getBodyText: function () {
    return $("<div>" + emailSupport.getBodyText() + "</div>");
},

setBodyText: function (h) {
    CKEDITOR.instances[emailSupport.editorName].setData(h instanceof jQuery ? h.html() : h);
    return h instanceof jQuery ? h : $("<div>" + h + "</div>");
},
refreshLogo: function (n, $h) {
    if (typeof $h === "undefined") $h = emailSupport.$getBodyText();
    var $emailLogo = $h.find("img.emailLogo");
    var $img = $("#" + n).clone().attr("id", null);
    if ($img.length > 0)
        $emailLogo.show().replaceWith($img.addClass("emailLogo"));
    else {
        $emailLogo.fadeOut();
        alert('Could not find selected image');
    }
    emailSupport.setBodyText($h);
}
};

This is a subset of the javascript I'm using but should be the pertinent stuff. The logos themselves are in the DOM of the page, but hidden, which is why I can grab them based on a GUID and replace the placeholder logo img with a copy of the image itself.

I've probably given you more code than I need to, because debugging setBodyText shows that the correct HTML is being passed to setData, so it seems clear ckeditor is stripping out the src property.

It seems to me that it's a bug, but I wondered if anyone had experienced this before, or had a work-around. I'm trying to avoid having to manually change the DOM after setData has been called, looking for any img tags without a src property and copying it from the data-cke-saved-src property, but that's the only workaround I can think of right now.

As an update, while writing this, I tried it with a few alternative files, and sometimes it works fine. It's consistent with the filename, working for one file, not for another, but I've not worked out what the difference between a working and broken image is!

The file paths are all virtual, but from the root: they all start /, eg:

<img width="160" data-cke-862-src="/Content/Logos/thumbs/w160_505_Logo.jpg.png" data-cke-saved-src="/Content/Logos/thumbs/w160_505_Logo.jpg.png" class="imagingThumb emailLogo" alt="505_Logo.jpg" />

Upvotes: 0

Views: 1581

Answers (1)

Steve Owen
Steve Owen

Reputation: 2071

Without any suggestion of a 'proper' solution, I just had to roll it myself, in a somewhat hacky way.

This is my replacement setBodyText function from above:

    setBodyText: function (h) {
    CKEDITOR.instances[emailSupport.editorName].setData(h instanceof jQuery ? h.html() : h, function () {
        // There seems to be a bug in CKEditor which is stripping out the logos/images when set
        // This callback code puts it back
        $("#cke_" + emailSupport.editorName + " iframe").contents().find("img").each(function() {
            var $img = $(this);
            if ($img.prop("src") == "") {
                $img.prop("src", $img.data("cke-saved-src"));
            }
        });
    });
    return h instanceof jQuery ? h : $("<div>" + h + "</div>");
},

I store the name of the editor, so I can use that to find the element on the page, which holds the iframe of the editor, and then look for any image, check for an empty src and put it back in again.

I've no idea why ckeditor is doing this (occasionally) but this has fixed things.

Upvotes: 0

Related Questions