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

Posted 2023-03-07

【中文标题】如何在 ActiveAdmin 表单块中使用 rails 6 ActionText 字段

【英文标题】：How do I use rails 6 ActionText fields in an ActiveAdmin form block

【发布时间】：2020-01-12 17:51:45

【问题描述】：

我利用新的 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 支持的任何信息

【参考方案1】：

我通过创建自定义格式输入和一些 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 版本，宽度有点不同。当您单击link 按钮时，请考虑使用以下 CSS 来处理该问题以及链接对话框。

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

【讨论】：

您可能需要更改 SCSS。我正在使用带有“active_admin_theme”的 activeadmin - 也许 SCSS 可以通用

谢谢你。有效！我一直在努力让这个工作。还感谢罗伯特在下面的输入。

【参考方案2】：

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

【参考方案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

【参考方案4】：

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

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