删除 CKEditor 工具栏按钮图标答案

【问题标题】：Remove CKEditor toolbar button icon's  删除 CKEditor 工具栏按钮图标
【发布时间】：2014-05-09 01:57:08
【问题描述】：

我正在使用内联编辑器。

工具栏按钮图标有这样的标记：

<span class="cke_button_icon cke_button__bold_icon">&nbsp;</span>

注意跨度中的&nbsp。这非常烦人，因为它几乎不可能使图标居中，因为我为图标使用了很棒的字体。

是否有设置可以让 CKEditor 不插入&nbsp;？

【问题讨论】：

标签： ckeditor

【解决方案1】：

经过一番测试，我想出了一个 CSS 方法来处理这个问题。

我认为 CKEditor 插入 &nbsp 是为了遵守 WCAG 指南（并没有真正花太多时间研究这个）。

整个按钮的标记如下所示：

<a onclick="CKEDITOR.tools.callFunction(2,this);return false;" onfocus="return CKEDITOR.tools.callFunction(1,event);" onkeydown="return CKEDITOR.tools.callFunction(0,event);" onblur="this.style.cssText = this.style.cssText;" aria-disabled="true" aria-haspopup="false" aria-labelledby="cke_8_label" role="button" hidefocus="true" tabindex="-1" title="Undo" class="cke_button cke_button__undo cke_button_disabled " id="cke_8">
  <span style="" class="cke_button_icon cke_button__undo_icon">&nbsp;</span>
  <span aria-hidden="false" class="cke_button_label cke_button__undo_label" id="cke_8_label">Undo</span>
</a>

我所做的是将图标放置在与nbsp 创建的空间重叠的位置（我使用的是 SCSS，所以我可以使用@extend 插入字体真棒图标）：

.cke_button{
  position: relative; //Relative so that any absolute children are positioned relatively to this container
  width: 16px;
  padding: 5px;
}

.cke_button_icon{
  @extend .fa;
  text-align: center;
}

.cke_button_icon{
  position: absolute; //Position absolutely relative to parent
  width: 16px;
}

.cke_button__undo_icon{
    @extend .fa-undo;
}

【讨论】：