Rails ActionText实例中为何超链接会被添加到内容框开头？

算力阿峰

2026-8-2

问题分析与解决方案

你的问题出在嵌套表单（nested-fields）中的Trix编辑器实例初始化冲突。因为嵌套表单是动态生成的，Trix依赖唯一的DOM元素ID和上下文维护编辑状态，当多个嵌套字段的Trix编辑器ID重复或初始化不完整时，就会出现编辑行为异常（超链接错位、格式失效）。

具体解决步骤

1. 确保Trix编辑器ID唯一

Rails的rich_text_area在嵌套表单中可能生成重复ID，手动指定唯一ID：

<div class="nested-fields bg-gray-100 p-5">
  <!-- 其他原有内容 -->
  <div>
    <%# 使用表单对象的object_id生成唯一标识 %>
    <%= form.rich_text_area :content, id: "section_content_#{form.object.object_id}" %>
  </div>
</div>

如果用Cocoon处理嵌套表单，用form.index更适配动态场景：

<%= form.rich_text_area :content, id: "section_content_#{form.index}" %>

2. 动态初始化嵌套的Trix编辑器

动态添加嵌套字段后，Trix不会自动初始化新实例，需要手动触发：

// 监听Cocoon嵌套字段添加完成事件
document.addEventListener('cocoon:after-insert', function(event) {
  const richTextElement = event.target.querySelector('trix-editor');
  if (richTextElement) {
    new Trix.Editor(richTextElement);
  }
});

// 适配Turbo页面渲染逻辑，避免重复初始化
document.addEventListener('turbo:render', function() {
  document.querySelectorAll('trix-editor:not([data-trix-initialized])').forEach(editor => {
    new Trix.Editor(editor);
    editor.setAttribute('data-trix-initialized', 'true');
  });
});