Configure CKEditor to allow enterting empty tags

Apr 22, 2014 12:29 · 285 words · 2 minute read drupal

My previous post was about convincing CKEditor to not stripping class attributes from the markup. But the issues I had went beyond allowing class attributes.

I need the following markup to be rendered exactly as shown:

<p class="btn medium default"><a href="/node/9">Zur Kontaktseite <i class="icon-right-open-big"></i></a></p>

The (empty) <i> tag kept on being removed and it turned out to be more complicated than expected to change that behavior.

Here are the steps to allow empty <i> Tags in CKEditor (4.3.x) inside Drupal (7.x).

  1. Allow the _tag for your desired text formt

    • Make sure to Load ckeditor.config.js from the theme path
    • Copy ckeditor.config.js from ckeditor module folder to your default theme (Note: CKEditor will always use the configuration from your default theme. I’m using an administration theme for editing content and would have thohght the configuration is looked up there)
    • Add the following configuration to your custom ckeditor.config.js

// allow i tags to be empty (for font awesome)
config.protectedSource.push(/<i[^>]*><\/i>/g);
CKEDITOR.dtd.$removeEmpty['i'] = false;
config.allowedContent = 'p i(*); strong em strike cite blockquote code ul ol li dl dt dd br h2 h3 h4 h5;a[!href,title];img[!src,width,height,alt,title]{width,height,text-align,float};table thead tbody tr th td[*]{*}(*)';

Note: For whatever reason it does not work to set config.protectedSource.push inside the textarea Custom Javascript Configuration of the CKEditor configuration page.

Sources: Stackoverflow, Drupal.org

Update

I did the above to comply with the default buttons and icons of the Gumby Framework. After having a second look at the Gumby docs I found out there’s no need to have extra markup just to put an icon inside a button. By using the following markup I could get rid off the <i> tag and still have the desired icon appearing inside a button:

<p class="btn medium default icon-right icon-right-open-big"><a href="/node/9">Zur Kontaktseite</a></p>