CODEWITHSUNDEEP
tagsckeditorfckeditor
HenryW
HenryW

Reputation: 3761

CKEditor strips <i> Tag

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.

Upvotes: 50

Views: 55205

Answers (7)

Dhaval Bharadva
Dhaval Bharadva

Reputation: 3083

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. &nbsp; so CKEditor will not remove that tag.

Upvotes: 2

Soubhagya Kumar Barik
Soubhagya Kumar Barik

Reputation: 2595

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

Upvotes: 3

Mike Peterson
Mike Peterson

Reputation: 1099

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.

Upvotes: 74

Alauddin
Alauddin

Reputation: 381

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.

Upvotes: 26

HenryW
HenryW

Reputation: 3761

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.

Upvotes: 64

Andrey
Andrey

Reputation: 51

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' );
        },

    });
}

});

Upvotes: 5

Reinmar
Reinmar

Reputation: 22023

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.

Upvotes: 2

Related Questions