CKEditor strips <i> Tag

Question

I'm trying to find a solution to avoid CKEditor, but also the older FCKeditor strips out any <i> tag from previously inserted content to the db.

Case:

I insert html content to the db, some content contain the <i> elements. I do this with the CKEditor. Everything works perfect and the content shows up on the webpage. But when i want to edit the previously inserted content, the <i> elements are missing.

In my specific case i use:

<i class="fa-icon-fullscreen fa-icon-xxlarge main-color"></i>

Of course if i disable the editor, the content shows up just fine in the textarea.

Answer 1

When the protectedSource solution is used, i tags are no longer stripped, but img tags stop showing up in the WYSIWIG mode of CKEditor (I'm using 4.3.1). The solution that worked better for me is to disable removing empty i tags using CKEDITOR.dtd.$removeEmpty

For example, I added the following to the config.js

// allow i tags to be empty (for font awesome)
CKEDITOR.dtd.$removeEmpty['i'] = false;

Note: This should be placed outside the CKEDITOR.editorConfig = function( config ) function.

Answer 2

I found the solution for this specific problem i ran into with the <i> tag

The original answer i got from drupal forum

The fix or tweak (you name it) for it is to set the following into the ckeditors config.js:

// ALLOW <i></i>
config.protectedSource.push(/<i[^>]*><\/i>/g);

Thanks to Spasticdonkey for pointing me to the link.

Answer 3

Here is what works for me

add the 3 lines of code below in the same order in the drupal ckeditor profile setting admin/config/content/ckeditor/edit/Full

ADVANCED OPTIONS >> Custom JavaScript configuration

    config.allowedContent = true;
    config.extraAllowedContent = 'p(*)[*]{*};div(*)[*]{*};li(*)[*]{*};ul(*)[*]{*}';
    CKEDITOR.dtd.$removeEmpty.i = 0;

First line is pretty much turning off the advanced filtering

Second line is allowing ALL class (), any style {} and any attribute [*] for the p,div, li and ul.

The last line is for the empty tag...this line works with images...I have found that if you use config.protectedSource.push(/]*></i>/g); it strips out the tag while editing.