3

I am using http://fortawesome.github.com/Font-Awesome/ - popular iconic font

When I insert "i" tag i.e. it is saved only in source mode enabled, but removed from html when saving in wysiwyg mode.

How to avoid removing i tag? (using Ckeditor with Drupal 7 and Wysiwyg module)

9

As Vic Nicethemer pointed out - the solution (for me) was to add &nbsp; within the <i> and </i> like so: <i class="icon-facebook">&nbsp;</i>.

CKEDitor removes elements that do not have any internal content...

6

Adding &nbsp between the tags isn't the greatest since it's adding additional unneeded markup.

To do this a better way I suggest creating a custom WYSIWYG module to tweak the CK Editor settings.

Basically, create a module that adds a ckeditor-config.js for extra configuration settings with hook_wysiwyg_editor_settings_alter()

Inside the file you add:

CKEDITOR.editorConfig = function( config ) {

  // allow i tags to be empty (for FontAwesome)
  CKEDITOR.dtd.$removeEmpty['i'] = false;

}

Here is a CK WYSIWYG Tweaks module on Github I created, download and install like a regular module if you have WYSIWYG w/ CK editor already running. Then add any other tweaks you need, the tweak to stop disappearing tags is alread there!

1

You've probably enabled the "Limit allowed HTML tags" option. In this case You've to enable the "i" tag on the input format filter.

  1. Open admin/config/content/formats
  2. Click "configure" on the input format you're using
  3. Add <i> on "Allowed HTML tags" setting
  • I am using Full HTML format with no limits - no matter. But even when i have added <i> tag it is removed (maybe by javascript) while switching. Note that it is saved and show up in content only when i disable Ckeditor using "Disable rich-text" link – Vic Nicethemer Feb 28 '13 at 5:33
  • SOLVED: i added &nbsp; between i open and close tags and now it is not disappeared! Think it some way parse HTML and if between i tags is nothing - it remove entire tags - very annoying – Vic Nicethemer Feb 28 '13 at 5:41
0

I created an unrestricted_html format under /admin/config/content/formats/ that I only give to administrators.

I unchecked [ ] Limit allowed HTML tags & [ ] WYSIWYG Filter & was able to use the <i> tags successfully.

I also don't have a Wysiwyg profile associated with this format. My assumption is that as an administrator, more likely than not, they know how to write raw html.

0

Here's another method of forcing CKEditor not to strip out empty <i> without adding a new text format (or exposing your site to insecure code):

  1. Edit your CKEditor profile. (For me, it was admin/config/content/ckeditor/edit/Advanced.)
  2. Scroll down to the bottom and expand the "Advanced options" fieldset.
  3. In the "Custom JavaScript configuration" field, add the following: config.allowedContent = true; CKEDITOR.dtd.$removeEmpty.i = 0;

(These instructions originaled from https://www.drupal.org/node/2385795#comment-9681661 with some minor tweaks.)

Not the answer you're looking for? Browse other questions tagged or ask your own question.