ckeditor extra allowed content not work properly

[adrianmak]

Tag will be removed when re-edit body field.

A video demo worth thousand words.

 

[kixe]

cool video 1000 words vs. 7 minutes video watching
One picture says more than 1000 words

Have a nice weekend

[adrianmak]

another small issue

From original font awesome website, it use <i> </i> tag for the font icon

I found that if I use <i></i> , when I save the content, ckeditor will convert it to <em></em> tag and removed all class

 

[kixe]

I agree, thats a bit tricky. There is a default setting in CKEditor which overrides the <i> tag with <em>.
Luckily CKEditor is highly configurable, even in ProcessWire.

If you don't want to disable ACF (Allowed Content Filtering) generally there is this specified solution:
Create a config file: /site/modules/InputfieldCKEditor/config.js (if its not already there)
with the following content to allow empty <i> tags as used for font-awesome icons

CKEDITOR.config.protectedSource.push(/<i[a-z0-9\=\'\"_\- ]*><\/i>/g);

 

[adrianmak]

17 hours ago, kixe said:

I agree, thats a bit tricky. There is a default setting in CKEditor which overrides the <i> tag with <em>.
Luckily CKEditor is highly configurable, even in ProcessWire.

If you don't want to disable ACF (Allowed Content Filtering) generally there is this specified solution:
Create a config file: /site/modules/InputfieldCKEditor/config.js (if its not already there)
with the following content to allow empty <i> tags as used for font-awesome icons

CKEDITOR.config.protectedSource.push(/<i[a-z0-9\=\'\"_\- ]*><\/i>/g);

 

Not quite working...

config.js is existed under the  /site/modules/InputfieldCKEditor/ folder
original config.js

/**
 * CKEditor custom config file for ProcessWire
 * 
 * Use this file to specify additional config options to all CKEditor instances, 
 * except those that have field-specific config files, i.e. config-body.js for 
 * config specific to a field named "body". 
 * 
 */

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

CKEDITOR.editorConfig = function( config ) {
	// Define changes to default configuration here. For example:
	// config.uiColor = '#AADC6E';
};

I tried adding  in

 

CKEDITOR.editorConfig = function( config ) {
	// Define changes to default configuration here. For example:
	// config.uiColor = '#AADC6E';
    config.protectedSource.push(/<i[a-z0-9\=\'\"_\- ]*><\/i>/g);
};

or  outside the function
 

CKEDITOR.editorConfig = function( config ) {
	// Define changes to default configuration here. For example:
	// config.uiColor = '#AADC6E';    
};

CKEDITOR.config.protectedSource.push(/<i[a-z0-9\=\'\"_\- ]*><\/i>/g);

Both location are not working at all.

[Macrura]

or if you need to have inline icons (within the editor), you could use a hanna code to convert the hanna tag into an icon.

[adrianmak]

Seems using hanna code is a better option. more clean and added html code not easy to mess up by users

And more important is I need not to care about of ckeditor settings

[kixe]

@adrianmak

1. I didn't say you should put something inside another function. Did I? You can remove all the other stuff from the file, because it is not needed.
2. What did you try to put inside your field? Please post here! The setting allows you to use exactly what I described. Nothing else!

For example

<i class="fa fa-awesome"></i> // allowed
<i class="fa fa-awesome">nobreakspace-or-whatever</i> // NOT allowed