I have consistently run into a couple of issues with TinyMCE that I was hoping might be remedied in the newest TinyMCE release, but I haven't yet seen a resolution, so I thought that I might jump in here.
The code snippets below display the rendering of resized text blocks and empty paragraphs when using substitute "font_size_classes" in the tinyMCE.init script with "convert_fonts_to_spans" set to true.
To recreate the issue, what I do first is create a single text block, then change its font size, then change its color, and then change its font size once a again. I then hit the return key a few times in order to create white space and then type in a second text block.
As a side note, I have my style sheet set for paragraphs to render "margin:0px;padding:0px;" in order to maintain single line spacing between paragraphs, akin to the use of a <br /> tag.
This is what is rendered within the HTML code for each of the noted browsers:
Firefox and Safari - These two browsers, as seen below, don’t maintain nested span tags within the empty paragraphs, but interestingly reintroduce them once the next text block is input, albeit the tags appear after the text. This subsequently requires the second text block to be reformatted after being input and leaves a number of superfluous, empty nested tags within that paragraph:
<p><span class="fontSize5"><span style="color: #cfb369;"><span class="fontSize7">First text block.</span></span></span></p>
<p> </p>
<p> </p>
<p> </p>
<p>Second text block.<span class="fontSize5"><span style="color: #cfb369;"><span class="fontSize7"></span></span></span></p>
Chrome - Below you can see that the empty nested span tags are maintained within the second paragraph, but the lack of a non-breaking space tag effectively nullifies the intended white spacing of the second empty paragraph once the page is rendered. By the third paragraph, Chrome disposes of the empty span tags and substitutes a non-breaking space tag, but this also requires the second text block to be reformatted:
<p><span class="fontSize5"><span style="color: #cfb369;"><span class="fontSize7">First text block.</span></span></span></p>
<p><span class="fontSize5"><span style="color: #cfb369;"><span class="fontSize7"></span></span></span></p>
<p> </p>
<p> </p>
<p>Second text block.</p>
IE 7 and 8 - These two browsers consistently maintain the nested span tags, but without any non-breaking space tags, effectively nullifying all of the empty paragraphs when rendered on the finished page. The net result is that although there are three paragraphs separating the two text blocks, the final page rendering displays as if only a single <br /> tag exists between the text blocks:
<p><span class="fontSize5"><span style="color: #cfb369;"><span class="fontSize7">First text block.</span></span></span></p>
<p><span class="fontSize5"><span style="color: #cfb369;"><span class="fontSize7"></span></span></span></p>
<p><span class="fontSize5"><span style="color: #cfb369;"><span class="fontSize7"></span></span></span></p>
<p><span class="fontSize5"><span style="color: #cfb369;"><span class="fontSize7"></span></span></span></p>
<p><span class="fontSize5"><span style="color: #cfb369;"><span class="fontSize7"> Second text block.</span></span></span></p>
Is anybody aware of a way to auto-clean those nested span tags or at least auto-insert a consistent non-breaking space tag within the empty paragraphs? I hope this information will help also others.