## SOLVED ## Fontawesome icon problem Ckeditor

[peppos]

I'm doing some tests with WebsiteBaker and I'm using icons http://fontawesome.io
Because to put these icons you use for example this code:

Code: [Select]

<i class="fa fa-check" aria-hidden="true"></i>
If I put it in the template, for example index.php I have no problems. But if I have to put through the admin panel CKEditor, I have to put the viewing html and saves me well. But then if at a later time I make a change to that I find the page with the missing icon and the modified code from CKEditor. How can I do to prevent ckeditor to change myself the html code that put me? I will not completely disable CKEditor because it is still useful.

[Boudi]

This is because the CK Editor strips out the <i> tag.

There is a workaround but even this doesn't seem to work.

In the wb_ckconfig.js I commented out the:

Code: [Select]

config.protectedSource.push( /<i[\s\S]*?\>/g ); //allows beginning <i> tag
config.protectedSource.push( /<\/i[\s\S]*?\>/g ); //allows ending </i> tag

And even inserted extra code:

Code: [Select]

config.protectedSource.push( /<i class[\s\S]*?\>/g );
config.protectedSource.push( /<\/i>/g );

Refreshed the mods, cleared the cache. But still no luck.

Any solutions over here guys?

[dbs]

In newer WB versions the include.php of ckeditor is stronger as the wb_ckconfig.js.
If you have the same parameters in these two files, the parameter in include.php wins.

try this line

Code: [Select]

config.protectedSource.push( /<i class[\s\S]*?\/i>/g );

[Boudi]

Hi,

Thnq for picking this up.

Implemented your code into wb_ckconfig.js the CKEditor (V4.6.2). Refreshed the mods. Cleared the browser cache and had to login again into the backend.

No luck.

Even replaced the double quotes with single ones - no luck
Even put an &nbsp; into the open <i>&nbsp;</i> - no luck

[dbs]

Had my line tested before in ckeditor/wb_config/wb_ck_config.js. works for me.

Code: [Select]

<h2><span style="color:#a52a2a">PHP [[php-version]] (NON STRICT) </span><i class="fa fa-heart"> </i></h2>
Where is your wb_ckconfig.js?
The search order is
1. directly in your template
2. in folder /templates/
3. in modules/ckeditor/wb_config/

[Boudi]

In admin > Modules > ckeditor > wbconfig > wb_ckconfig.js

Around line 187 it starts with:

Code: [Select]

    /* Protect PHP code tags (<?...?>) so CKEditor will not break them when switching from Source to WYSIWYG.
    *  Uncommenting this line doesn't mean the user will not be able to type PHP code in the source.
    *  This kind of prevention must be done in the server side, so just leave this line as is. */
    config.protectedSource.push(/<\?[\s\S]*?\?>/g); // PHP Code
//    config.protectedSource.push(/\[\[[\s\S]*?\]\]/g); //  droplets
//    config.protectedSource.push( /<i[\s\S]*?\>/g ); //allows beginning <i> tag
//    config.protectedSource.push( /<\/i[\s\S]*?\>/g ); //allows ending </i> tag
//    config.protectedSource.push( /<span[\s\S]*?\>/g ); //allows beginning <span> tag
//    config.protectedSource.push( /<\/span[\s\S]*?\>/g ); //allows ending </span> tag
    //disable ckes Advanced Content Filter (ACF) to avoid wblinks to be filtered?
    config.allowedContent = true;

Commented out the <i> doesn't work. Your solution neither and my first aproach neither too.

refreshed mods, cleared browser cache and logged in again in the backend. Tried double quotes, single quotes and html space.

Like you said, it seems that looks like it's overruled by something.

[dbs]

In your case you should it change in ckeditor/include.php instead in wb_ckconfig.js.

[Boudi]

Is there any specific location? Do I have to open/close this code with tags?

Code: [Select]

config.protectedSource.push( /<i class[\s\S]*?\/i>/g );


[dbs]

Sorry, forget my last post.
In include.php is not this line.
ckeditor is looking for wb_ckconfig.js in the order i posted above.
I understand in your case you have in your template or the templates folder no wb_ckconfig.js.

[Boudi]

Correct. I only have the config files in the modules > ckeditor.

But John Broeckaert sent me a pm with a simple droplet solution. He wasn't able to respond to this topic so here it is:

Code: [Select]

return '<i class="fa fa-'.$f.'"></i>';
So it's not the most clean solution but it's better than nothing.

@DBS and @Johnbroeckaert, thank you for your time, help and support.

Kind regards,

Boudi