CODEWITHSUNDEEP
ckeditorfont-awesome
klaaz
klaaz

Reputation: 551

Adding Fontawesome to ckeditor

I am using Fontawesome in my website and have my own CMS to edit the website pages. What I would like to develop is a dialog for the user where he can pick an fontawesome icon but for now it is OK to add them in the codeview of ckeditor.

Icons added to the content are not shown in ckeditor designview. I have changed ckeditor config file so that the editor accepts i tags (*). I added the fontawesome CSS file as an @import rule to contents.css but still no fontawesome icon visible in the editor area.

(*)config.js

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

What can I do to make this work?

Upvotes: 1

Views: 6499

Answers (5)

Dmitry Shashurov
Dmitry Shashurov

Reputation: 1714

Instead of:

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

use more stronger and best way:

config.protectedSource.push(/<i class="fa[s|r|l|b] [A-Za-z0-9\-]+"><\/i>/g);

Because when user pasting content from another source, CKEDITOR.dtd should remove empty < i >, or convert < i > to semantic < em >, but only fontawesome icons with class="fas/far/fal/fab *" should be preserved.

(Naming in fontawesome: https://fontawesome.com/how-to-use/on-the-web/setup/getting-started)

Upvotes: 0

alex Roosso
alex Roosso

Reputation: 121

I'm using 4.11.4 and this solution not working correctly

This solution correctly work on 4.11.4

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

Goodluck

Upvotes: 0

icemanblas
icemanblas

Reputation: 91

Take a look at this: ckeditor fontawesome addon.

Basically, you should download the fontawesome addon in zip format, and extract to "ckeditor/plugins/", with the name "fontawesome". Then, open "ckeditor/config.js" and signal the usage of the new addon:

config.extraPlugins = 'fontawesome';
config.contentsCss = 'path/to/your/font-awesome.css';
config.allowedContent = true;

The next thing is to edit your HTML's section:

<script>CKEDITOR.dtd.$removeEmpty['span'] = false;</script>

The final step is to use the toolbargroupname: "FontAwesome" in your toolbar:

config.toolbar = [
    { name: 'insert', items: [ 'FontAwesome', 'Source' ] }
];

Here is a demo.

This also applies for glyphicons, in the same way the fontawesome is used.

Cheers

Upvotes: -2

Shawn Rebelo
Shawn Rebelo

Reputation: 1087

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

What you have will interfere with img tags. AND OR, after all of config:

CKEDITOR.dtd.$removeEmpty['i'] = false;

Both work well. Just be sure you have cleared cache completely when making changes.

*EDIT One works while messing something else up. A no go solution.

I stopped using this bulky editor. Created my own. However, to solve the solution, use EM or SPAN instead of I tags for this.

Upvotes: 4

AlfonsoML
AlfonsoML

Reputation: 12690

When you add something to the protectedSource setting, you're hiding it from the editor, that content is converted into a HTML comment to protect it and avoid that it can be modified by the user, but being a comment it's obviously hidden.

Upvotes: 1

Related Questions