Rails actiontext/trix 显示问题

Posted 2023-03-07

【中文标题】Rails actiontext/trix 显示问题

【英文标题】：Rails actiontext/trix display issues

【发布时间】：2020-06-24 16:20:48

【问题描述】：

我正在尝试将富文本编辑器合并到我的应用程序中，但没有运气。我打算使用 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 字段是启用丰富的字段： app/views/notes/edit.html.erb

<%= 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： 我将 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" %>

【问题讨论】：

欢迎来到 ActionText/ActiveStorage 马戏团！您的浏览器控制台是否出现任何错误？

什么都没有！

我通过将actiontext.scss 移动到app/stylesheets/ 取得了一些进展。现在我得到了按钮，但它们只是一堆文本，没有图标......

您能否检查一下您的 actiontext.scss 或 application.scss 中是否还需要“trix”？顺便说一句，我认为您需要自己设置高度，行/列属性似乎没有任何作用

.form-control.trix-content min-height:300px;最大高度：80%；高度：50%；溢出-y：自动；

【参考方案1】：

对于rails 6，您需要在javascript/packs/application.js 中添加import 'trix/dist/trix.css';（用于css 样式）

【参考方案2】：

如果有人在这里遇到同样的问题： 对我来说，它有助于在application.scss 中导入 trix 样式和新的 actiontext 样式表（不仅仅是 Rails 指南中建议的样式表）。 对我来说，顺序也很重要！

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

【参考方案3】：

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

1：将actiontext.scss 保留在app/assets/stylesheets（最初生成的位置）中。

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