如何阻止TinyMCE将原输入框id用作生成输入的name属性 单页多实例场景

核心原因 #

TinyMCE默认规则为：优先继承原始textarea的name属性，若原始标签未配置name则会 fallback 用元素的id作为提交字段的name值，所以才会出现你遇到的参数格式不符合RoR要求的问题。

可用解决方案 #

方案1：显式指定提交字段名称 #

TinyMCE提供了hidden_input_name初始化配置项，可直接自定义提交时隐藏输入框的name属性，优先级高于默认规则，直接按RoR要求的格式配置即可：

tinyMCE.init({
  selector: '#article-title-<%= @article.id %>',
  hidden_input_name: 'article[title]',
  // 其余原有配置保持不变
})

方案2：保留原始textarea的name属性（兼容性最优） #

直接给你的局部模板中的textarea标签加上RoR要求的name属性，不需要修改TinyMCE初始化配置，所有版本都兼容：

<!-- 局部模板内的textarea代码示例 -->
<textarea 
  id="article-title-<%= @article.id %>" 
  name="article[title]"
></textarea>

多实例加载优化 #

你提到非id选择器加载失败的问题，可通过统一类选择器批量初始化所有实例，避免重复写初始化代码：

1. 给所有需要加载TinyMCE的textarea加上统一类名，比如tinymce-editor，同时保留各自的id和正确的name属性
2. 初始化时按类选择器匹配，自动读取每个元素的name属性：

tinyMCE.init({
  selector: 'textarea.tinymce-editor',
  // 5.x及以上版本支持传入函数动态获取name
  hidden_input_name: (editor) => editor.getElement().name,
  // 其余原有配置保持不变
})

如果使用低于5.x的TinyMCE版本，直接用方案2配置每个textarea的name属性即可，无需额外配置hidden_input_name。

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