TinyMCE removes empty element element on hitting backspace in editor. The element is used for styling purposes. The problem does occur in Firefox and not when using Chrome.
Steps to reproduce: 1. go to http://fiddle.tinymce.com/P0eaab (config adapted such that with class info is not cleaned) 2. click in the menu bar on "tools" and then on "Source code" 3. paste the following html code
<div class="eight columns row">
<h2>Tarieven seizoensopening 2014</h2>
Prijs per persoon per nacht met inbegrip van een uitgebreid ontbijt en 's avonds een culinair driegangenmenu (apero-wijn-water-koffie):
<ul class="list unstyled-list">
<li><i class="small-arrows"></i>Kamer 1: 125 € ppppn*</li>
<li><i class="small-arrows"></i>Kamer 2: 115 € ppppn*</li>
<li><i class="small-arrows"></i>Kamer 3: 115 € ppppn*</li>
<li><i class="small-arrows"></i>Kamer 4: 100 € ppppn*</li>
</ul>
</div>
- Hit the "OK" button
- Put cursor in editor window right behind the "5" in "125"
- Hit backspace such that "125" is changed in "12"
- Click in the menubar on "Tools" then on "Source code"
Expected result (only snippet with problem shown):
<li><i class="small-arrows">Kamer 1: 12 € ppppn*</li>
<li><i class="small-arrows"></i>Kamer 2: 115 € ppppn*</li>
Actual result (only snippet with problem shown):
<li>Kamer 1: 12 € ppppn*</li>
<li><i class="small-arrows"></i>Kamer 2: 115 € ppppn*</li>
Additional Notes: -somehow the backspace did clean up the "" on the first li element -performing the same experiment in chrome does not yield the error -all plugins in FireFox were disabled in this test to avoid any interference -is there a way to figure out what causes this removal of the i element? Can you actually use a debugger that shows "live" javascript action. I have Firebug but don't see how I can see the javascript live in action