adrianmak Posted May 20, 2017 Share Posted May 20, 2017 Tag will be removed when re-edit body field. A video demo worth thousand words. 1 Link to comment Share on other sites More sharing options...
kixe Posted May 20, 2017 Share Posted May 20, 2017 cool video 1000 words vs. 7 minutes video watching One picture says more than 1000 words Have a nice weekend 2 Link to comment Share on other sites More sharing options...
adrianmak Posted May 20, 2017 Author Share Posted May 20, 2017 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 Link to comment Share on other sites More sharing options...
kixe Posted May 21, 2017 Share Posted May 21, 2017 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); 1 Link to comment Share on other sites More sharing options...
adrianmak Posted May 22, 2017 Author Share Posted May 22, 2017 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. Link to comment Share on other sites More sharing options...
Macrura Posted May 22, 2017 Share Posted May 22, 2017 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. 1 Link to comment Share on other sites More sharing options...
adrianmak Posted May 22, 2017 Author Share Posted May 22, 2017 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 Link to comment Share on other sites More sharing options...
kixe Posted May 22, 2017 Share Posted May 22, 2017 @adrianmak 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. 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 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now