如何在 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

虽然这可以正常工作，但它不会显示“标签”，因为该字段在 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按钮时的链接对话框。

.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;
    }
  }
}