Rails actiontext/trix显示问题

Question

我正试图将一个丰富的文本编辑器整合到我的应用程序中，却没有运气。我打算使用CKEditor，但是Rails 6与actiontext/trix集成得很好.或者我是这样想的。

我遵循了https://edgeguides.rubyonrails.org/action_text_overview.html的标准安装步骤

因此，除非我遗漏了什么，否则我现在在这些文件中有以下代码：

app/javascript/packs/actiontext.scss

@import "trix/dist/trix";

.trix-content {
  .attachment-gallery {
    > action-text-attachment,
    > .attachment {
      flex: 1 0 33%;
      padding: 0 0.5em;
      max-width: 33%;
    }

    &.attachment-gallery--2,
    &.attachment-gallery--4 {
      > action-text-attachment,
      > .attachment {
        flex-basis: 50%;
        max-width: 50%;
      }
    }
  }

  action-text-attachment {
    .attachment {
      padding: 0 !important;
      max-width: 100% !important;
    }
  }
}

app/javascript/packs/application.js

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")

import $ from 'jquery';
import 'bootstrap/dist/js/bootstrap';

$(document).on('turbolinks:load', function() {
  $('body').tooltip({
    selector: '[data-toggle="tooltip"]',
    container: 'body',
  });

  $('body').popover({
    selector: '[data-toggle="popover"]',
    container: 'body',
    html: true,
    trigger: 'hover',
  });
});

require("trix")
require("@rails/actiontext")

app/javascript/packs/application.scss

@import "./actiontext.scss";

我希望编辑器出现的模型是：app/models/note.rb

class Note < ApplicationRecord
  has_rich_text :comment
end

关联的视图/表单现在如下所示，只有comment字段是富启用的：comment

<%= form_for @note, url: project_target_note_path(id: @note.id) do |f| %>
    <div class="form-group">
        <%= f.label :title %>
        <%= f.text_field :title, class: "form-control" %>
    </div>
    <div class="form-group">
        <%= f.label :comment %>
        <%= f.rich_text_area :comment, cols: 20, rows: 40, class: "form-control" %>
    </div>
    <div>
        <%= f.submit "Update", class: "btn btn-success" %>
    </div>
<% end %>

我在这里不知所措..。根本没有按钮出现：

​

​

我错过了什么？

更新1: I将actiontext.scss从.../packs/移到app/assets/stylesheets/中，并更改了一些导入：

因此，现在app/assets/stylesheets/application.scss只是：

//= require actiontext

我重新启动了webpacker和rails服务器：

> bin/webpack-dev-server
> rails s

现在我得到了按钮，但它们没有图标：

​

更新2：

用图标显示按钮..。终于来了。不确定这是否正确，因为它没有文档化，但我不得不手动导入application.scss。

../layouts/application.html.erb我补充道：

<%= stylesheet_link_tag "application" %>

Answer 1

如果有人遇到同样的问题:对我来说，它帮助导入了application.scss中的trix样式和新的actiontext样式表(不仅仅是像Rails指南中建议的那样的样式表)。对我来说，命令也很重要！

// application.scss
@import "trix/dist/trix";
@import "./actiontext.scss";

Answer 2

对于rails 6，您需要在javascript/packs/application.js内部要求import 'trix/dist/trix.css'; (对于css样式)

​

​

Answer 3

虽然我不认为这是一个理想的解决方案，我提供了两个更新以上似乎解决了我的问题。

1:将actiontext.scss保存在app/assets/stylesheets (最初生成它的地方)中。

2:在application.scss中手动导入..layouts/application.html.erb