Magento – Magento2: WYSIWYG / TinyMCE Editor every time removing tags in CMS blocks

You will need to include the wysiwyg javascript files.

I think the lines of code you need are.

<script type="text/javascript" src="<?php echo $this->getJsUrl() ?>tiny_mce/tiny_mce.js"></script>

And

<action method="addItem"><type>js</type><name>mage/adminhtml/wysiwyg/tiny_mce/setup.js</name><params/><if/><condition>can_load_tiny_mce</condition></action>

These should be set by default on normal adminhtml pages as long as you turn on the editor. To do this you can add the following to your block class in the _prepareLayout function.

$this->getLayout()->getBlock('head')->setCanLoadTinyMce(true);

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.