4

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

4

4 回答 4

8

我解决了它，创建了一个自定义格式输入和一些 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;
    }
  }
}
于 2019-10-20T03:55:08.470 回答
3

Additionally, add

  • :your_input_field to permit_params in your_active_admin_page.rb
  • //= require trix/dist/trix to assets/javascripts/active_admin.js
  • @import "trix/dist/trix"; to assets/stylesheets/active_admin.scss
于 2020-04-18T14:18:07.140 回答
0

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

  li "<strong>Text</strong>".html_safe
  f.rich_text_area :text
于 2020-08-27T17:33:37.950 回答
-1

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

于 2020-02-25T08:34:45.707 回答