CODEWITHSUNDEEP
ckeditor5
Ash Gajankush
Ash Gajankush

Reputation: 11

How can I add Font Awesome support to Ckeditor5?

I am trying to add Font Awesome support to Ckeditor5-inline and it just removes the "i" tags from HTML when I go in Edit mode.

Upvotes: 1

Views: 1571

Answers (1)

ArunPratap
ArunPratap

Reputation: 5020

First download font awesome if you haven't already then

 1. Extract the downloaded file (fontawesome.zip) Copy the "fontawesome"
 2. folder to "ckeditor/plugins/" folder Open the file
 3. "ckeditor/config.js"

configure that like this and clear your browser's cache

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

In your HTML's section add this code:

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

after that you can Use toolbargroupname: "FontAwesome" in your toolbar like this

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

as you commented your are using Django Integration in Django CMS

Django CMS enables adding text-based content to a site using CKEditor which is integrated through the module called djangocms_text_ckeditor. In that module is a static folder and settings.py file, which are setup in a manner that enables fully customizing CKEditor.

you can check here for Django Integration

Upvotes: 1

Related Questions