TinyMCE on WordPress >> tab ancor | issue. Bad visual.

[peopleinside]

In my WordPress I have this page code:
Code has been pasted here:
​http://pastebin.com/TfLaEK1n

IF I paste that code on GitHub ( ​https://github.com/tinymce/tinymce/issues/3199 ) or TinyMCE demo ( ​https://www.tinymce.com/docs/demo/basic-example/ ) the content is showed correctly, in my WordPress not.

Also in a clean WordPress Install the code is not showed correctly.

Please take look at this TinyMCE report here (closed because seems not a TinyMCE issue):
​https://github.com/tinymce/tinymce/issues/3199

Can you solve this issue on WordPress as TinyMCE says is not an issue related to TinyMCE and WordPress without any plug in have issue?

Support topic on WordPress created here:
​https://wordpress.org/support/topic/issue-tinymce-wrdpress-wrong-tab-ancor-content-on-wordpress/

All version of WordPress seems affected.

[azaozz]

The problem is that the user has reduces the table height by dragging the handles. If the height is removed, the tables stop overlapping one another.

Another problem sis that the HTML has a lot of inline styles and in addition is "polluted" with tons of spans with redundant inline styles. As far as I see these inline styles interfere with the theme styles inside the editor.

Not sure how that has happened as in WordPress TinyMCE is set to remove all inline styles on pasting.

I'm not sure what we can do to fix this. I'm also not sure where this HTML comes from. When trying to copy and paste it in Chrome (which could add all the redundant spans) TinyMCE cleans it properly. There are no inline styles or spans.

@peopleinside:

• Where is this HTML coming from?
• Could you try to copy the content from the front-end and paste it in a new post, see if that fixes it and removes all the extra styles.

[peopleinside]

Hi,
I AM very happy to see someone are taking care of this issue.

The HTML I give to you is made by my TinyMCE editor in WordpPress. I use also TinyMCE Advanced.
All code has been made in WordPress.

Yes maybe sometimes when you create a long table space are small or I have manually resized and this may have create the issue? Maybe if the manual resize not work is better to remove, don't know.

° The HTML is coming from my blog page ​https://www.peopleinside.it/su-di-me/film/ where I have always issue about table.
° What you mean with copy the code from the front end? Means without be logged in WordPress just on the final page showed to the user?

I have taken this code from editor side where I can take HTML pasted in new article but the results is the same.

Thank you for your help!

[peopleinside]

@azaozz Thanks for taking part on this. I can see the status Awaiting Rewiew.
I hope someone can consider this topic.

I think is an important issue and the issue exist and not only on my websites. I tested in a clean Wordpress install without plug in.

The same code works well on GitHub or on TinyMCE website is showed badly in Wordpress.
So... something is not working.

The code here: ​http://pastebin.com/TfLaEK1n works and is correctly showed if try to paste in a editor, in TinyMCE.

You can see on TinyMCE here: ​https://www.tinymce.com/docs/demo/full-featured/ just click on Tools, source code and replace all code with the provided. All is showed correctly.
In Wordpress is not as you can test here:
​https://www.softaculous.com/demos/WordPress

I hope this issue can be soon fixed in Wordpress. Is a big issue for me every time I need edit this page and also is not showed correctly in the visitor side, right now.

Thank you to everyone will join this.
I don't know who should contribute here for help to fix, I AM unable to fix this.

[azaozz]

Replying to peopleinside:

You can see on TinyMCE here: ​https://www.tinymce.com/docs/demo/full-featured/ just click on Tools, source code and replace all code with the provided. All is showed correctly.

This is the problem. You are pasting the same (bad) HTML with a lot of inline styles. In some places these inline styles look acceptable, in other places they interfere with the existing styles.

To fix this you will need to copy the content, not the HTML as displayed on the front-end of the site, then paste it directly in the editor, not in the Text editor. Then switch to the Text editor and make sure there isn't inline styles for the dimensions of the tables.

Alternatively you can clean that HTML by hand and remove all the useless spans with inline styles that were added there most likely by Chrome at some point.

I don't think any of this is caused by a bug in the editor. It removes all spans with inline styles on paste in order to output clean HTML that will work properly with any theme.

The other problem I'm seeing in the HTML is that the two tables have been resized by dragging the edges to be very "short". That makes them overflow. Best is to remove the inline styles from the table tags. That will let the browser style the tables properly on display.

From this:

<table class=" aligncenter" style="width: 768px; height: 1338px;" border="0">

to this:

<table class="aligncenter" border="0">

[peopleinside]

All the page has been generated in Wordpress so we need understand why this is well interpreted on TinyMCE and not in Wordpress.

I will try to fix the issue but this will not solve the bug issue on Wordpress. If I Paste the same code in TinyMCE all is showed correctly.

All code has been generated in Wordpress
Thanks.

[peopleinside]

Video demonstration. Please scroll down and put the video at full screen
​http://screencast.com/t/EFTwMmdMNb12

As you can see in the video in TinyMCE all work fine and in Wordpress not.
Now i done this in my Wordpress website but as I wrote in this ticket is the same in a clean Wordpress install. I tested it also on a clean install.

[azaozz]

Replying to peopleinside:

All the page has been generated in Wordpress

No, the example HTML above was not generated in WordPress. if it was, there will not be any spans with inline styles.

I will try to fix the issue but this will not solve the bug issue on Wordpress.

There is no bug in WordPress. You are pasting "broken" HTML in the Text editor, and saving that to the database. That HTML does not work with your theme's styles. It looks different when you use it on another site. It will probably look different if you switch themes too.

I'm not sure where the HTML comes from or how it got "polluted" with all these spans, but it was not made with the WordPress editor on the Edit Post screen. I tried to explain what to do to fix it above, but this is rather a question for the support forums.

[peopleinside]

I never generate code for Wordpress in other editor than paste in Wordpress.
Also if the HTML is broken as you say in TinyMCE is showed correctly.

I AM not understanding why the same code works on TinyMCE and if I put on a clean Wordpress install without my theme the results is the same.
Also I AM sure that code has been generated on Wordpress. Is my website and I create all page in Wordpress.

As I understood I have to copy from the website and paste into editor and this should solve the issue.

To fix this you will need to copy the content, not the HTML as displayed on the front-end >of the site, then paste it directly in the editor, not in the Text editor.

So from the front I have to copy and paste in the front HTML editor. I will try.

[peopleinside]

Fixed @azaozz is a mistery for me.

[desrosj]

Closing this out as @peopleinside noted this was fixed.