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

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 2

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 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.

Answer 4

for 4.3 version ckeditor

in config.js (after config section) paste

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

and write widget with code

CKEDITOR.plugins.add( 'bwcaret', {
requires: ['widget'/*, 'richcombo'*/],

icons: 'bwcaret',

init: function( editor ) {

    editor.widgets.add( 'bwcaret', {

        button: 'Create a caret',

        template: '<b class="caret"></b>',


        allowedContent: 'b(!caret)',

        requiredContent: 'b(!caret)',

        upcast: function( element ) {
            return element.name == 'b' && element.hasClass( 'caret' );
        },

    });
}

});

Answer 5

There are two possible problems:

• Read about Advanced Content Filter. CKEditor is removing elements which are not allowed, but you can extend filter's rules.

• However, if the problem is that CKEditor removes empty <i> elements, then you need to find other way of using it. CKEditor is not a WYSIWYG website builder. It is a document editor, so the loaded content must have a meaning. Empty inline element does not have any meaning, therefore it is removed, because otherwise editor would not know what to do with it.

  One of the possible solutions in the (near) future, will be to use Widgets system, to handle those empty elements. But for now I advice you to check the CKEDITOR.htmlDataProcessor and short guide how to use it.

Answer 6

i found a permanent solution for it.actually what happened ckeditor removing only blank tag.whatever the tag is, may b <i> tag or <span> tag

if you are using any icon like font-awesome,maeterlize icon etc ... you can stop it by using below code in your config.js file

CKEDITOR.dtd.$removeEmpty.span = false; 
CKEDITOR.dtd.$removeEmpty.i = false;

if you are using more blank tag then you need to add the tag name after $removeEmpty

Answer 7

CKEditor 4 removes emtpy tags, so here you can do trick without changing any config settings.

Replace

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

With

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

Now <i></i> tag have content i.e.   so CKEditor will not remove that tag.