ruby-on-rails - CKEditor 工具栏使用错误的图标文件(通过 Rails "rich"gem)

Question

我通过 Ruby on Rails 的“丰富”gem 使用 CKEditor。

它一直运行良好，但在某些时候我的编辑器图标开始看起来像这样:

我不确定是什么原因造成的，是我升级了什么还是什么。
(我确实知道它不是浏览器缓存问题。)

如何修复这些图标？

代码:

这是粗体按钮的 span 的 HTML元素(为便于阅读而添加的空格):

<span class="cke_button_icon cke_button__bold_icon"
    style="background-image:url(http://localhost:5000/assets/ckeditor/plugins/icons.png?t=E4KA);
      background-position:0 -24px;
      background-size:auto;">
  &nbsp;
</span>

以及 Chromium 解释的样式:

在最后一行中，url(icons.png)实际上解析为 http://localhost:5000/assets/ckeditor/skins/moono/icons.png

我能看到但不知道如何解决:

有两个不同的icons.png此处播放的文件:

1. <gem_path>/vendor/assets/images/ckeditor/plugins/icons.png
   (与背景位置偏移量 -24px 一起正常工作)
2. <gem_path>/vendor/assets/images/ckeditor/skins/moono/icons.png
   (针对不同的偏移值进行校准)

在代码片段中，您可以看到 CSS 指定了偏移量 -24px，因此第一张图片是正确的。行内元素样式指定第一张图片，但被 !important 覆盖-化 url(icons.png)加载第二张图片(这是错误的)。

它到底为什么要这么做？

我可以在不 fork gem 的情况下以某种方式解决这个问题吗？ (我可以 fork gem，但如果可能的话，我宁愿不维护一个单独的 fork 。)

Answer 1

在application.html.erb文件中添加如下CSS

.cke_ltr .cke_button_icon {
    background-image: url('/assets/ckeditor/plugins/icons.png?t=H5SC') !important;
}