Question

我正在使用内联编辑器。

工具栏按钮图标具有以下标记：

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

注意范围中的&nbsp。这非常令人讨厌，因为它几乎不可能使图标居中，因为我使用字体很棒的图标。

我们可以在某个地方请求CKEditor不插入 吗？

Answer 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;
}

删除CKEditor工具栏按钮图标

1 个答案: