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).
- 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>