使用JSON传参时无法传递CKEditor的description变量值如何解决

• 核心问题根因：传递失败大多是因为手动拼接JSON字符串导致HTML中的特殊字符（引号、斜杠）破坏JSON结构，或是内容存在未正确转义的控制字符，不需要自行删除换行处理，原生API可自动完成兼容转义。
• 第一步：使用JSON.stringify()自动转义所有特殊字符，无需手动处理换行：

// 直接获取编辑器内容即可，不需要自行删除换行符
var description = CKEDITOR.instances.editor.getData();
// 构造请求参数对象
var postParams = {
  description: description,
  // 其他需要传递的参数可以直接追加在此处
};
// 生成完全符合JSON规范的字符串，直接作为请求体发送
var postJson = JSON.stringify(postParams);

• 第二步：请求头设置正确的Content-Type，保证后端可正确解析JSON格式：
  • 原生XMLHttpRequest示例：

  var xhr = new XMLHttpRequest();
  xhr.open('POST', '你的后端接口地址', true);
  // 必须添加该请求头
  xhr.setRequestHeader('Content-Type', 'application/json;charset=utf-8');
  xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
      // 处理接口返回结果
    }
  };
  xhr.send(postJson);
  

  • Fetch API示例：

  fetch('你的后端接口地址', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json;charset=utf-8'
    },
    body: JSON.stringify({
      description: CKEDITOR.instances.editor.getData()
    })
  }).then(res => res.json()).then(result => {
    // 处理接口返回结果
  })
  

• 第三步：排查&replace_string_val占位符异常，你示例中HTML属性的引号被替换为该占位符，排查是否存在自行编写的全局替换逻辑、或是站点XSS过滤规则把引号替换为了该占位符，正常CKEDITOR.instances.editor.getData()返回的HTML内容属性值会自带合法双引号，不需要额外处理。
• 后端接收注意事项：直接解析请求体的JSON即可，无需额外做反转义，解析后拿到的description字段就是完整的HTML内容，可直接存入数据库或做后续处理。

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