unable to add <i> tag in body field

[mrkhan]

Hello,

i am trying to add

<i class="fa fa-check-circle-o"></i>

tag in body field but this tag is getting cleared by CKEditor.

even in body field i have switch off the ACF and HTML purifier.

i also try to put bellow lines in EXTRA Allowed Content

<i>foo</i>
<i>
<i class="fa fa-check-circle-o"></i>

now when i put above code in HTML source and press OK the above code got deleted.

see attachment.

how to fix this?

Thanks

[pwired]

Hi,

If you want to allow 'class' like in your case <i class="fa fa-check-circle-o"></i>

then go to CK Editor settings for your field and find 'Extra Allowed content'

Setup => Fields => yourfield => Input => put use acf back to yes

then scroll down where you see Extra Allowed content and open it

Looking at the given examples linked to docs.ckeditor.com

it should be something like this:  i(fa fa-check-circle-o)

or simply this: i(*)
 

[adrian]

What about adding a Font Awesome plugin to Ckeditor:

http://ckeditor.com/addon/ckeditor-font-awesome

[mrkhan]

Hello pwired,

thanks for your reply. i have did same but still same.

<i class="fa fa-check-circle-o"></i>

is deleted when i come from HTML to source.

see the picture on bellow link of my field.

http://s18.postimg.org/3ztuw45h5/Screen_Shot_2015_11_07_at_10_42_11_PM.png

Thanks

[Tom.]

This isn't a solution to your problem, however why not use hanna-code? [[icon i=check-circle-o]] <- something like that? Look at the module hanna code

https://processwire.com/talk/topic/3745-hanna-code/

[pwired]

Hi mrkhan,

Ok I was digging this for a while and now have it working

It didn't work for me also in the beginning because I was testing it for the body field but overlooked the file

config-body.js Please first read  \site\modules\InputfieldCKEditor\README.txt

So, if you want to add/edit your <i class="fa fa-check-circle-o"></i> in your ckeditor body field then you have to configure

the file config-body.js To make this work: open in your editor \site\modules\InputfieldCKEditor\config-body.js

and make sure at the bottom it looks like this:

CKEDITOR.editorConfig = function( config ) {
    // Define changes to default configuration here. For example:
    // config.uiColor = '#AADC6E';
       config.enterMode = 2;
       config.allowedContent = 'i[*]{*}(*)';
};

The line config.enterMode = 2; prevents your <i> tag from being wrapped in a <p> tag wich is default behaviour of ckeditor.

The line config.allowedContent = 'i[*]{*}(*)'; allows the <i> tag with wild cards for attributes, styles and classes.

I tested this with processwire version 2.6.1 with a body field and all is working.

Disclaimer:

Tags and classes should stay in css outside ckeditor but when dealing with a client who is already used

to edit with a few html tags, adding only a few of them would be ok. I don't see any security issues here.

Installing the Hanna code module makes all this obsolete and is recommended by many people here.

But for only allowing a single html tag I think the powerful hanna code module is a bit overkill here.

[mrkhan]

Hi mrkhan,

Ok I was digging this for a while and now have it working

It didn't work for me also in the beginning because I was testing it for the body field but overlooked the file

config-body.js Please first read  \site\modules\InputfieldCKEditor\README.txt

So, if you want to add/edit your <i class="fa fa-check-circle-o"></i> in your ckeditor body field then you have to configure

the file config-body.js To make this work: open in your editor \site\modules\InputfieldCKEditor\config-body.js

and make sure at the bottom it looks like this:

CKEDITOR.editorConfig = function( config ) {
    // Define changes to default configuration here. For example:
    // config.uiColor = '#AADC6E';
       config.enterMode = 2;
       config.allowedContent = 'i[*]{*}(*)';
};

The line config.enterMode = 2; prevents your <i> tag from being wrapped in a <p> tag wich is default behaviour of ckeditor.

The line config.allowedContent = 'i[*]{*}(*)'; allows the <i> tag with wild cards for attributes, styles and classes.

I tested this with processwire version 2.6.1 with a body field and all is working.

Disclaimer:

Tags and classes should stay in css outside ckeditor but when dealing with a client who is already used

to edit with a few html tags, adding only a few of them would be ok. I don't see any security issues here.

Installing the Hanna code module makes all this obsolete and is recommended by many people here.

But for only allowing a single html tag I think the powerful hanna code module is a bit overkill here.

Thanks for all your help.