When using Font-Awesome, prevent CKEditor 4.x from removing <i></i>

@bensnyder are you sure this is just an issue with this Foundation theme or is this just a CKEditor/Font-awesome issue. If this is related to Foundation theme please post more details in regards to how this is not working as expected.

@bensnyder thanks for your note and the fix, since you state it's not a bug and you posted a fix I'm marking as fixed. I would suggest you post this possibly in the CKEditor/Font-awesome respective issue queues.

It appears that it's also catching the "img" tag with this solution because it starts with "i", so images are getting ckr_protected and commented out from the edit display.

Changed it a bit to be more specific - it will allow an i tag with a class, so works for font awesome and doesn't interfere with images:

config.protectedSource.push( /<i class[\s\S]*?\>/g ); //allows beginning <i> tag
config.protectedSource.push( /<\/i>/g ); //allows ending </i> tag

For those trying to use the "Custom javascript configuration" textbox in a Ckeditor profile, this solution does not work for some reason. I have other settings in that configuration that work but for some reason the protectedSource had to be added in a custom theme ckeditor.config.js file.

The correct regex is

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

Courtesy of http://stackoverflow.com/questions/18250404/ckeditor-strips-i-tag

#9 helps me to solve the problem with Fontawesome and images not showing on the CKEditor edit mode.

Thanks rich.yumul.

#9 works on first save but if you return to edit the same block of text containing tag the tags are stripped and need to be entered again.

To allow empty tag like "i", I have added at the end of ckeditor/config.js this line:
CKEDITOR.dtd.$removeEmpty.i = 0;

#12 Works!

Thank you.

uncommented the old and added the one liner from #12, now Font Icons work, as well as images display during edit.

  // ALLOW <i></i>
//  config.protectedSource.push( /<i[\s\S]*?\>/g ); //allows beginning <i> tag
//  config.protectedSource.push( /<\/i[\s\S]*?\>/g ); //allows ending </i> tag
CKEDITOR.dtd.$removeEmpty.i = 0;

Since this is a general CKeditor issue it may be more appropriate to move it to the CKeditor issues, so people can look this up there.

Thanks, knalstaaf. I link from your issue, too.

I didn't want to put much effort in this so I'm just using an empty space between the tags as follows: <i class="fa fa-search">&nbsp;</i>

This works fine, but the disadvantage is that, when you add a border to its container, the container won't look square or circular, but a little stretched and possibly out of center because of that very space.

It's easily solved though: you can adjust the padding to the point when everything looks balanced, or you can add a negative letter-spacing (try -3px).

Both CSS-approaches work.

I tried all kinds of approaches now, e.g. editing the default config.js file or adding a ckeditor.config.js to my theme. Neither worked for me.

Is it correct to adjust the file like this:

/**
 * @license Copyright (c) 2003-2014, CKSource - Frederico Knabben. All rights reserved.
 * For licensing, see LICENSE.md or http://ckeditor.com/license
 */

CKEDITOR.editorConfig = function( config ) {
	// Define changes to default configuration here. For example:
	// config.language = 'fr';
	// config.uiColor = '#AADC6E';
        CKEDITOR.dtd.$removeEmpty.i = 0;
};

For some reason this doesn't seem to fix the issue. As soon as I switch into rich text editor, the icon tags are stripped out.

#16 is a practical workaround.

I can't help thinking that ckeditor ought to be playing better with Font Awesome's default markup

#17 that wont work with latest version of CKEditor library
#18 there are both commercial and free plugins for font awesome but CKEditor module doesn't offer an option to enable either one of them. Since you can hardly find any modern website that doesn't use font awesome option to enable integration with either one of the font awesome plugins should be a priority feature request IMHO

Feature request posted as this issue is marked closed.

https://www.drupal.org/node/2385795

This is the only option that worked for me: https://www.drupal.org/node/2385795#comment-9681661

I agree with the solution at https://www.drupal.org/node/2385795#comment-9681661
but the value for config.extraAllowedContent is not relevant to this issue.

Though I also suggest one more line to render the icons in the CKeditor
config.contentsCss = '//cdn.jsdelivr.net/fontawesome/4.5.0/css/font-awesome.min.css';
Or use a local path if you installed the fontawesome library e.g. /sites/all/libraries/fontawesome/css/font-awesome.css

Or if you are using bootstrap, or any other custom CSS in the editor already you provide contentsCss as an array

This is my markup that enables font awesome, and glyphicons

config.allowedContent = true;
CKEDITOR.dtd.$removeEmpty.i = 0;
CKEDITOR.dtd.$removeEmpty['span'] = false;
config.contentsCss = ['//cdn.jsdelivr.net/fontawesome/4.5.0/css/font-awesome.min.css','//cdn.jsdelivr.net/bootswatch/3.3.6/readable/bootstrap.css'];

In my case, I was having the glyphicon spans removed (<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>). I tried several different approaches without success. Finally as mentioned in #0 I created a new ckeditor.config.js file in the root of my theme with the lines:

config.allowedContent = true;
CKEDITOR.dtd.$removeEmpty.i = 0;
CKEDITOR.dtd.$removeEmpty['span'] = false;

from #22. This didn't quite work, I also had to add a non breaking space inside the span tag for it finally to not be removed, so the eventual span tag became:

<span class="glyphicon glyphicon-chevron-left" aria-hidden="true">&nbsp;</span>.

@bmango thanks, that worked.

Thanks, #23 works using &nbsp;

I'm using Drupal 8.3.3. You can resolve this issue with following steps:

1. Go to Configuration > CONTENT AUTHORING > Text formats and editors
2. Edit "Full HTML"
3. Under "Filter settings", you will see "Allowed HTML tags"
4. Add <i> and Save the configuration.

doesnt work

Hi,

config.allowedContent = true;
CKEDITOR.dtd.$removeEmpty.i = 0;
CKEDITOR.dtd.$removeEmpty['span'] = false;

Is not necessary to add in ckeditor.config.js. It can also be placed in advanced settings and then add the .js code.
But in my case all that I added..when I click on [CODE] it is stripped again.
It is saved correct, but not shown correct after that in Wyziwyg.
greetings, Martijn

I found that this is a two-step dance.

1. stop ck from stripping i tags entirely when toggling source mode
2. allow empty i tag

Solutions that worked for me.

[See update in #34 where the only thing in Advanced Javascript is a pointer to a custom config js file in theme folder.]

1. In my CK Advanced Javascript, I could not get the recommended to work, likely because debugging showed no such array.
config.protectedSource.push( /<i[^>]*><\/i>/g )

I use this instead.
config.protectedSource = [/<i[^>]*><\/i>/g];

2. In my custom theme config file
CKEDITOR.dtd.$removeEmpty['i'] = false;

You can do this with other tags, of course, although this is bad html as much as empty i tags are.

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

@darkodev your solution (#29) worked for me. Thank you *-*

in your template add :

/**
 * Return markup for a fontawesome icon.
 */
function YOUR-THEME-NAME_fa_icon($vars){
  // Add the icon name.
  $vars['attributes']['class'][] = 'fa-' . $vars['icon'];
  
  // Return an i tag just like FontAwesome likes.
  return '<i ' . drupal_attributes($vars['attributes']) . '></i>';
}

an other solution juste with HTML add a space " "
<span class="glyphicon glyphicon-folder-open">&nbsp;</span>not <span class="glyphicon glyphicon-folder-open"></span>

Hi @darkdodev,

What did you mean on Comment #29 when you said "In my custom theme config file"? Are you referring to the .info or template.php file?

E.

@erok415

Neither. In CKEditor "Custom JavaScript configuration" I now have a single line pointing to a custom config file in my theme where I do all the work:

config.customConfig='/path/to/theme/js/ckeditor_custom_config.js';

In that file, I do

CKEDITOR.dtd.$removeEmpty['i'] = false;
CKEDITOR.dtd.$removeEmpty['span'] = false;
CKEDITOR.config.protectedSource = [/<i[^>]*><\/i>/g];

Does anybody know how can we add this code in D8 module?

Striping tags from CKEditor is really frustrating.

#29 from @darkodev worked for me (I'm on Drupal 8.9.11).

So it's all in once place, after lots of hunting, here's how to apply custom configuration to CKEditor in Drupal 8, without PHP or editing any core files:

1. Install and enable the CKEditor Custom Config module
2. Create an empty file called 'my.custom.ckeditor.config.js' in your theme
3. Edit your text format (/admin/config/content/formats/) and add this line under 'CKEditor Custom Configuration' (from #34):

customConfig = "/path/to/my/theme/my.custom.ckeditor.config.js"

4. Inside my.custom.ckeditor.config.js, add:

CKEDITOR.editorConfig = function( config ) {
    
    // permit empty <i> tags (https://www.drupal.org/project/ckeditor/issues/1908696#comment-12829991)
	config.protectedSource.push(/<i[^>]*><\/i>/g);
};

// Prevent removal of <i> tags (for font awesome)
CKEDITOR.dtd.$removeEmpty['i'] = false;

5. Rebuild the site cache

This is awesome, thanks!
gr,