javascript - Sir Trevor CSS 的样式无法正确显示 Ruby On Rails 应用程序

Question

我正在尝试实现一个允许人们创建和撰写博客的在线文本编辑器。我看到 SirTrevor 有一个非常漂亮的用户界面，我真的很想使用它。

我已经设法让它在技术上运行 on these instructions ，但用户界面根本不存在；一切都只是文本，没有图标或任何东西。我正在寻找类似于 example 的东西在他们的网站上列出。我已经安装了 Ruby on Rails Gem，并使用 Bower Install 在我的 Vendor/Assets 文件夹中获取我需要的文件。 CSS 和 JS 文件似乎都在加载(我可以看到它们的规则)。

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

我的代码如下:

博客.咖啡:

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

您需要将 Sir Trevor Assets 添加到 Rails Assets 。在 config/initializers/assets.rb 中:

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

路径可能因 Trevor 安装方法而异，我使用 yarn 安装它，根本没有使用 gem。无论如何，只需在您的安装中找到正确的路径即可。