如何在同一页面中部署多个独立的Trix/ActionText富文本编辑区实例？

问题根源 #

你需要手动指定rich_text_area的id属性。默认情况下Rails会根据「模型名+字段名」生成固定的id值，你所有表单都绑定Comment.new模型，生成的富文本编辑器id全都是comment_body，重复id导致Trix编辑器只能正确关联DOM中第一个匹配id的表单，内容同步、表单提交自然就会出现串值、空值的问题。

具体修改方案 #

给每个富文本编辑器传入唯一的id，你可以用当前遍历对象的类型+id拼接保证唯一性，修改后的表单代码如下：

<% @assignables.each do |assignable| %>
  <!-- omitted code displaying the assignable object -->

  <!-- ADD COMMENT FORM -->
  <%= form_with model: Comment.new do |form| %>
    <div class="">
      <%= form.hidden_field :commentable_id, value: assignable.id %>
      <%= form.hidden_field :commentable_type, value: assignable.class.name %>
      <!-- 新增id参数，保证每个编辑器id唯一 -->
      <%= form.rich_text_area :body, 
            id: "comment_body_#{assignable.class.name}_#{assignable.id}",
            data: { controller: "mentions" } %>
      <%= form.submit "Submit", class: "button button-primary" %>
    </div>
  <% end %>
<% end %>

补充提示：原示例代码中循环变量名存在笔误，遍历的时候定义的是assignables（复数），后续取值用的是assignable（单数），实际运行会报错，注意修正。

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