如何在不使用Webpacker的Rails项目中集成Trix与ActionText？

1. 确认Gem依赖并完成安装 #

在Gemfile中添加以下依赖：

gem 'trix'
gem 'actiontext'

执行命令完成安装：

bundle install

2. 手动创建ActionText迁移文件 #

由于rails action_text:install默认依赖Webpacker会报错，直接手动生成迁移文件：
在db/migrate目录下创建带时间戳前缀的迁移文件，内容如下：

class CreateActionTextTables < ActiveRecord::Migration[6.0]
  def change
    create_table :action_text_rich_texts do |t|
      t.string     :name, null: false
      t.text       :body, size: :long
      t.references :record, null: false, polymorphic: true, index: false

      t.timestamps

      t.index [:record_type, :record_id, :name], name: "index_action_text_rich_texts_uniqueness", unique: true
    end
  end
end

执行数据库迁移：

rails db:migrate

3. 通过Asset Pipeline引入Trix与ActionText资源 #

JavaScript配置

修改app/assets/javascripts/application.js，将原有的import语句替换为Sprockets的require语法：

//= require trix
//= require actiontext

CSS配置

根据样式文件类型修改对应配置：

• 若使用.css文件（app/assets/stylesheets/application.css）：

*= require trix

• 若使用.scss文件（app/assets/stylesheets/application.scss）：

@import "trix";

4. 模型层配置 #

在需要使用富文本的模型中添加富文本字段关联：

class Post < ApplicationRecord
  has_rich_text :content
end

5. 视图层配置 #

表单中添加富文本编辑器

使用ActionText提供的rich_text_area辅助方法：

<%= form_with model: @post do |form| %>
  <%= form.label :content %>
  <%= form.rich_text_area :content %>
  <%= form.submit "保存" %>
<% end %>

显示富文本内容

在视图中直接调用模型的富文本属性即可自动渲染：

<%= @post.content %>

内容的提问来源于stack exchange，提问作者Rq Bhatti