Ruby on Rails中Action Text内容无法正常显示问题求助

我正在学习Ruby on Rails，首个项目是跟着教程搭建博客应用，尝试用Action Text优化编辑文本框时遇到显示异常（见下图）：

以下是我的application.html.erb文件代码：

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

    <title>RD</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
    <%= stylesheet_link_tag "trix" %>
    <%= stylesheet_link_tag "actiontext", "data-turbo-track":"reload" %>

  </head>
  <body>

  <%= render 'home/header' %>
  <div class="container"> 
    <br/>
    <p class="notice"><%= notice %></p>
    <p class="alert"><%= alert %></p>

    <div>
      <% if user_signed_in? %>
        <%= button_to "Log out", destroy_user_session_path, method: :delete %>
      <% end %>
    </div>
    <%= yield %>
  </div>
  </body>
</html>

排查方向建议： #

• 确认Action Text的JS文件已正确引入：
  • 若使用Sprockets，检查application.js中是否添加了//= require trix和//= require actiontext
  • 若使用Importmap（Rails 7+），确保config/importmap.rb中包含pin "trix"和pin "@rails/actiontext", to: "actiontext.js"，并在application.js中完成导入
• 验证Action Text安装完整性：确认已执行rails action_text:install命令，该命令会自动生成必要的迁移文件、样式及JS依赖
• 检查样式冲突：暂时注释Bootstrap的CSS链接，测试编辑器是否恢复正常。若正常，需自定义CSS隔离Bootstrap与Trix的样式冲突
• 测试Turbo兼容性：给使用Action Text的表单添加data-turbo="false"属性，排除Turbo的干扰
• 查看浏览器控制台：打开开发者工具，检查是否有JS加载失败、样式解析错误等日志，这通常能直接定位具体问题

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