Question

我正在尝试实现一个在线文本编辑器，允许人们创建和编写博客。我看到SirTrevor有一个非常流畅的用户界面，我非常热衷于使用它。

我已经设法让它在技术上基于on these instructions工作，但UI根本就不存在;一切都只是文字，没有图标或任何东西。我希望得到与其网站上列出的example类似的内容。我已经安装了Ruby on Rails Gem，并使用Bower Install在Vendor / Assets文件夹中获取我需要的文件。 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

您需要将Sir Trevor资产添加到Rails资产中。在config/initializers/assets.rb内：

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

根据Sir Trevor的安装方法，路径可能会有所不同，我使用yarn安装它而不使用gem。无论如何，只需在您的安装上找到正确的路径。

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

1 个答案: