magento2: WYSIWYG Editor removing block level elements inside tags

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

About this issue

Original URL
State: open
Created 8 years ago
Reactions: 3
Comments: 28 (13 by maintainers)

Most upvoted comments

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.

+15

BenSpace48 on Mar 19, 2021

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.

trunglv on Aug 24, 2020

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

hostep on Jun 6, 2018

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.

friendscottn on Feb 19, 2018

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

mrtuvn on Feb 23, 2021

Thanks for your help @davemacaulay ❤️

BenSpace48 on Jun 6, 2018

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.

davemacaulay on Jun 6, 2018

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

BenSpace48 on Feb 16, 2018

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

magento-engcom-team on Oct 13, 2017