The WYSIWYG editor deletes empty em, strong, b, i tags

[hali6sic6]

I recently was working on a clients website and used a span tag to insert an image true CSS and after I viewed the content in visual and switched in html mode all my empty span tags ware gone..

I was able to reproduce this. It seems to only happen when switching between visual and text tabs. If you edit in text and add <span></span> the publish/update it does save the tag.

Thank you I changed the editor but this is a problem that needs to be solved at some point. I will be glad to help out it seams that the general editor has issues rendering the HTML visual. I just found another problem with the <tr> tag if you put a space like < tr> it will change it to "&lt;tr &gt;" I'm not sure if this is a bug.. I know writing code on the page directly is not the right way but I'm forced to do it sometimes...

Yes, TinyMCE treats all empty elements that don't have meaning in html as empty space, same as browsers treat them. <span></span>, <div></div>, even <p></p> are not displayed in the browser. If they have any attributes, they are not removed.

< tr> is invalid html, you can't have a space after the opening <. You can have space before the closing >, so <tr > is valid and works as expected.

Replying to azaozz:

<span></span>, <div></div>, even <p></p> are not displayed in the browser. If they have any attributes, they are not removed.

From my testing, <div></div> actually persists even without an attribute.

However, <span class="test"></span> disappears anyway.

Related: #23037

Tried something similar as Sergey:

3.4.2: <i class="test"></i> gets 'translated' into <em class="test"></em>

3.5: <i class="test"></i> disappears

Replying to azaozz:

Yes, TinyMCE treats all empty elements that don't have meaning in html as empty space, same as browsers treat them. <span></span>, <div></div>, even <p></p> are not displayed in the browser. If they have any attributes, they are not removed.

Apparently that's not entirely the case, see comment:7.

Yeah, that's wrong.

A list of elements to remove when empty is defined in TinyMCE's Schema class: http://core.trac.wordpress.org/browser/trunk/wp-includes/js/tinymce/wp-tinymce-schema.js#L705

Also replacing <i> with <em> and <b> with <strong> is affected by the schema. In 'html5' they are not replaced: http://core.trac.wordpress.org/browser/trunk/wp-includes/js/tinymce/wp-tinymce-schema.js#L694

The elements listed for removal when empty 'ol,ul,sub,sup,blockquote,span,font,a,table,tbody,tr,strong,em,b,i' will not be removed if they have an id or name attribute: ​https://github.com/tinymce/tinymce/blob/master/jscripts/tiny_mce/classes/html/DomParser.js#L516

So we have couple of options: edit the "remove when empty" list in the Schema class and/or extend the DomParser class to not remove these elements when they have any attribute (both would be good to submit for merging upstream).

#23037 was marked as a duplicate.

Per IRC with azaozz:

• Deleting <span> tags is not a regression. Leave this for 3.6 or later. We can possibly submit a patch for TinyMCE's DomParser to leave removeEmpty elements that still have certain other attributes (class, specifically) just as it handles id and name.

• For 3.5.1, revert ​https://github.com/tinymce/tinymce/commit/6e2a6b5ff657f58c66859256f4ad87f4d9f27423 to restore TinyMCE 3.4.9 (and WP 3.4) behavior. We should be able to make this change in our wp-tinymce-schema.js file.

I just create a template page when I'm using advanced html/css... What could be a nice fix is a html tag inside tinyMCE like

[DONT_FORMAT]DONT_FORMAT

And inside these tags there will be no formatting it will simply generate the html inside without touching it...

In 23221:

TinyMCE: don't remove empty <i>, <b>, <em> and <strong> matching the behavior in WordPress 3.4/TinyMCE 3.4.9, fixes #22477 for 3.5

Reopen for trunk.

This doesn't fix removal of empty spans, only restores the TinyMCE behavior for <i>, <b>, <em> and <strong>. There are other fixes/improvements that are needed, so leaving this open until these are patched upstream.

In 23222:

TinyMCE: don't remove empty <i>, <b>, <em> and <strong> matching the behavior in WordPress 3.4/TinyMCE 3.4.9, see #22477 for trunk

For reference: [23222] reverts this commit in TinyMCE:
​https://github.com/tinymce/tinymce/commit/6e2a6b5ff657f58c66859256f4ad87f4d9f27423

Hijacking this ticket, that way milestone:3.5.1 is an accurate reflection of all of its changes.

We can open a new ticket for the upstream adjustments.

Replying to hali6sic6:

...And inside these tags there will be no formatting it will simply generate the html inside without touching it...

Thinking you're looking for "previews" that use elements with contenteditable="false" inside the editor. That prevents any editing/changes in them. This is on the "to do" list: #21812.

Thanks for the fixes! this allows me to use twitter-bootstrap icons by using the method shown on their site. see #23037