title: Updating CKEditor with setData leaves img tag with no src
body: <p>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.</p>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <p>I'm using getData and setData to change the content:</p>
  
  <pre><code>var emailSupport = {
  editorName: 'HtmlBody',
  getBodyText: function () {
      return CKEDITOR.instances[emailSupport.editorName].getData();
  },
  
  $getBodyText: function () {
      return $("&lt;div&gt;" + emailSupport.getBodyText() + "&lt;/div&gt;");
  },
  
  setBodyText: function (h) {
      CKEDITOR.instances[emailSupport.editorName].setData(h instanceof jQuery ? h.html() : h);
      return h instanceof jQuery ? h : $("&lt;div&gt;" + h + "&lt;/div&gt;");
  },
  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 &gt; 0)
          $emailLogo.show().replaceWith($img.addClass("emailLogo"));
      else {
          $emailLogo.fadeOut();
          alert('Could not find selected image');
      }
      emailSupport.setBodyText($h);
  }
  };
  </code></pre>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <p>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!</p>
  
  <p>The file paths are all virtual, but from the root: they all start /, eg:</p>
  
  <pre><code>&lt;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" /&gt;
  </code></pre>