WordPress.org

Make WordPress Core

Opened 3 years ago

Closed 3 years ago

Last modified 12 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 (24)

comment:1 @MikeHansenMe3 years 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 @SergeyBiryukov3 years ago

  • Component changed from General to TinyMCE

comment:3 @hali6sic63 years 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: @azaozz3 years 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 3 years ago by azaozz (previous) (diff)

comment:5 in reply to: ↑ 4 @SergeyBiryukov3 years 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@…3 years 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 @nacin3 years 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 @azaozz3 years 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 3 years ago by azaozz (previous) (diff)

comment:10 @azaozz3 years ago

#23037 was marked as a duplicate.

comment:11 @nacin3 years 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: @hali6sic63 years 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] DONT_FORMAT

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

Version 1, edited 3 years ago by hali6sic6 (previous) (next) (diff)

comment:13 @azaozz3 years 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 @azaozz3 years 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 @azaozz3 years ago

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

comment:16 @azaozz3 years 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 @nacin3 years 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 @SergeyBiryukov3 years ago

  • Type changed from enhancement to defect (bug)

comment:20 in reply to: ↑ 12 @azaozz3 years 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@…3 years ago

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

comment:22 follow-up: @DonSailieri12 months ago

  • Keywords needs-refresh added

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.

comment:23 in reply to: ↑ 22 @SergeyBiryukov12 months ago

  • Keywords needs-refresh removed

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.

Note: See TracTickets for help on using tickets.