Rails7向JavaScript传递TinyMCE配置结构失败问题排查

Rails端正确生成data属性 #

首先要确保Rails helper生成的data-tinymce属性里的JSON是正确转义的，避免HTML解析时破坏结构。不要直接用to_json搭配raw/html_safe，而是用Rails内置的j()方法（escape_javascript的别名）处理JSON字符串：

# 在helper或视图中生成触发链接
def tinymce_trigger_link
  # 定义你的TinyMCE配置结构
  tinymce_config = {
    selector: '#my-editor',
    plugins: 'link image lists',
    toolbar: 'undo redo | bold italic | link image | bullist numlist'
  }
  # 用j()转义JSON，确保能安全嵌入HTML属性
  link_to '打开编辑器', '#', data: { tinymce: j(tinymce_config.to_json) }, onclick: 'handleClick(event)'
end

JS端正确解析配置 #

在handleClick函数中，必须将从dataset拿到的字符串解析为JS对象，同时添加异常捕获方便调试：

function handleClick(event) {
  event.preventDefault();
  const configStr = event.currentTarget.dataset.tinymce;
  
  try {
    // 把JSON字符串解析为JS对象
    const tinymceConfig = JSON.parse(configStr);
    // 初始化TinyMCE
    tinymce.init(tinymceConfig);
  } catch (error) {
    // 打印错误信息和原始字符串，快速定位问题
    console.error('TinyMCE配置解析失败:', error);
    console.log('原始配置字符串:', configStr);
  }
}

关键排查点 #

1. 检查渲染后的HTML：右键查看页面元素，确认data-tinymce属性的内容是完整的JSON，且双引号被转义为\"（比如{"selector":"#my-editor"}会变成"{\"selector\":\"#my-editor\"}"，这是正常状态）。
2. 验证JSON有效性：把控制台输出的configStr复制到本地JSON校验工具，确认没有语法错误。
3. 避免多余转义：不要嵌套使用raw和j()，否则会导致转义过度或不足，直接破坏JSON结构。

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