Width and height of 0 in filter tags in IE8/IE9 [#716872]

Hi,

the values of width and height in the filter tag strangely result in 0 when using img_assist in Internet Explorer 8. This problem can be repeated as follows:

Insert an image using the img_assist popup
The image is shown in the TinyMCE editor with the correct dimensions (those I've specified in the popup)
Click on the "disable rich text" button
The values of width and height in the filter tag are 0 instead of the given dimensions
If you switch back to rich text an image of 0 by 0 pixels is shown

The same results can be obtained by saving the node and pressing the edit button again, now the images have dimensions of 0x0 as well.

This happens while using Internet Explorer 8 on Windows XP, with Firefox 3.6 under Ubuntu it works perfectly well. I haven't tried any other browsers so far. I think the problem can be found in the following piece of code in editor_plugin.js, for some reason this.width is 0, but I have no clue why.

ed.onBeforeGetContent.add(function(ed, data) {
        if (!data.save) {
          return;
        }
        jQuery.each(ed.dom.select('img', data.content), function(node) {
          if (this.name != 'mceItemDrupalImage') {
            return;
          }
          var inlineTag = '[img_assist|' + decodeURIComponent(this.alt) + '|align=' + this.align + '|width=' + this.width + '|height=' + this.height + ']';
          ed.dom.setOuterHTML(this, inlineTag);
        });
      });

Comment	File	Size	Author
#7	ie9fix-716872-6.patch	2.59 KB	k4v

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Comment #1

parkview CreditAttribution: parkview commented 29 July 2010 at 07:15

Yes, I am having the same issue as well.

When editing a node that contains img_assist/inline images with IE 8, the image width/height is reset to 0. If I then edit the HTML via TinyMCE and Firefox 2.0 or 3.6, all is well until you edit the page with IE 8. I have tried the patch listed here: http://drupal.org/node/293909#comment-3198536 but it caused the edited image to be deleted!

I am running the latest versions (not CVS) of Views, Inline, WYSIWYG, img_assist and image.

Thanks.

Comment #2

parkview CreditAttribution: parkview commented 29 July 2010 at 07:26

One more thing, I noticed this line in the change log: #304094 by toniw: Fixed image resizing in TinyMCE when using IE.

Looking through the support page: http://drupal.org/node/304094 I see that it was closed back in 2008. Could this or something like it have raised it's ugly head again for IE 8?

Comment #3

davidhk CreditAttribution: davidhk commented 19 December 2010 at 12:48

I found this bug is caused by a similar piece of code to that shown at the top of the page, but it's in img_assist.js in the img_assist\plugins directory:

  /**
   * Replace images with inline tags in content upon detaching editor.
   */
  detach: function (content, settings, instanceId) {
    var $content = $('<div>' + content + '</div>'); // No .outerHTML() in jQuery :(
    $('img.img-assist', $content).each(function(node) {
      var inlineTag = '[img_assist|' + decodeURIComponent(this.alt) + '|align=' + this.align + '|width=' + this.width + '|height=' + this.height + ']';
      $(this).replaceWith(inlineTag);
    });
    return $content.html();
  }

There are several mentions on the web of problems getting this.width and this.height in IE. Here's an edit that's fixed the problem for me:

  /**
   * Replace images with inline tags in content upon detaching editor.
   */
  detach: function (content, settings, instanceId) {
    var $content = $('<div>' + content + '</div>'); // No .outerHTML() in jQuery :(
    $('img.img-assist', $content).each(function(node) {
      var imgHeight = this.height;
      var imgWidth  = this.width;
      if ((imgHeight==0) && (imgWidth==0)){
        // browser is probably IE, which doesn't set values for
        // this.height and this.width
        if (this.outerHTML) {
          // Browser is IE. Try reading the height & width from the html
          var result = this.outerHTML.match(/\bheight=(\d*)\D/);
          if (result && result[1]) {
            imgHeight=result[1];
          }
          result = this.outerHTML.match(/\bwidth=(\d*)\D/);
          if (result && result[1]) {
            imgWidth=result[1];
          }
        }
      }
      var inlineTag = '[img_assist|' + decodeURIComponent(this.alt) + '|align=' + this.align + '|width=' + imgWidth + '|height=' + imgHeight + ']';
      $(this).replaceWith(inlineTag);
    });
    return $content.html();
  }