The Problem:

You open a module — like the "Social Icons" module which is usually part of the demo content — but it is utterly empty?!
You "Save" or "Save & Close", and when you look at your site's frontend the social icons are gone.

The Cause:

Your WYSIWYG editor decided to delete the content.

The Remedy:

You have to re-insert the source. It is really gone.

How to prevent this?

Use "CodeMirror" or "No Editor" or try to properly configure you WYSIWYG editor so it doesn't wreck your content without warning.

---

In detail:

The UIkit "Icon" component can help you to neatly display "Font Awesome" icons. This is usually done by simply adding one of the numerous available classes — like uk-icon-home — to an HTML element.

The icon will nicely show to the left of the element's content:

<span class="uk-icon-home">is where the heart is.</span>

Or to show just an icon without any text:

<span class="uk-icon-warning"></span>

But you may encounter a problem. Save the changes and close the Joomla article, the Joomla module, etc., and reload the page. There is no icon? You open the article or module and the source is gone?

This is not the fault of UIkit, or your template, or your Joomla CMS, but was probably done by a "helpful" feature of your WYSIWYG editor.

Whenever you edit halfway sophisticated source in a module or article YOOtheme recommends you set Site > Global Configuration > Site > Site Settings > Default Editor > Editor - CodeMirror.

You should generally be very careful when using a WYSIWYG editor like TinyMCE, JCE, CKeditor, or others. After saving always make sure your WYSIWYG editor did not alter the source. Even if you work in HTML / source view most editors are notorious for "cleansing" or "correcting" the source. One problem is that "empty" tags or HTML elements like

<i class="uk-icon-home"></i>

or

<span class="tm-icon-yootheme-uikit"></span>

or

<a href="http://www.facebook.com/whoever" class="uk-icon-facebook"></a>

for instance might be regarded worth deleting, even though they are perfectly fine and have a justified purpose.

But it would depend on the configuration of the editor.

To avoid the automatic deletion of empty HTML elements you could take the following steps:

Joomla Content Editor (JCE) and TinyMCE

Both JCE and TinyMCE (the standard Joomla WYSIWYG editor) make use of the same plug-in "Editor - TinyMCE" which offers advanced settings.

• In the Joomla backend go to Extensions > Plug-in Manager

• Into the "Filter" type

  tinymce
  

• Click on the search icon.

• The plug-in "Editor - TinyMCE" should be found.

• Click on the plug-in's name to edit it.

• Go to Plugin > Extended Valid Elements.

• The field might be empty or it could contain some source already.

• At the very end of whatever is in there add the following

  ,+a[*],+i[*],+em[*],+li[*],+span[*],+div[*],
  

• Click "Save & Close" in the toolbar.

From now on empty <a>, <i>, <li>, and <span> elements should no longer be deleted when you save.

JCKeditor

• Access your site's root via FTP.

• Use a text editor capable of UTF-8 encoding to open the file

  plugins/editors/jckeditor/config.js

• For each element you want to protect from being deleted add a certain line. For empty <i> and <a> tags this would be for instance

  // ALLOW empty <a></a>  
  config.protectedSource.push(/<a[^>]*><\/a>/g);  
  // ALLOW empty <i></i>  
  config.protectedSource.push(/<i[^>]*><\/i>/g);  
  // ALLOW empty <em></em>  
  config.protectedSource.push(/<em[^>]*><\/em>/g);  
  // ALLOW empty <li></li>  
  config.protectedSource.push(/<li[^>]*><\/li>/g);  
  // ALLOW empty <span></span>  
  config.protectedSource.push(/<span[^>]*><\/span>/g);  
  // ALLOW empty <div></div>  
  config.protectedSource.push(/<div[^>]*><\/div>/g);  
  

  These lines have to be added to the function( config ) to work.

• The content of the config.js would then be as follows:

  /*  
  Copyright (c) 2003-2010, CKSource - Frederico Knabben. All rights reserved.  
  For licensing, see LICENSE.html or http://ckeditor.com/license  
  */
  
  CKEDITOR.editorConfig = function( config )  
  {  
      // Define changes to default configuration here. For example:  
      // config.language = 'fr';  
      // config.uiColor = '#AADC6E';  
  
      // ALLOW empty <a></a>  
      config.protectedSource.push(/<a[^>]*><\/a>/g);  
      // ALLOW empty <i></i>  
      config.protectedSource.push(/<i[^>]*><\/i>/g);  
      // ALLOW empty <em></em>  
      config.protectedSource.push(/<em[^>]*><\/em>/g);  
      // ALLOW empty <li></li>  
      config.protectedSource.push(/<li[^>]*><\/li>/g);  
      // ALLOW empty <span></span>  
      config.protectedSource.push(/<span[^>]*><\/span>/g);  
      // ALLOW empty <div></div>  
      config.protectedSource.push(/<div[^>]*><\/div>/g);  
  
  };
  

• Save and close the file.

---

Update:

In Joomla! 3.3.x the TinyMCE editor deletes <span>...</span> tags.

Since Joomla version 3.3.3 the standard editor TinyMCE decides to delete all <span> and <span> tags.
Sadly this will affect content like that from the Unity template's "smoothscroll" module as well:

<ul class="uk-dotnav uk-dotnav-vertical" data-uk-scrollspy-nav="{closest:'li', smoothscroll:true}">  
    <li><a title="Unity" href="#tm-header">Item 1</a> <span>Unity</span></li>  
    <li><a title="Welcome" href="#tm-top-a">Item 2</a> <span>Welcome</span></li>  
    <li><a title="Pagekit" href="#tm-top-b">Item 3</a> <span>Customer</span></li>  
    <li><a title="Mobile" href="#tm-bottom-a">Item 5</a> <span>Mobile</span></li>  
</ul>

If your editor is set to be TinyMCE then the HTML will be altered without warning when you save, even if you did not actively change anything:

<ul class="uk-dotnav uk-dotnav-vertical" data-uk-scrollspy-nav="{closest:'li', smoothscroll:true}">  
    <li><a title="Unity" href="#tm-header">Item 1</a> Unity</li>  
    <li><a title="Welcome" href="#tm-top-a">Item 2</a> Welcome</li>  
    <li><a title="Pagekit" href="#tm-top-b">Item 3</a> Customer</li>  
    <li><a title="Mobile" href="#tm-bottom-a">Item 5</a> Mobile</li>  
</ul>

Mind the missing <span> and </span> tags. The result in the frontend will be a broken "smoothscroll" with the text not being properly positioned anymore.

Worth knowing: If the opening <span> tag has a class or id attribute like

<span class="myclass">Whatever</span>

or even an empty one as in

<span class="">Whatever</span>

the tags will not be deleted.

How to prevent this:

• In the Joomla backend go to Extensions > Plugin Manager and open "Editor - TinyMCE".

• Into the field Extended Valid Elements enter

  span
  

• Click "Save & Close" in the toolbar.

Now all <span> and </span> tags should be maintained.

---

---

Where in doubt about the configuration please contact the developers of your editor. Even though they may come with a standard Joomla package, in a demo package for example, the WYSIWYG editors are not YOOtheme products and we can not provide support for them.

Regarding the deletion of empty elements you would face the same issues with any other template just the same.

---

Links:

• UIkit "Icon" component

• Joomla Content Editor

• Joomla CKeditor