Trix Gem资源加载异常求助：Rails 4.2.4下富文本编辑器失效

我之前在Rails 4.x项目里踩过Trix的坑，结合你的配置来看，大概率是这几个地方出了问题，给你一步步排查的方向：

1. 先检查视图层的写法是否正确 #

这是最容易踩的坑——Trix不能用普通的text_area或text_field，必须用它要求的HTML结构或者gem提供的helper方法：

如果用form_for，直接用gem的helper：

<%= form_for @your_model do |f| %>
  <%= f.trix_editor :content %> <!-- 这里的:content是你模型对应的字段名 -->
<% end %>

如果不用form helper，需要手动写隐藏input和trix-editor标签：

<input id="post-content" type="hidden" name="post[content]">
<trix-editor input="post-content"></trix-editor>

注意：hidden input的id必须和trix-editor的input属性值完全对应，否则Trix无法绑定数据

2. 清理JavaScript中的jQuery冲突 #

看你的application.js.coffee里同时引入了jquery和jquery_2，这会导致jQuery版本冲突，直接让依赖jQuery的Trix初始化失败。删掉其中一个，保留#= require jquery即可（Rails 4.2默认的jquery-rails gem提供的就是这个版本）。

修改后的application.js.coffee开头应该是：

#= require jquery
#= require jquery_ujs
#= require bootstrap
#= require trix
# 后面的其他依赖...

3. 确保Trix的CSS正确引入 #

Trix的样式必须加载才能显示富文本编辑器的界面，你需要在app/assets/stylesheets/application.scss（如果原来的是.css，要改成.scss后缀）里添加：

//= require trix

如果不想改文件后缀，也可以在.css文件里用@import，但sprockets的require方式更适配Rails 4的asset pipeline。

4. 检查浏览器控制台的错误提示 #

打开浏览器开发者工具（F12）切换到Console标签，看看有没有类似Trix is not defined或者jQuery相关的报错：

• 如果是Trix未定义：说明Trix的JS资源没加载成功，试试重启服务器，或者运行rake assets:precompile后再重启（开发环境也可以临时试试）。
• 如果是jQuery报错：回到第二步，确保没有重复引入jQuery。

5. 调整Asset Pipeline的Debug模式 #

Rails 4.2的config.assets.debug = true有时候会导致资源加载顺序混乱，你可以临时在config/environments/development.rb里把它改成false，然后重启服务器，看看Trix是否正常加载。

最后确认Gem依赖 #

确保你已经运行过bundle install，而且sprockets-rails < 3.0.0的配置是对的（Rails 4.2确实不支持sprockets-rails 3.x版本）。

按照上面的步骤排查下来，基本能解决Trix只显示普通文本域的问题。

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