Trevor爵士CSS没有正确显示Rails应用程序的样式

Question

我正在尝试实现一个在线文本编辑器，它允许人们创建和编写博客。我看到SirTrevor有一个非常精巧的UI，我非常喜欢使用它。

我已经设法让它在技术上运行，但是UI根本不存在；所有东西都是文本的，没有图标什么的。我想得到一些类似的示例上市在他们的网站。我安装了Rails，并使用Bower在我的供应商/资产文件夹中获取我需要的文件。CSS和JS文件似乎都在加载(我可以看到它们的规则)。

当我将所提供的示例的源代码与我的示例进行比较时，我没有任何SVG元素，我想知道这里是否需要做一些额外的事情

我的代码如下：

blogs.coffee:

SirTrevor.setDefaults({
    iconUrl: '/assets/images/sir-trevor-icons.svg'
})
editor = new SirTrevor.Editor({
    el: $('.sir-trevor-area'),
    defaultType: 'Text'
});

文档建议我们使用document.querySelector("...")而不是jQuery，但这会导致更糟糕的结果--只是一个纯文本区域。

_form.html.erb

<%= form.text_area :main_body, {:class=>"sir-trevor-area"}%>

Answer 1

您需要将Trevor爵士资产添加到Rails资产中。内部config/initializers/assets.rb

Rails.application.config.assets.precompile += %w(
  sir-trevor/build/sir-trevor-icons.svg
)

路径可能会有所不同，这取决于Trevor的安装方法，我在没有使用gem的情况下用yarn安装它。无论如何，只要在安装上找到正确的路径即可。