如何在管理中设置 ActionText (Rails 6.1)

Question

我正在尝试在管理仪表板中设置操作文本。我关注了installation steps on the Rails Guides Overview page。然后，当尝试将属性添加到 /app/dashboards/lesson_dashboard.rb 时，出现错误。

当我尝试 body: Field::RichText 时，我得到：uninitialized constant Administrate::Field::RichText

当我尝试 body: ActionText::RichText 时，我得到：wrong number of arguments (given 4, expected 0..1)。

当我跟随 instructions in the Administrate Wiki 时，当它到达 <%= f.rich_text_area field.attribute %> 行时，我得到 undefined method 'body'。

知道这个属性叫什么或为什么我会收到这些错误吗？

app/dashboards/lesson_dashboard.rb:

require "administrate/base_dashboard"

class LessonDashboard < Administrate::BaseDashboard
  # ATTRIBUTE_TYPES
  # a hash that describes the type of each of the model's fields.
  #
  # Each different type represents an Administrate::Field object,
  # which determines how the attribute is displayed
  # on pages throughout the dashboard.
  ATTRIBUTE_TYPES = {
    course: Field::BelongsTo,
    documents: Field::ActiveStorage.with_options(
      show_display_preview: false,
      destroy_url: proc do |namespace, resource, document|
        [:delete_document_course, resource, { document_id: document.id }]
      end
    ),
    id: Field::Number,
    title: Field::String,
    # body: Field::Text,
    body: RichTextAreaField,
    created_at: Field::DateTime,
    updated_at: Field::DateTime,
  }.freeze

  # COLLECTION_ATTRIBUTES
  # an array of attributes that will be displayed on the model's index page.
  #
  # By default, it's limited to four items to reduce clutter on index pages.
  # Feel free to add, remove, or rearrange items.
  COLLECTION_ATTRIBUTES = %i[
    title
    course
  ].freeze

  # SHOW_PAGE_ATTRIBUTES
  # an array of attributes that will be displayed on the model's show page.
  SHOW_PAGE_ATTRIBUTES = %i[
    course
    title
    body
    documents
    created_at
    updated_at
  ].freeze

  # FORM_ATTRIBUTES
  # an array of attributes that will be displayed
  # on the model's form (`new` and `edit`) pages.
  FORM_ATTRIBUTES = %i[
    course
    title
    body
    documents
  ].freeze

  # COLLECTION_FILTERS
  # a hash that defines filters that can be used while searching via the search
  # field of the dashboard.
  #
  # For example to add an option to search for open resources by typing "open:"
  # in the search field:
  #
  #   COLLECTION_FILTERS = {
  #     open: ->(resources) { resources.where(open: true) }
  #   }.freeze
  COLLECTION_FILTERS = {}.freeze

  # Overwrite this method to customize how lessons are displayed
  # across all pages of the admin dashboard.
  def display_resource(lesson)
    lesson.title
  end

  # permitted for has_many_attached
  def permitted_attributes
    # super + [:attachments => []]
    super + [:documents => []]
  end

end

app/models/lesson.rb:

class Lesson < ApplicationRecord

  belongs_to :course
  has_many_attached :documents

  validates :title, presence: true

end

Answer 1

ActionText guide 和管理帮助提供了信息，但它在多个页面上有些不连贯，所以我记下了我在新的 Rails 6.1 应用程序中使用的步骤。

这些步骤假定您已经配置了 ActionText（运行 rails g action_text:install 和运行结果迁移），并且 installed/configured administrate gem.

Trix 富文本编辑器需要 Javascript，它在 Rails 6 中使用 webpack 加载。默认管理布局对 webpack 不友好，因此您需要自定义布局。生成要自定义的布局：

  % rails generate administrate:views:layout

将 javascript_pack_tag 添加到 views/layouts/admin/application.html.erb 以加载您的应用程序包：

<head>
...
  <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
  <%= render "stylesheet" %>
  <%= csrf_meta_tags %>
...
</head>

administrate guide 会引导您创建一个单独的包来管理 JS，但只有在您需要自定义 JS 时才需要它（例如，使用 flatpickr 作为日期选择器）。仅使用 RichText 不需要它，因此我们只需加载主应用程序包。

您还需要自定义管理 CSS 以添加 Trix 样式。运行生成自定义管理样式表的任务：

% rails generate administrate:assets:stylesheets

编辑管理样式表以在底部包含 Trix 富文本控件的样式：

// Rest of file
...
@import "trix/dist/trix";
@import "selectize";

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

.field-unit--rich-text-area-field {
  .field-unit__field {
    width: 80%;
  }
}

添加用于富文本编辑的自定义字段类型，因为 Adminstrate 不包含开箱即用的字段类型。

% rails g administrate:field rich_text_area

编辑fields/rich_text_area/_form.html.erb中的输入字段类型以使用Trix富文本控件：

<div class="field-unit__field">
  <%= f.rich_text_area field.attribute %>
</div>

编辑您的模型以添加您的富文本属性：

class Lesson < ApplicationRecord
  has_rich_text :body
end

为您的模型生成仪表板：

% rails generate administrate:dashboard Lesson

编辑 dashboards/lesson_dashboard.rb 中的字段类型以使用自定义字段类型：

  ATTRIBUTE_TYPES = {
    ...
    rich_text_body: RichTextAreaField,
  }.freeze

利润：

如何在管理中设置 ActionText (Rails 6.1)

How to Setup ActionText in Administrate (Rails 6.1)

ruby-on-rails

administrate

actiontext