Rails 7 中通过 data-* 属性向 JavaScript 传递复杂配置对象时，必须序列化为合法 JSON 字符串并手动解析，否则浏览器仅将其视为普通字符串，导致 tinymce.init() 等函数因接收非对象参数而失败。
rails 7 中通过 `data-*` 属性向 javascript 传递复杂配置对象时，必须序列化为合法 json 字符串并手动解析，否则浏览器仅将其视为普通字符串，导致 `tinymce.init()` 等函数因接收非对象参数而失败。
在 Rails 应用中，常需将 Ruby 端生成的富文本编辑器（如 TinyMCE）配置动态注入前端，供 JavaScript 初始化使用。但直接将 Ruby 哈希赋值给 data-tinymce 属性会导致结构丢失——因为 HTML dataset API 总是将属性值作为字符串读取，而非自动解析为 JavaScript 对象。
✅ 正确做法：服务端序列化 + 客户端反序列化
1. 在 Rails 视图或 Helper 中使用 to_json
确保配置哈希经 to_json 转换为标准 JSON 字符串，并避免手动拼接或 HTML 转义干扰：
⚠️ 注意事项：
- 不要对 to_json 结果再调用 .html_safe 或 raw() —— Rails 5.2+ 默认对 data: 属性值自动 HTML 转义，而 to_json 已输出合法 JSON（含双引号、转义字符），额外转义会破坏结构；
- 不要使用 内联插值方式拼接 JSON 字符串（如 "data-tinymce='#{config.to_json}'"），易引入 XSS 风险且难以控制引号嵌套；
- 确保哈希中 nil 值被正确转为 null（to_json 默认支持），布尔值转为 true/false（符合 JSON 标准）。
2. 在 JavaScript 中显式 JSON.parse()
获取 dataset.tinymce 后，必须解析为对象才能传入 tinymce.init()：
handleClick(link, e) {
e.preventDefault();
// ✅ 正确：从字符串解析为对象
const configString = link.dataset.tinymce;
let config;
try {
config = JSON.parse(configString);
} catch (err) {
console.error("Failed to parse tinymce config:", err, configString);
return;
}
// ✅ 现在可安全初始化
tinymce.init(config);
}
? 为什么 console.log(config) 看似“正确”？
浏览器开发者工具对 dataset 字符串的 console.log 显示会美化渲染（如将 " 显示为 "），造成“结构完好”的错觉。但实际值仍是原始字符串，typeof config === 'string'，直接传给 tinymce.init() 会静默失败。
3. 进阶建议：提升健壮性与可维护性
- 验证 JSON 格式：在 Rails 端添加日志或断言，确保 tinymce_config.to_json 输出有效（例如检查是否包含非法字符或循环引用）；
- 分离配置逻辑：将 TinyMCE 配置提取为独立方法或常量，便于复用与测试；
- 考虑替代方案：对复杂场景，推荐使用 Turbo Frames 或 ViewComponent 渲染预初始化的编辑器片段，避免跨层数据传递。
通过 to_json + JSON.parse() 这一标准组合，即可可靠地在 Rails 7 与前端 JavaScript 之间传递任意嵌套数据结构，彻底解决配置失效问题。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
