Teaser Break and Image Assist plugins dropping trailing slashes (XHTML vs HTML)
eezz - July 5, 2009 - 07:36
| Project: | Wysiwyg |
| Version: | 6.x-2.0 |
| Component: | Plugins |
| Category: | bug report |
| Priority: | normal |
| Assigned: | TwoD |
| Status: | needs review |
Jump to:
Description
Hi,
I am trying to find out what might be causing the /> to be changed to > on image tags when I enable the Teaser break plugin.
I discovered the problem and narrowed down the issue in this post: http://drupal.org/node/504946.
I don't know enough about what is contributing to changing the tag, but as an experiment, I commented out this in the break.js.
/**
* Replace images with tags in content upon detaching editor.
*/
detach: function(content, settings, instanceId) {
var $content = $('<div>' + content + '</div>'); // No .outerHTML() in jQuery :(
// #404532: document.createComment() required or IE will strip the comment.
// #474908: IE 8 breaks when using jQuery methods to replace the elements.
// @todo Add a generic implementation for all Drupal plugins for this.
$.each($('img.wysiwyg-break', $content), function (i, elem) {
elem.parentNode.insertBefore(document.createComment('break'), elem);
elem.parentNode.removeChild(elem);
});
return $content.html();
},Now the img tags are valid xhtml as the /> is not removed, but of course the break comment is not rendered.
Please let me know if you need any more info.
Cheers, eezz.
#1
Hm. The question is, what exactly triggers the bug.
Is it
var $content = $('<div>' + content + '</div>'); // No .outerHTML() in jQuery :(...
return $content.html();
or is it
$.each($('img.wysiwyg-break', $content), function (i, elem) {elem.parentNode.insertBefore(document.createComment('break'), elem);
elem.parentNode.removeChild(elem);
});
or is it
elem.parentNode.insertBefore(document.createComment('break'), elem);elem.parentNode.removeChild(elem);
?
#2
Hi sun, I commented out those items individually to narrow it down.
var $content = $('<div>' + content + '</div>'); // No .outerHTML() in jQuery :(...
return $content.html();
Commenting out that one breaks the editor. The "source editor" popup is just blank.
$.each($('img.wysiwyg-break', $content), function (i, elem) {elem.parentNode.insertBefore(document.createComment('break'), elem);
elem.parentNode.removeChild(elem);
});
Commenting out this line still strips off the closing /
elem.parentNode.insertBefore(document.createComment('break'), elem);elem.parentNode.removeChild(elem);
Same result as above.
I don't have the skills to know what is going on here, but if there is anything else you think I should try, let me know.
Cheers, Ian
#3
Hi,
I tried it using the FCK Editor, thinking that would make a difference, of course the same issue occurs.
However, I have discovered that Drupal uses node_teaser() to put in the breaks anyway ;). I didn't know that because I am quite new to Drupal API.
So I can safely turn off the Teaser Break plugin and in the cases where I want to modify where the break goes I can input the break comment manually.
I guess that doesn't resolve the bug, but at least a work around.
Cheers, eezz
#4
I'll look into this. The Teaser Break plugin has so far proven to be a good issue bait, allowing us to catch a couple of "curiosities" which we hopefully can avoid in the future and I'd love to keep working with it. Keeping all output [Strict] XHTML is hard, especially since we don't always have precise control of how an editor or browser behaves, but we of course strive to do it as it's a requirement for many users.
We very much appreciate everyone finding, reporting and investigating bugs like these! I'll get right on it once I've had a couple of pancakes. Coding on an empty stomach just leads to more "curiosities" in my experience! =)
#5
So far I've found that
var $content = $('<div>' + content + '</div>'); // No .outerHTML() in jQuery :(is where the self closing tag is removed.Note: For me, the actual replacement didn't happen in break.js because I also had the Image Assist plugin enabled, which uses the same outerHTML trick.
It appears that jQuery (or rather the browser) does not treat the editor contents as XHTML but plain HTML. So any new markup passed into the DOM will come out as HTML, without the trailing slashes.
The only workaround I could find was supposedly to set the HTTP header content type to
application/xhtml+xml(includes/common.inc). Drupal now usestext/htmlfor compatibility reasons but at least the default themes should be XHTML compliant. That should tell the JavaScript engine to create XHTML markup instead.I tried changing this on my dev machine but ran into an undefined validation error which seemed to be in jquery.js. (The page displayed fine but scripts didn't run.) Btw, turn off the Drupal Firebug module if you're going to try this, it produces hundreds of
<font>tags and other nasty things which makes your browser choke!#6
Hi TwoD, thanks for investigating. If you need me to test anything, let me know. Given that Drupal adds a teaser break on its own (something that I didn't know until just the other day).
Cheers, eezz
#7
subs
#8
Could you please test the patches from #573878: Teaser break causes invalid HTML and #495828: In TinyMCE in IE7 Relative Links Become Absolute Links if Teaser Break is Enabled?