Magento 2 – Fix WYSIWYG/TinyMCE Editor Removing Tags in CMS Blocks

adminhtmlcms-blockjavascriptmagento2tinymce

I'm trying to add a link to each div but whenever I save the block, the <a> tags gets stripped out.

Any help would be appreciated

<div class="banner-pods">
    <a href="http://www.ahern.com" target="_blank">
        <div class="digital-catalog">
            <div><img src="http://localhost:8888/admin/cms/wysiwyg/directive/___directive/e3ttZWRpYSB1cmw9Ind5c2l3eWcvaWNvbnMvY2F0YWxvZy13aGl0ZS5wbmcifX0,/key/3041bd04ffb9650dfc4fc02a562da21220852075971a3f779e61dac8986f7b88/" width="100" height="100" /></div>
            <div><span>Digital</span> Catalog<small>View &amp; Download (PDF)</small></div>
        </div>
    </a>
    <a href="http://www.ahern.com">
        <div class="rental-locations">
            <div><img src="http://localhost:8888/admin/cms/wysiwyg/directive/___directive/e3ttZWRpYSB1cmw9Ind5c2l3eWcvbG9jYXRpb25zLXdoaXRlLnBuZyJ9fQ,,/key/3041bd04ffb9650dfc4fc02a562da21220852075971a3f779e61dac8986f7b88/" /></div>
            <div><span>Rental</span> Locations<small>{{customVar code=no_of_rental_locations}} Locations to Serve You</small></div>
        </div>
    </a>
    <a href="http://www.ahern.com" target="_blank">
        <div class="credit-application">
            <div><img src="http://localhost:8888/admin/cms/wysiwyg/directive/___directive/e3ttZWRpYSB1cmw9Ind5c2l3eWcvYXBwbGljYXRpb24tYmxhY2sucG5nIn19/key/3041bd04ffb9650dfc4fc02a562da21220852075971a3f779e61dac8986f7b88/" /></div>
            <div><span>Credit</span> Application<small>Open an account today</small></div>
        </div>
    </a>
</div>

Best Answer

This issue has actually already existed in Magento 1, it's due to the TinyMCE editor which will just strip invalid HTML from the user input, sometimes it considers a little too much to be invalid, though.

Another common issue is that it will create new <p> elements all over the place, can be pretty annoying as well. I recommend checking out Alan Storm's blog entry on the matter:

http://alanstorm.com/magento_html5_tinymce

There are also some resources on the net where fixing this is being discussed, however, I have to say it is quite a pain:

https://www.pixafy.com/blog/2013/06/overcoming-magentos-wysiwyg-part-2-customizing-tinymce-settings/

At the end of the day, I wish Magento would be moving away from TinyMCE, at least from TinyMCE 3, which is pretty old by now and not what I would consider a modern web solution.

If you want to attempt fixing this yourself, have a look at the TinyMCE 3 configuration archive for further info:

http://archive.tinymce.com/wiki.php/Configuration3x

A very short answer to your specific case would be: Fix your HTML and TinyMCE will not complain. In this case, try replacing the <div> tags with <span> tags, as <div> tags are (officially) not valid inside <a> tags, as they are not in-line elements. TinyMCE does not like that, so it just removes the <a> tag for you.

You can still set the property display: block or display: inline-block for the <span> elements via CSS, so the end result would be functionally the same as using <div> - without conflicting with the HTML standard.

If you check out to the TinyMCE 3 configuration archive above, there are some settings which would allow you to disable it, for example this one:

http://archive.tinymce.com/wiki.php/Configuration3x:verify_html

I have to admit though, I was never really happy with any of the solutions I came up with when fiddling with TinyMCE 3.

Related Topic