Forums/Enterprise TinyMCE/Enterprise TinyMCE Forum

Answered

TinyMCE in IE8 doesn't tolerate bad HTML very well

Glen Dinsmore
asked this on July 08, 2011 07:08 PM

Here is the issue. The attached html segment (ProdNotice.html) was somehow entered into a TinyMCE entry area.  I was able to duplicate this simply by opening the html segment in Firefox 3.6, selecting the entire page, and pasting it into the TinyMCE entry area.

If you look at the html file carefully, you'll notice that it's not correct HTML.  Specifically, it appears that one line of text was deleted in the middle, leaving two elements that never get closed.

This is what it looks like:

<p><strong><span style="font-family: 'Trebuchet MS'; mso-bidi-font-family: Arial; mso-bidi-font-style: italic;">

This is what it probably should have looked like:

<p><strong><span style="font-family: 'Trebuchet MS'; mso-bidi-font-family: Arial; mso-bidi-font-style: italic;">Some text here</span></strong>

The effect this little mistake has is pretty dramatic in IE 8.  If you open the text in TinyMCE, press the full screen button, and then go back to regular mode, all of the text becomes centered.  I was able to duplicate this easily on IE8.  It didn't work for me on FF 3.6.  I didn't try any other browsers yet.

My question is this:  Doesn't TinyMCE check the HTML as it's rendering it?  Why doesn't it handle incorrect HTML like this better?  Can it be corrected?

Secondarily, I would also like to know if it's possible for TinyMCE to generate this broken HTML, not counting the user manually modifying the HTML (we don't offer that option, so if they manually changed the HTML they didn't do it from inside of TinyMCE).  Maybe it's a known issue that has since been fixed?

Thanks!

 

Comments

User photo
Brett Henderson
Ephox

Hi Glen,

I tried pasting in the HTML you provided into the Source Editor in TinyMCE 3.4.2 in both Safari (OSX) and IE 8 (Win7). The HTML snippet below, located between "From the Office of General Counsel" and "This notice is intended to advise you that a Legal Hold regarding"

<p><strong><span style="font-family: 'Trebuchet MS'; mso-bidi-font-family: Arial; mso-bidi-font-style: italic;">

 was returned as the following HTML when I reopened the Source Editor.

<p style="margin: 0in 0in 0pt; text-align: center; mso-layout-grid-align: none;" align="center"><strong><span style="font-size: 10pt; mso-bidi-font-family: Arial; mso-bidi-font-style: italic;">&nbsp;</span></strong></p>

In addition, switching to fullscreen and back didn't have any affect.

I'd suspect there is something in your config that may have ensure that the HTML cleanup didn't occur.

With respect to TinyMCE generating incorrect HTML, if you remove the ability for users to enter it themselves, then you shouldn't see this issue. That said, as I mentioned, it's possible the configuration you are using may have something to do with what you saw.

Cheers,

Brett

July 10, 2011 06:49 PM
User photo
Glen Dinsmore
PSS Systems
Check Answer

Ahh, yes.  Turns out that "paste_auto_cleanup_on_paste" is disabled.  Now I'm wondering why we did that.  Unfortunately, the person that last worked on TinyMCE in our application isn't available.  I'm going to have to re-enable that option, and see what breaks.

Any thoughts on why the issue I described above would happen only with certain browsers, and then only when switching between full screen and regular mode?

Thanks again.

July 12, 2011 12:58 PM
User photo
Brett Henderson
Ephox

Hi Glen,

  Are you working with the IBM WCM dev team?

Cheers,
Brett

July 12, 2011 11:05 PM
User photo
Glen Dinsmore
PSS Systems

IBM Atlas Suite dev team, actually.

July 13, 2011 09:35 AM
User photo
Glen Dinsmore
PSS Systems

OK... I was too quick declaring victory.  I enabled paste_auto_cleanup_on_paste, and I still get the same problem.  Here is my exact init:

tinyMCE.init({
    mode : "exact",
    theme : "advanced",
    inline_styles : false,
    elements:"noticeContent",
    plugins : "table,paste,spellchecker,searchreplace,print,fullscreen,visualchars,nonbreaking,inlinepopups,autofill",
 
    theme_advanced_buttons1 : "fullscreen,search,spellchecker,|,bullist,numlist,|,outdent,indent,|,undo,redo,|,tablecontrols,|,hr,removeformat",
    theme_advanced_buttons2 : "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,formatselect,fontselect,fontsizeselect,forecolor,backcolor,nonbreaking,charmap,|,link,unlink",
    theme_advanced_buttons3: "",
    theme_advanced_toolbar_location : "top",
    theme_advanced_toolbar_align : "left",
    theme_advanced_statusbar_location : "bottom",
    theme_advanced_resizing : true,
    theme_advanced_resizing_use_cookie : 0,
    theme_advanced_resize_horizontal : true,
    theme_advanced_path: false,
    relative_urls : false,
    paste_auto_cleanup_on_paste: true,
    paste_convert_middot_lists: false,
    paste_retain_style_properties:"padding,padding-left,padding-right,padding-top,padding-bottom,margin,,margin-left,margin-right,margin-top,margin-bottom,font-family,text-indent,font-size,color,background,border,border-collapse,border-style,border-color,border-width,border-top,border-bottom,border-left,border-right",
    convert_fonts_to_spans: true,
    font_size_style_values : "8pt,10pt,12pt,14pt,18pt,24pt,36pt",
    spellchecker_languages : "+English=en-us,German=de-de",
    spellchecker_rpc_url    : "/PolicyAtlas/jmyspell-spellchecker",
    external_image_list_url : "/PolicyAtlas/tiny_mce/imagelist.jsp",
    valid_elements : '@[id|class|style|title|dir<ltr?rtl|lang|xml::lang|onclick|ondblclick|onmousedown|onmouseup|onmouseover|onmousemove|onmouseout|onkeypress|onkeydown|onkeyup],a[rel|rev|charset|hreflang|tabindex|accesskey|type|name|href|target|title|class|onfocus|onblur],strong/b,em/i,strike,u,style,#p[style|dir|class|align],-ol[type|compact],-ul[type|compact],-li,br,img[longdesc|usemap|src|border|alt=|title|hspace|vspace|width|height|align],-sub,-sup,-blockquote[cite],-table[border|cellspacing|cellpadding|width|frame|rules|height|align|summary|bgcolor|background|bordercolor],-tr[rowspan|width|height|align|valign|bgcolor|background|bordercolor],tbody,thead,tfoot,#td[colspan|rowspan|width|height|align|valign|bgcolor|background|bordercolor|scope],#th[colspan|rowspan|width|height|align|valign|scope],caption,-div,-span,-code,-pre,address,-h1,-h2,-h3,-h4,-h5,-h6,hr[size|noshade],-font[face|size|color],dd,dl,dt,cite,abbr,acronym,del[datetime|cite],ins[datetime|cite],object[classid|width|height|codebase|*],param[name|value],embed[type|width|height|src|*],script[src|type],map[name],area[shape|coords|href|alt|target],bdo,button,col[align|char|charoff|span|valign|width],colgroup[align|char|charoff|span|valign|width],dfn,fieldset,form[action|accept|accept-charset|enctype|method],input[accept|alt|checked|disabled|maxlength|name|readonly|size|src|type|value|tabindex|accesskey],kbd,label[for],legend,noscript,optgroup[label|disabled],option[disabled|label|selected|value],q[cite],samp,select[disabled|multiple|name|size],small,textarea[cols|rows|disabled|name|readonly],tt,var,big',
    init_instance_callback: "initInstanceCallback"
});

 

I've also refined the HTML to the minimum that will duplicate the problem.  Turns out, the HTML is actually valid.  Here it is:

<p style="text-align: center" align="center">From the Office of General Counsel</p>
<span>
<p style="text-align: center" align="center">&nbsp;</p>
</span>
<p>Step 1: You must read and understand this Notice of Legal Hold.</p>

 

If I replace the <span> and </span> with <p> and </p> then this problem does not occur.  Is there some special problem with span?  Maybe my valid_elements value is contributing to the problem?

Thanks

July 13, 2011 06:19 PM
User photo
Glen Dinsmore
PSS Systems

More details.  I captured the DOM using IE's Developer Tools.  This is what it looks like at the different steps:

 

Just pasted:

<P style="TEXT-ALIGN: center" align=center _mce_style="text-align: center;">From the Office of General Counsel</P>
<P><SPAN>
<P style="TEXT-ALIGN: center" align=center _mce_style="text-align: center;">&nbsp;</P></SPAN></P>
<P>Step 1: You must read and understand this Notice of Legal Hold.</P>

Maximized:

<P align=center _mce_style="text-align: center;">From the Office of General Counsel</P>
<P><SPAN>
<P align=center _mce_style="text-align: center;">&nbsp;</P></SPAN></P>
<P>Step 1: You must read and understand this Notice of Legal Hold.</P>

Restored:

<P align=center _mce_style="text-align: center;">From the Office of General Counsel
<P></P>
<P><SPAN>
<P align=center _mce_style="text-align: center;">&nbsp;
<P></P>
<P></P>
<P>Step 1: You must read and understand this Notice of Legal Hold.
<P></P></P></P></SPAN></P></P>

 

I just noticed the init callback.  It looks like this:


function initInstanceCallback(inst) {
 
    if ($('noticeContent_resize') != null)
    {
        $('noticeContent_resize').href = '#';
    }
    
    tinymce.dom.Event.add(inst.getWin(), 'resize', function(e) {
        
    });
}

July 13, 2011 06:46 PM
User photo
Michael Fromin
Ephox

Glen - 

As this has been moved to a support ticket I am going to close this forum posting to further comments.  We look forward to working with you on this issue via the support ticket.

 

July 15, 2011 01:11 PM
Topic is closed for comments