Joomla editor contents are removed or modified on save

If after saving the article something is missing (or changed), this is an indication that there is a Joomla plugin or an editor plugin that modifies the contents of the editor on the "save event". This could be done for three reasons:

  1. for security purposes to remove unwanted or suspicious code (typical case is to remove all javascript code).
  2. to add automatically HTML formatting/styling (e.g. automatically change the padding of the table cells or the alignment of the images).
  3. a third-party Joomla extension is doing some other custom work.

If after inserting the html code produced by Tabulizer popup window you notice some changes in the contents of your Joomla editor after clicking on the Save/Apply button, it means that your editor's contents are getting modified during the save action. To be 100% sure it is recommended that you copy-paste the HTML contents of the editor (toggle editor to view it's source code) before and after saving the article and mark the differences (if any).

The typical HTML code produced by Tabulizer looks like this:

Back-end
{tabulizer:include style[gr.alterora.elemental_2_blue_green.css] id[tab_ApDoCdtwbm]|
<table id="tab_ApDoCdtwbm" class="tabtable-gr_alterora_elemental_2_blue_green_2s2" data-ruleset="gr.alterora.elemental_2_blue_green.xml:gr.alterora.elemental_2_blue_green_2s2">
<tr class="tabrow tdmin_2h"><td class="tabcol">1</td><td class="tabcol">2</td><td class="tabcol">3</td></tr>
<tr class="tabrow "><td class="tabcol">4</td><td class="tabcol">5</td><td class="tabcol">6</td></tr>
<tr class="tabrow "><td class="tabcol">7</td><td class="tabcol">8</td><td class="tabcol">9</td></tr>
</table>
Front-end
... <link rel="stylesheet" href="/templates/tabulizer/css/gr.alterora.elemental_2_blue_green.css" type="text/css" /> ... <table id="tab_ApDoCdtwbm" class="tabtable-gr_alterora_elemental_2_blue_green_2s2" data-ruleset="gr.alterora.elemental_2_blue_green.xml:gr.alterora.elemental_2_blue_green_2s2">
<tr class="tabrow tdmin_2h"><td class="tabcol">1</td><td class="tabcol">2</td><td class="tabcol">3</td></tr>
<tr class="tabrow "><td class="tabcol">4</td><td class="tabcol">5</td><td class="tabcol">6</td></tr>
<tr class="tabrow "><td class="tabcol">7</td><td class="tabcol">8</td><td class="tabcol">9</td></tr>
</table>

The first line is a directive that is visible only in the back-end, while editing the article. In the front-end it is removed and the corresponding action has taken place. For instance, in this example the directive {tabulizer:include style[gr.alterora.elemental_2_blue_green.css] id[tab_ApDoCdtwbm]| will request Tabulizer to include the gr.alterora.elemental_2_blue_green.css file that is needed for styling the table with id = "tab_ApDoCdtwbm". If this is directive is removed either accidentally or by another extension, then the CSS file will not be included that the resulting table will show up with no styling.

Tabulizer produces HTML code that is compatible with all existing Joomla filters and standard extensions, so normally you won't have any of the problems mentioned above. Nevertheless, if the table styling is missing or if the Tabulizer directive is missing in the back-end editor's box, you may have to examine the following areas:

  • Joomla filtering: Try to disable it by setting the "Text filters settings" to "No filtering". This option is available under the "Global Configuration" of your Joomla site. When done with your testing, don't forget to reset the settings to its previous value.
  • Joomla editor plugins: Your active editor (TinyMCE, JCE, etc) may contain some extra plugins or custom settings that modify the contents of your editor when you paste date or when your click on the Save/Apply button. Try to use another Joomla editor or set temporarily the default Joomla editor to "Editor - None" to see if this makes any difference.
  • Joomla plugins: It is possible that there is a third-party extension that modifies the contents of the article in certain areas. For instance, one typical case is that this plugin is removing the Tabulizer directive or breaking its structure while search for its own tags. Another case that has been reported is that a system plugin is removing the CSS files included by Tabulizer, so it can combine them into a single CSS file for better performance, but due to a bug the whole process fails leaving the table with no styling. Since there are thousands third-party plugins its hard to tell exactly which one is the culprit. Only through trial and error (disabling each non standard plugin and moving to the next one) you may have some success.