Magento editor making code disappear

Question

In my Magento admin panel, some of the codes are mystically getting disappeared. When I put this code in the editor

    <li class="level1 mmegamenu-644"><a class="mobile-click-anchor" 
       href="/women/what-s-trending.html"> <span class="mega-menu-sub- 
 title"> What's Trending </span> </a>
      <span class="toggle-menu"><a href="javascript:void(0)" class=""><span class="icon-plus"></span></a></span>
       <ul id="mobile-menu-cat-644-1" class="sub-menu mobile- subcategory">
         <li class="level2 mmegamenu-667"><a href="/women/what-s- 
          trending/holiday-gift-guide.html"> Holiday Gift Guide </a></li>
          <li class="level2 mmegamenu-668"><a href="/women/what-s- 
           trending/animal-prints.html"> Animal Prints </a></li>
         <li class="level2 mmegamenu-669"><a href="/women/what-s-trending/plaid- 
   suits.html"> Plaid Suits </a></li>
   </ul>
  </li>

and then clicking on Show/Hide Editor it makes this code disappear

<span class="toggle-menu"><a href="javascript:void(0)" class=""><span class="icon-plus"></span></a></span> 

Code in editor(Before clicking Show/Hide Editor )

Code after clicking on Show/Hide Editor or saving it first time opening the same piece of code for updating.

Whats this issue. I don't understand.

The same thing happens with this code also.

<ul class="list-inline left-parent-header">
<li><a href="#">Privacy Policy&nbsp;</a></li>
</ul>
<ul class="social-links">
<li><a href="#" target="_self"> <i class="ti-pinterest-alt"></i></a> 
</li>
<li><a href="#" target="_self"><i class="ti-instagram"></i></a></li>
<li><a href="#" target="_self"><i class="ti-facebook"></i></a></li>
<li><a href="#" target="_self"><i class="ti-linkedin"></i></a></li>
<li><a href="#" target="_self"><i class="ti-vimeo"></i></a></li>
</ul>

This makes below code disappear

<ul class="list-inline left-parent-header">
 <li><a href="#">Privacy Policy&nbsp;</a></li>
</ul>

Answer 1

Magento's editor doesn't allow empty html tags.

For example <li><a href="#" target="_self"> <i class="ti-pinterest-alt"></i></a> </li> - this shows visually an icon to the user, but with a pseudo :before content which isn't an element.

And the editor "cleans" this up.

To bypass this, you can insert an   (space) in the empty tags, like this:

<li><a href="#" target="_self"><i class="ti-pinterest-alt">&nbsp;</i></a> </li>

Also I suggest editing this code:

<span class="toggle-menu"><a href="javascript:void(0)" class=""><span class="icon-plus"></span></a></span>

to:

<span class="toggle-menu"><a href="#"><span class="icon-plus">&nbsp;</span></a></span>

the javascript:void(0) will disappear otherwise as well.

Magento's editor is TinyMCE and there is an option on the editor to disable removal of empty tags, but that would require knowledge of how the editor is initialized (which I don't know).

If you really want to disable this feature and find out how the editor is initialized, this answer will probably help in disabling it: https://stackoverflow.com/questions/10467480/how-to-prevent-tinymce-from-stripping-empty-tags-from-input