2

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>
  • It is working fine for me, Is there any error you are getting in console or screen ? – Krishna ijjada Sep 28 '16 at 19:40
  • First of all.. <div> is not valid inside <a> tag. – Developer Sep 28 '16 at 19:50
  • Kristina, no I'm not getting any error messages, it just remove it. Vural, I've created divs within an <a> tag before many times (just not in Magento). I can go ahead and just surround the img and the copy with <a> tags but prefer to have the whole div clickable. – Amy Ling Sep 28 '16 at 20:02
10

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.

  • Thanks! I'm quite new to Magento. I've worked with 1.9 when I started at my current job but it was a site that already built. So I didn't get to do much with it except fix all the CSS issues and create CMS pages. So now that i"m actually building a theme from the ground up with 2, I'm running into a lot of "new" things to me. Thanks for the explanation, it is very helpful! – Amy Ling Sep 29 '16 at 16:16

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.