使用CKEditor编辑HTML文本时，有时可能需要插入带有样式的空标签，例如显示glyphicons图标的<i>标签：

<i class="glyphicon glyphicon-user"></i>

但是，默认设置下，CKEditor会过滤掉空的<i>标签。

在ckeditor.config.js中添加如下代码即可实现在CKEditor (4.3.x)编辑器中插入一个带有样式的空的<i>标签：

// allow i tags to be empty (for font awesome)
config.protectedSource.push(/<i[^>]><\/i>/g);
CKEDITOR.dtd.$removeEmpty['i'] = false;
config.allowedContent = true;

参考博文：Configure CKEditor to allow entering empty tags

---

原文步骤摘录如下：

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[]{}(*)';

Sources: Stackoverflow, Drupal.org

本文链接：http://bookshadow.com/weblog/2014/08/22/configure-ckeditor-to-allow-entering-empty-tags/
请尊重作者的劳动成果，转载请注明出处！书影博客保留对文章的所有权利。

如果您喜欢这篇博文，欢迎您捐赠书影博客： ，查看支付宝二维码