Javascript

Prevent tinymce from stripping empty tags from input

Using a empty tag in tinymce removes the tag until they have a content in between and switching in HTML mode, all your tags are gone?

When you try to insert the following using the HTML button (or code plugin) and verify it afterwards using the HTML button (trying to submit the editor content) – results the div is gone.

<a href="#url">Link</a>
<div class="className" style=""></div>

Hmm, strange it is. This shouldn’t strip it there with that config and in fact it does not if you add contents after it.

This is a very problematic feature because, empty tags are commonly used. For e.g. they are used for preloading images, displaying icons, Ajax, etc.

There was a bug present TinyMCE, and, now it is fixed in version 3.5.2. You can use the verify_html option.

TinyMCE treats all empty tags or elements that don’t have a meaning in html as empty space. This is same as browsers treat them. <span></span>, <div></div>, and even <p></p> are not displayed in the browser until they have any attributes, they are not removed.

But, < tr> is a invalid HTML and you can not have a space after the opening <. So, you can have a space before the closing >, and so <tr > is valid and works as expected. But, this is not a solution.

With this option you can enable or disable the element cleanup functionality. For e.g. if you set this option to false then all element cleanup will be skipped but other cleanup functionality like URL conversion will still be executed.

Example of usage:

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

Read the TinyMCE Documentation

Jacob Frazier

Based on United States, Jacob Frazier is a skilled JavaScript developer with over 8 years of experience. He is passionate about change and trying new things, both professionally and personally. He loves startups and is extremely proactive.