如何在 ActiveAdmin 表单块中使用 rails 6 个 ActionText 字段

Question

我利用新的 ActionText 功能构建了一个小型 rails 6 应用程序。但是，ActiveAdmin 似乎不支持新字段类型 (rich_text_area)

我试过使用 gem active_admin_trix，它有效（如果你在 active_admin 中加载 trix v1.2，但它不显示字段的现有值在编辑字段中

我也试过只加载 trix 库并使用 f.rich_text_area 即：

form do |f|
  f.semantic_errors *f.object.errors.keys
  f.inputs do
    f.input :name
    f.rich_text_area :description
  end
  f.actions
end

虽然这可以正常工作，但它不会显示 "label"，因为该字段在 ActiveAdmin 布局中不适合。但是它确实正确显示了当前内容

有没有其他人在 ActiveAdmin 中成功使用 ActionText

我的猜测是需要 Formtastic 支持，但我也未能在 Formtastic 中找到有关 ActionText 支持的任何信息

Answer 1

我解决了它创建一个自定义 formtastic 输入和一点 CSS

我把下面的放在app/admin/inputs/action_text_input.rb

 class ActionTextInput < Formtastic::Inputs::StringInput

    def to_html
      input_wrapping do
        editor_tag_params = {
                input: input_html_options[:id],
                class: 'trix-content'
        }
        editor_tag = template.content_tag('trix-editor', '', editor_tag_params)
        hidden_field = builder.hidden_field(method, input_html_options)
        label_html + hidden_field + editor_tag
      end
    end
  end

将以下内容添加到/app/assets/stylesheets/active_admin.scss

的末尾

.active_admin {
  form trix-editor {
    margin-left: 20%;
    width: calc(80% - 17px);
  }
}

然后在您的 ActiveAdmin 表单中使用

调用它

f.input :your_active_text_field, as: :action_text

此外，按照@Robert 的回答中的建议，添加

:your_input_field 到 permit_params 在 your_active_admin_page.rb
//= require trix/dist/trix 到 assets/javascripts/active_admin.js
@import "trix/dist/trix"; 到 assets/stylesheets/active_admin.scss

已更新CSS

对于较新的 activeadmin 版本，宽度略有不同。考虑以下 CSS 来处理该问题，并在单击 link 按钮时出现 link 对话框。

.active_admin {
  form trix-editor, form .trix-dialogs .trix-dialog--link {
    margin-left: 20%;
    width: calc(80% - 22px);
    border: 1px solid #c9d0d6;
    border-radius: 3px;
  }

  form trix-editor {
    min-height: 100px;
    margin-top: 10px;
    padding: 8px 10px 7px;
    background-color: white;

    &:focus {
      border: 1px solid #99a2aa;
      box-shadow: 0 0 4px #99a2aa;
      outline: none;
    }
  }

  form .trix-dialogs .trix-dialog--link {
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 10px;
    background-color: #eeeeee;

    .trix-button-group {
      margin-top: 10px;
    }
  }
}

Answer 2

我在 Github 回购上创建了一个问题，希望他们能尽快支持它。 https://github.com/activeadmin/activeadmin/issues/6106

Answer 3

此外，添加

:your_input_field 到 permit_params 在 your_active_admin_page.rb
//= require trix/dist/trix 到 assets/javascripts/active_admin.js
@import "trix/dist/trix"; 到 assets/stylesheets/active_admin.scss

Answer 4

一个更简单但不太优雅的解决方案是将标签单独添加到表单

  li "<strong>Text</strong>".html_safe
  f.rich_text_area :text

如何在 ActiveAdmin 表单块中使用 rails 6 个 ActionText 字段

How do I use rails 6 ActionText fields in an ActiveAdmin form block

formtastic

activeadmin

ruby-on-rails-6

actiontext