how to prevent tinymce from stripping empty tags from input?

Question

I have read loads of posts on various forums and here on SO, and still seem unable to prevent tinymce from stripping empty tags from the end of an editable block.

E.g. I input this:

<a href="blah">zzz</a>
<div class="floatClearer" style=""></div>

..and upon round trip (in and out of HTML mode), tinymce strips off the entire <div class="floatClearer" style=""></div>.

As per various bits of advise I found, I tried these things, and more:

• remove the minus sign in front of div in my valid_elements,

...and these config. options:

• verify_html : false,
• extended_valid_elements : "div*",
• extended_valid_elements : "div[*]",

ALL to no avail. is there any way to prevent that stripping action? There are other places I need empty tags (not just in this one example), so please, if you can, let me know an answer specific to my question, as opposed to suggesting I not use empty tags.

Answer 1

There was a bug in TinyMCE, and now it's fixed (in v3.5.2). Thanks to @Thariama!

For future searchers: Use the verify_html option.

This option enables or disables the element cleanup functionality. If you set this option to false, all element cleanup will be skipped but other cleanup functionality such as URL conversion will still be executed.

Example of usage:

tinyMCE.init({
    ...
    verify_html: false
});

Answer 2

As I do too have troubles, I am adding my brick - on top of Cliff Ribaudo answer.

So I recommend using   inside the empty tag which won't be stripped and won't be visible, not even by search engines.

Doing like so have not been stripped on my tinyMCE: <div class="someclass">&nbsp;</div>

Answer 3

I'm sticking this here because I'm still bumping into this issue ALL the time on WordPress blogs (even now, 2016) where I need to use empty divs to insert Google Analytics, Google Translate and Google Tag Manager.

The typical pattern is you add one someplace on a blog page where you need it and the next time you come back and touch the page with the TinyMCE editor whammo, bammo your divs gone!

The ONLY thing I've found that seems to always work reliably is something like the following:

<div id="google_translate_element" style="text-align:right;"><span style="display:none;">ha_ha_I_beat_u_tinyMCE</span></div>

Answer 4

Solution for me was to be extreme and extend the valid elements to accept ALL, might not be ideal but client is happy

function override_mce_options($initArray) {
     $opts = '*[*]';
    $initArray['valid_elements'] = $opts;
    $initArray['extended_valid_elements'] = $opts;
    return $initArray;
}
add_filter('tiny_mce_before_init', 'override_mce_options');

Answer 5

if you want to prevent from removing a specific empty tag, use option extended_valid_elements.

Example:

tinyMCE.init({
    ...
    extended_valid_elements: 'span[*]'
});

Answer 6

tinyMCE.init({
    ...
    extended_valid_elements: 'span[*]'
});

I'm using TinyMCE 5.5 and this example above does NOT stop TinyMCE from stripping empty span tags for me. I'm using a workaround that is better than nothing of putting a comment inside the span tags to prevent TinyMCE stripping, I have done it like this so I can include fontawesome icons:

<span class="fas fa-check-circle"><!--icon--></span>

I think you can turn off all html validation/editing in TinyMCE like this, but I wasn't comfortable with this:

    tinyMCE.init({
    ...
    extended_valid_elements: 'span[*]'
});

I'm using TinyMCE 5.5 and this example above does NOT stop TinyMCE from stripping empty span tags for me. I'm using a workaround that is better than nothing of putting a comment inside the span tags to prevent stripping, I have done it like this so I can include font awesome icons:

<span class="fas fa-check-circle"><!--icon--></span>

I think you can turn off all HTML validation/editing in TinyMCE with this settings, but I wasn't comfortable with it:

verify_html: false