WordPress.org

Make WordPress Core

Opened 17 months ago

Closed 16 months ago

Last modified 16 months ago

#22477 closed defect (bug) (fixed)

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

Reported by: hali6sic6 Owned by: azaozz
Milestone: 3.5.1 Priority: normal
Severity: normal Version: 3.5
Component: TinyMCE Keywords:
Focuses: Cc:

Description

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

Change History (21)

comment:1 MikeHansenMe17 months ago

  • Cc mdhansen@… added

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.

comment:2 SergeyBiryukov17 months ago

  • Component changed from General to TinyMCE

comment:3 hali6sic617 months ago

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

comment:4 follow-ups: azaozz16 months ago

  • Keywords close added

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.

Last edited 16 months ago by azaozz (previous) (diff)

comment:5 in reply to: ↑ 4 SergeyBiryukov16 months ago

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.

comment:7 ruud@…16 months ago

  • Cc ruud@… added

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

comment:8 in reply to: ↑ 4 nacin16 months ago

  • Milestone changed from Awaiting Review to 3.5.1
  • Severity changed from normal to major

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.

comment:9 azaozz16 months ago

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

Last edited 16 months ago by azaozz (previous) (diff)

comment:10 azaozz16 months ago

#23037 was marked as a duplicate.

comment:11 nacin16 months ago

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.

comment:12 follow-up: hali6sic616 months ago

  • Type changed from defect (bug) to enhancement

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] html here [DONT_FORMAT]

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

Last edited 16 months ago by hali6sic6 (previous) (diff)

comment:13 azaozz16 months ago

  • Owner set to azaozz
  • Resolution set to fixed
  • Status changed from new to closed

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

comment:14 azaozz16 months ago

  • Resolution fixed deleted
  • Status changed from closed to reopened

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.

comment:15 azaozz16 months ago

  • Milestone changed from 3.5.1 to Future Release
  • Severity changed from major to normal

comment:16 azaozz16 months ago

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

comment:18 nacin16 months ago

  • Keywords close removed
  • Milestone changed from Future Release to 3.5.1
  • Resolution set to fixed
  • Status changed from reopened to closed
  • Summary changed from The WYSIWYG editor deletes all empty <span> tags to The WYSIWYG editor deletes empty em, strong, b, i tags
  • Version changed from 3.4.2 to 3.5

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.

comment:19 SergeyBiryukov16 months ago

  • Type changed from enhancement to defect (bug)

comment:20 in reply to: ↑ 12 azaozz16 months ago

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.

comment:21 ruud@…16 months ago

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

Note: See TracTickets for help on using tickets.