Configure CKEditor to allow enterting empty tags

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
2. Make sure to Load ckeditor.config.js from the theme path
3. 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)
4. 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>