Rails 5.2 Webpacker环境下Trix编辑器无法正常显示求助

Looks like you ran into a common gotcha with GoRails Jumpstart's frontend setup—since it leans on Webpacker (or modern JS bundling tools like esbuild) instead of the traditional Asset Pipeline for handling JS/CSS, the standard trix-rails setup won't work out of the box. Let's fix this step by step:

Step 1: Remove Asset Pipeline references to Trix #

First, clean up the changes you made to the Asset Pipeline files since they won't be used:

• Open app/assets/stylesheets/application.css and delete the line that includes Trix (like *= require trix)
• Open app/assets/javascripts/application.js and delete the line that requires Trix (like //= require trix)

Step 2: Install Trix via npm/yarn #

Jumpstart uses a JavaScript bundler, so we need to install Trix through your package manager instead of the gem's Asset Pipeline assets:

• If your project uses Yarn, run:

  yarn add trix
  

• If you use npm, run:

  npm install trix
  

Step 3: Import Trix in your JavaScript entry file #

Jumpstart's main JS entry point is typically app/javascript/application.js. Add these lines to import Trix's JavaScript and CSS:

// Import Trix JS and styles
import "trix"
import "trix/dist/trix.css"

This ensures Trix is bundled and loaded correctly with your app's frontend code.

Step 4: Handle Turbo compatibility (optional but recommended) #

Since Jumpstart includes Turbo, you might need to ensure Trix initializes properly after Turbo navigations. The easiest way is to add a Stimulus controller:

1. Create app/javascript/controllers/trix_controller.js with this code:

   import { Controller } from "@hotwired/stimulus"
   
   export default class extends Controller {
     connect() {
       // Trix auto-initializes elements with `trix-editor` class, so no extra code needed here
       // Add custom config here if you need it (e.g., toolbar customization)
     }
   }
   

2. Update your form input to use this controller:

   <%= f.input :content, as: :trix_editor, input_html: { data: { controller: "trix" } } %>
   

This ensures Trix re-initializes whenever the form is loaded via Turbo.

Step 5: Restart your servers #

Don't forget to restart your development servers:

• If you're using bin/dev (which runs both Rails and the JS bundler), stop it and restart it
• If you're running Rails and the JS bundler separately, restart both processes

Why this works #

GoRails Jumpstart intentionally prioritizes modern JS bundling tools over the old Asset Pipeline for frontend assets. When you use trix-rails's Asset Pipeline references, those files aren't being picked up by Jumpstart's bundler, so Trix's JavaScript never loads—leaving you with a blank editor box. By installing Trix via npm/yarn and importing it in your JS bundle, you ensure it's loaded in the correct order and available to initialize on your page.

Quick check: Open your browser's developer console to see if there are errors like Trix is not defined—that would confirm the original issue was missing Trix JS.

内容的提问来源于stack exchange，提问作者Joe Bloggos