Prevent TinyMCE from removing span elements

Insert extended_valid_elements : 'span' into tinymce.init:

tinymce.init({
    selector: 'textarea.tinymce',
    extended_valid_elements: 'span',
    //other options
});

Tinymce remove span tag without any attribute. We can use span with any attribute so that it is not removed.

e.g <span class="my-class">Mahen</span>

Try this for 3.5.8:

1. Replace cleanupStylesWhenDeleting in tiny_mce_src.js (line 1121) with this::

    function cleanupStylesWhenDeleting() {
           function removeMergedFormatSpans(isDelete) {
                   var rng, blockElm, wrapperElm, bookmark, container, offset, elm;
                   function isAtStartOrEndOfElm() {
                           if (container.nodeType == 3) {
                                   if (isDelete && offset == container.length) {
                                           return true;
                                   }
   
                                   if (!isDelete && offset === 0) {
                                           return true;
                                   }
                           }
                   }
   
                   rng = selection.getRng();
                   var tmpRng = [rng.startContainer, rng.startOffset, rng.endContainer, rng.endOffset];
   
                   if (!rng.collapsed) {
                           isDelete = true;
                   }
   
                   container = rng[(isDelete ? 'start' : 'end') + 'Container'];
                   offset = rng[(isDelete ? 'start' : 'end') + 'Offset'];
   
                   if (container.nodeType == 3) {
                           blockElm = dom.getParent(rng.startContainer, dom.isBlock);
   
                           // On delete clone the root span of the next block element
                           if (isDelete) {
                                   blockElm = dom.getNext(blockElm, dom.isBlock);
                           }
   
                           if (blockElm && (isAtStartOrEndOfElm() || !rng.collapsed)) {
                                   // Wrap children of block in a EM and let WebKit stick is
                                   // runtime styles junk into that EM
                                   wrapperElm = dom.create('em', {'id': '__mceDel'});
   
                                   each(tinymce.grep(blockElm.childNodes), function(node) {
                                           wrapperElm.appendChild(node);
                                   });
   
          blockElm.appendChild(wrapperElm);
                           }
                   }
   
                   // Do the backspace/delete action
                   rng = dom.createRng();
                   rng.setStart(tmpRng[0], tmpRng[1]);
                   rng.setEnd(tmpRng[2], tmpRng[3]);
                   selection.setRng(rng);
                   editor.getDoc().execCommand(isDelete ? 'ForwardDelete' : 'Delete', false, null);
   
                   // Remove temp wrapper element
                   if (wrapperElm) {
                           bookmark = selection.getBookmark();
   
                           while (elm = dom.get('__mceDel')) {
                                   dom.remove(elm, true);
                           }
   
                           selection.moveToBookmark(bookmark);
                   }
           }
   
   
               editor.onKeyDown.add(function(editor, e) {
                   var isDelete;
   
                   isDelete = e.keyCode == DELETE;
                   if (!isDefaultPrevented(e) && (isDelete || e.keyCode == BACKSPACE) && !VK.modifierPressed(e)) {
                           e.preventDefault();
                           removeMergedFormatSpans(isDelete);
                   }
           });
   
           editor.addCommand('Delete', function() {removeMergedFormatSpans();});
   };
   

2. put an external link to tiny_mce_src.js in your html below the tiny_mce.js

I have the same problem and I find solutions. Tiny MCE deleted SPAN tag without any attribute. Try us span with class or another attribute for example:

<h3><span class="emptyClass">text</span></h3>

In TinyMCE 4+ this method good work.