Avatar michael.maass Support asked

[Tutorial] Ooops! My source was cleansed!

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:

  • Joomla
  • Tutorial

Edited

10 Answers

2

Avatar mustaq Support answered

Thanks for sharing this great and useful tutorial. I know many members will appreciate this as Editor filters are problematic.

YOOgards

Edited

0

Avatar fusco.gabriele answered

Hi,
I am trying to load the editor.css classes from template in JCE.
The classes are successfully loaded and displayed except content including uikit scrollspy events like:
<p class="uk-text-large" data-uk-scrollspy="{cls:'uk-animation-fade', delay:800}
I have partialy solved the issue including theses elements in JCE editor configuration:
,+a[],+i[],+em[],+li[],+span[],+p[],+h1[],+h2[],+h3[],+h4[],+h5,+h6[],+ul[],+div[*]
But the editor content remain hidden. (the content is visible only if I toggle it)
Any ideao to solve this issue please ?
Thanks!
Gab

Edited

0

Avatar john.baskerville answered

Hello,

Huge thanks for providing this tutorial. I have followed the instruction for the Joomla 3.3 JCE editor as described. I am still experiencing code getting cleaned. I use Code Mirror a lot, but sometimes I use JCE as its easier to create links to other pages, etc... (I haven't found an easy way to do that in code mirror). Here is the before and after...

The code i put into JCE editor...


<a class="uk-thumbnail" href="index.php...">  
  <div class="uk-overlay">  
    <div data-uk-scrollspy="{cls:'uk-animation-slide-right', repeat: true}"><img src="images/demo.jpg" alt="Demo Image" width="400" height="180"></div>  
    <div class="uk-overlay-area"></div>  
  </div>  
</a>

After I save...


<div class="uk-overlay">  
  <div data-uk-scrollspy="{cls:'uk-animation-slide-right', repeat: true}"><img src="images/images2/spotlight_preview_home_automation.jpg" alt="work teaser 1" width="400" height="180" /></div>  
  <div class="uk-overlay-area"></div>  
</div>

Is there any solution to this?

Great thanks,

0

Avatar michael.maass Support answered

@john.baskerville

The problem in this case will be that a is an "inline" element and div is a "block-level" element. According to the HTML specification an inline element must not contain any block-level element: W3C.org > The global structure of an HTML document > Block-level and inline elements > Content model.

So for instance

<a href="index.php">  
    <div>Text.</div>  
</a>

will be considered invalid — even though it works fine when used. Once the editor "validates" the source and has its way the outcome will most probably be syntactically correct but useless.

Sorry, but once the source gets the least bit "unvonventional" the best approach to avoid any problems with will be to use CodeMirror.

Thank you

Edited

0

Avatar marc.labro answered

hallo,
thanks for the tip, i became crazy to try to copy paste galery page and social icon code in unity theme :-)

q1. in your 333 update you say we need to add span but you already did it before update :
,+a[],+i[],+em[],+li[],+span[],+div[],
do i really need to write :
,+a[],+i[],+em[],+li[],+span[],+div[],span,
?

q2. a strange phenomenon : i suppose it occured after i added the valid elements and saved tiny mce settings. i have lost "new line" and source code becomes kilometric. can we change this ? before i opened tinymce, code source of your widgetkit gallery article with ul, li, i and widgetkit galeries displayed nice except <i> were removed. now in code source and on preview in article it is kilometric.
i agree codemirror would be nice but if we can avoid it just adding valid elements in tinymce i prefer because everytime i will need to add a widgetkit galery in my article, there is a risk i forget to switch to code mirroe and loose my <i>.

q3. i have seen on global settings of joomla333 filter text. like your demo package i have set all to black liste except super user. does it interfere with tinymce settings if i am the only author and log as super used on backend ?

On joomla forum they also advised to use switch editor plugin to avoid changing account to switch to codemirror and back to tinymce.

best regards
marc

0

Avatar aytech.gmbh.und.co.system answered

Thank you very much for this great Information.

It would be very nice to have some more extend Buttons like the one of widgetkit 2 in the standard editor to use the great features of uikit like the icons or buttons.
I can follow the instructions to do the fine things in html code but my customers are happy to use the editor - they could not understand the html part...

For that i wish to have some more extend Buttons in the editor to easyly use the great uikit features!

0

Avatar brandon.scivolette answered

Since this article was published are there any other recommendations for editors that incorporate UIKit styles? I agree that editors too often "correct" the code, which is why I don't use an editor. But, I have friends and family who need an editor and also use YooTheme/UIKit. Does anything exist that won't strip the styling?

Know someone who can answer? Share a link to this question via email or twitter.