Rails集成Action Text/Trix后编辑器无法正常渲染，多次核查配置无果

云原生阿岚

2026-10-2

可能的故障原因及解决方法

检查文章表单配置：你当前贴出的是评论的局部表单，首先确认文章新建/编辑页面的表单内，正文字段也正确使用了<%= form.rich_text_area :body %>写法，而非普通的text_area输入框。
修复application.js重复加载问题：你同时使用ES import和CommonJS require语法重复加载了trix和actiontext，很容易引发JS冲突。删除application.js末尾的两行冗余代码即可：
```
// 删除下面两行
require("trix")
require("@rails/actiontext")
```
另外开头的//= require jquery_ujs是资产管道（Sprockets）的语法，Webpacker不识别该写法，如果你需要使用jquery_ujs请先安装对应依赖后改用import语法引入。
引入缺失的样式文件：Trix编辑器依赖专属样式才能正常渲染工具栏，你需要在全局样式文件（通常是app/assets/stylesheets/application.scss或者Webpacker管理的样式入口文件）中引入对应样式：
```
@import "trix/dist/trix";
@import "@rails/actiontext/app/assets/stylesheets/actiontext";
```
确认Active Storage已正确安装：Action Text强依赖Active Storage存储富文本内的附件资源，请确认你已经执行过安装和迁移命令：
```
rails active_storage:install
rails db:migrate
```
清理缓存重新编译资源：开发环境下可以依次执行以下命令清理旧的编译缓存，重新生成资源：
```
bin/webpacker clobber
bin/webpacker build
# 若使用webpack-dev-server请重启服务
```
排查浏览器控制台报错：打开页面的浏览器开发者工具，切换到Console标签查看是否有JS加载、运行时报错，可以直接定位具体的故障点。