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..

[MikeHansenMe]

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.

[hali6sic6]

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...

[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.

< 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.

[SergeyBiryukov]

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.

[SergeyBiryukov]

Related: #23037

[ruud@…]

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

[nacin]

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.

[azaozz]

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).

[azaozz]

#23037 was marked as a duplicate.

[nacin]

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.

[hali6sic6]

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...

[azaozz]

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

[azaozz]

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.

[azaozz]

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

[azaozz]

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

[nacin]

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.

[azaozz]

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.

[ruud@…]

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

[DonSailieri]

This still seems to happen as per the original ticket - the WYSISWYG editor strips empty <i> tags when switching from Visual to Text - this make it impossible to use Font Awesome, amongst others.

[SergeyBiryukov]

Replying to DonSailieri:

This still seems to happen as per the original ticket - the WYSISWYG editor strips empty <i> tags when switching from Visual to Text - this make it impossible to use Font Awesome, amongst others.

Confirmed with Chrome 35 in both 3.9 and current trunk. See also #23037.

Both tickets were closed on a completed milestone, please create a new one.

[SergeyBiryukov]

Follow-up: #28940