WYSIWYG Editor removing block level elements inside <a> tags

BenSpace48 commented 8 years ago

The WYSIWYG editor strips out <a> tags when they have block level elements nested inside, this is valid HTML5 so I believe it should not do this.

Steps to reproduce

Create a static block and add the below code
Save the static block.
Refresh the page
Save the static block again

<a href="#">
    <div class="test">Test</div>
</a>

Expected result

I expect the code to remain the same.
Actual result
The code in rendered out to

<div class="test">Test</div>

Extra points

It also minifies the HTML making updates difficult (let me know if you would like this as a separate issue)
It also moves heading tags such as h3 outside the <a> tag, very annoying.
Related to https://github.com/magento/magento2/issues/4324
I'm on 2.0.4
The fix may be similar to the fix for Magento 1

shiftedreality commented 8 years ago

Hi @BenSpace48

Thank you for reporting this. I created internal ticket MAGETWO-52972 to investigate and fix.

hbhardik commented 7 years ago

Hello,

is there any update on this given issue ?

bydrei commented 7 years ago

So, any news on this?

magento-engcom-team commented 6 years ago

@BenSpace48, thank you for your report. We've created internal ticket(s) MAGETWO-52972 to track progress on the issue.

friendscottn commented 6 years ago

Here's a potential fix

In this file: lib/web/mage/adminhtml/wysiwyg/tiny_mce/html5-schema.js Replace this:

['a', 'href target rel media hreflang type charset name rev shape coords download', phrasingContent],

With this:

['a', 'href target rel media hreflang type charset name rev shape coords download', flowContent],

Yes Good call @BenSpace48

More Info:

Yes I think it would be a good idea to override the javascript if possible if you are patching an existing project. I meant to propose this as the official fix for someone who is in a position to make it. The reason this fixes the issue is that the 'flowContent' array includes block level tags and inline tags unlike the 'phrasingContent' array which includes only inline elements.

The first element of this array is the a the tag we want to fix, the second array entry appears to be attributes allowed on a tags, and the third array entry (the one we care about) appears to be allowed children.

I didn't do much more than test that this works in my own individual project so use at your own risk. Someone who has more time than me and can make an official fix or PR should by all means look at other ways to fix this that might be better.

BenSpace48 commented 6 years ago

@friendscottn Can you provide more info please? How does this fix it? and we should probably overwrite that file not edit it directly.

ryanvivoli commented 6 years ago

For @friendscottn's suggestion, it does work and it should be done in an overridden file in the following location (replace YourCustomName): app/design/adminhtml/YourCustomName/Backend/web/mage/adminhtml/wysiwyg/tiny_mce/html5-schema.js

hitesh-wagento commented 6 years ago

@BenSpace48 Do we need to fix this issue magento core file ?

BenSpace48 commented 6 years ago

@hitesh-wagento Yes, but I think the main cause is Tiny MCE seems way out of date.

Based on /lib/web/tiny_mce/tiny_mce.jsthe version is 3.4.7 which dates back to 2011 when standards were very different. The latest version is 4.7.13.

Hopefully updating this will also update the standards to HTML5.

I'm very disappointed we are here 2 years later without a single comment about it from Magento other than an internal ticket number.

hostep commented 6 years ago

Just FYI: Magento 2.3 will finally have an update to Tinymce 4.x, currently it's at 4.6.4, see: https://github.com/magento/magento2/blob/2.3-develop/lib/web/tiny_mce_4/tinymce.min.js

BenSpace48 commented 6 years ago

That's positive news, thanks @hostep

hitesh-wagento commented 6 years ago

@BenSpace48, @hostep

I have tested Magento ver. 2.2.6-dev I am still facing above issue

If I will : Replace this:

['a', 'href target rel media hreflang type charset name rev shape coords download', phrasingContent],

With this:

['a', 'href target rel media hreflang type charset name rev shape coords download', flowContent],

It's solve issue but you need to use below structure :

<div>
    <a href="#">
        <div class="test">Test</div>
    </a>
</div>

If you will use :

<a href="#">
    <div class="test">Test</div>
</a>

It's show :

<p>
    <a href="#"></a>
</p>
<div class="test">
    <a href="#">Test</a>
</div>
<p></p>

davemacaulay commented 6 years ago

As @hostep has said, with 2.3 we'll be releasing an upgrade to TinyMCE to boost us to v4. This means we could then enable allow_html_in_named_anchor (https://www.tinymce.com/docs/configure/content-filtering/#allow_html_in_named_anchor) to resolve the issue with anchor specifically.

I've updated the internal ticket with this information to hopefully aid with resolving this issue.

BenSpace48 commented 6 years ago

Thanks for your help @davemacaulay <3

minhluan259 commented 5 years ago

Same issues on Magento 2.3 beta32

m2-assistant[bot] commented 5 years ago

Hi @gauravagarwal1001. Thank you for working on this issue. Looks like this issue is already verified and confirmed. But if you want to validate it one more time, please, go though the following instruction:

[ ] 1. Add/Edit Component: XXXXX label(s) to the ticket, indicating the components it may be related to.
[ ] 2. Verify that the issue is reproducible on 2.3-develop branch
Details
- Add the comment @magento-engcom-team give me 2.3-develop instance to deploy test instance on Magento infrastructure.
- If the issue is reproducible on 2.3-develop branch, please, add the label Reproduced on 2.3.x.
- If the issue is not reproducible, add your comment that issue is not reproducible and close the issue and stop verification process here!
[ ] 3. Verify that the issue is reproducible on 2.2-develop branch.
Details
- Add the comment @magento-engcom-team give me 2.2-develop instance to deploy test instance on Magento infrastructure.
- If the issue is reproducible on 2.2-develop branch, please add the label Reproduced on 2.2.x
[ ] 4. If the issue is not relevant or is not reproducible any more, feel free to close it.

Join Magento Community Engineering Slack and ask your questions in #github channel.

LiamKarlMitchell commented 4 years ago

Still a problem.. Magento 2.3.2

Checking if this work-around solves it... https://github.com/pavelleonidov/magento2-tinymce4

composer require pavelleonidov/module-tinymce4
php bin/magento setup:upgrade && php bin/magento setup:di:compile

It does not. composer remove pavelleonidov/module-tinymce4

Additionally, is there a way to configure tinymce to not reformat the html and not to put p tags in all over the show?

I tried this.

Edit lib/web/mage/adminhtml/wysiwyg/tiny_mce/tinymce4Adapter.js Line 204 add ```forced_root_block : '',

apply_source_formatting : false,
verify_html : false,
allow_conditional_comments: true,
allow_html_in_named_anchor: true,

But I think disabling the p tags by using forced_root_block might have an adverse effect of preventing some features/styling of sections of text.

php bin/magento setup:upgrade && php bin/magento setup:di:compile && php bin/magento setup:static-content:deploy -f && chown -R www-data:www-data . && bin/magento c:c

But it did not help to resolve it.

https://stackoverflow.com/questions/39083971/configure-tinymce-4-to-allow-inline-element-or-anchor-tag-a-to-be-the-top-leve

TinyMCE version in use 4.6.4 TinyMCE 5 is out any thoughts on using that? Or maybe a different editor such as Quilljs, CKEditor, Trumbowyg, summernote, Editor.js?

Even more odd,

<p>
<a href="#">
    <div class="test">Test</div>
</a>
</p>

Turns into this when you click Show / Hide Editor twice.

<p><a href="#"> </a></p>
<div class="test"><a href="#">Test</a></div>
<a href="#"> </a>
<p></p>

I then tried changing the a tag's phrasingContent to flowContent did not appear to have any improvement maybe because I did not revert what I did above?

By editing lib/web/mage/adminhtml/wysiwyg/tiny_mce/html5-schema.js And changing to ['a', 'href target rel media hreflang type charset name rev shape coords download', flowContent],

https://magento.stackexchange.com/questions/270923/magento2-wysiwyg-tinymce-editor-every-time-removing-a-tags-in-cms-blocks

The reason this fixes the issue is that the flowContent array includes block level tags and inline tags unlike the phrasingContent array which includes only inline elements.

But another comment on there says they solved it with editing Tinymce4Adapter.js and changing valid_elements and valid_children settings to

$settings['valid_elements'] = '*[*]';
$settings['valid_children'] = '+body[style],+div[a],+p[strong|a|#text],+a[div]'

https://stackoverflow.com/questions/14597219/how-to-configure-tinymce-to-allow-block-level-elements-inside-anchor-a-tag

Anyone else had luck fixing this? Making everything valid, does not seem like a fix to me.

LiamKarlMitchell commented 4 years ago

I had this issue because I'm trying to put the WeltPixel Pearl theme Social Icons in the footer of a site.

https://pearl.weltpixel.com/v5/weltpixel-social-icons

<a href="#" class="social-icons si-facebook">
    <i class="icon-facebook"></i>
    <i class="icon-facebook"></i>
</a>

Gets completely removed.

Maybe related/regression of this but should be fixed... https://core.trac.wordpress.org/ticket/28940

If I put content in the i tag it is changed to an em tag, spans are changed to p as well. Also media url tags in images sand quotes seem to get wiped/broken after saving and re-toggling the editor.

https://magento.stackexchange.com/questions/293980/double-quotes-change-into-quot-in-tiny-mce-editor-in-magento-2-x <li><a href="{{store url="about-us/"}}">About Us</a></li>

If I put single quote it appears to work but for some reason the default content had double quotes and it all got mucked up :(

<li><a href="{{store url='about-us'}}">About Us</a></li>

Workaround to use Magento Markup Tags and load a phtml template seems stupid... https://docs.magento.com/m2/ce/user_guide/marketing/markup-tags.html

Ah, WeltPixel exposes Widget for their icons thankfully. <p><a href="https://www.facebook.com/company">{{widget type="WeltPixel\DesignElements\Block\Widget\Icon" icon="icon-facebook" icon_size="38px" custom_class=""}}</a></p>

But this is still not quite what I wanted as does not have the custom classes correctly.

Please fix this so we can just paste the html and it will work without breaking it and removing new lines/formatting.

trunglv commented 3 years ago

Updating : Magento 2.4, TinyCME 4.0 Fixing lib/web/mage/adminhtml/wysiwyg/tiny_mce/tinymce4Adapter.js. Function : getSettings, variable settings, add new config value : 'valid_elements': '*[*]'

`getSettings: function () { var settings, eventBus = this.eventBus;

        settings = {
            selector: '#' + this.getId(),
            theme: 'modern',
            skin: 'magento',
            'entity_encoding': 'raw',
            'convert_urls': false,
            'content_css': this.config.tinymce4['content_css'],
            'relative_urls': true,
            'valid_elements': '*[*]',
            'valid_children': '+body[style]',

... ` Then it works.

niels-hubs commented 3 years ago

You are a legend @trunglv. That worked perfectly and got rid of that annoying bug that removes elements. Legend!!!

mrtuvn commented 3 years ago

solution by @trunglv Seeem not work anymore at 2.4-develop

pemann commented 3 years ago

@magento give me 2.4-develop instance

magento-deployment-service[bot] commented 3 years ago

Hi @pemann. Thank you for your request. I'm working on Magento instance for you.

magento-deployment-service[bot] commented 3 years ago

Hi @pemann, here is your Magento Instance: https://e64a04958ee2da74c4abd64ced555c64-2-4-develop.instances.magento-community.engineering Admin access: https://e64a04958ee2da74c4abd64ced555c64-2-4-develop.instances.magento-community.engineering/admin_85e9 Login: 2fc58fa6 Password: ba5e10d23b45

mrtuvn commented 3 years ago

Seem problem still valid after 5 yrs. Any workaround of quickhacks allow to show properly anchor wrap div. Some data valid possible not visible anymore after save. Nobody know that data existed after edit later

BenSpace48 commented 3 years ago

The year is 2064, I'm working on Magento 13.7.3 and whenever I update my static block via my brain chip 3000 TinyMCE is removing half my HTML.

niels-hubs commented 3 years ago

The year is 2064, I'm working on Magento 13.7.3 and whenever I update my static block via my brain chip 3000 TinyMCE is removing half my HTML.

This is the best comment ever 😄. Thanks for making my day. The fact that this is still an issue after 6 years is discusting.

trunglv commented 3 years ago

Hi friends, I am back. Happy to share my solution to this thread. It's here https://github.com/betagento/Editor

I changed the schema validation to html5, by default is html5-strict.
In the Class Betagento\Editor\Model\WysiwygConfig, use can add more TinyMCE settings if you want. [see https://www.tiny.cloud/docs-4x/]

magento / magento2