Node.js Express接收表单追加的Editor.js值异常显示[object Object]求助

问题原因 #

• 异步时序错误：editor.save() 是异步返回 Promise 的方法，表单追加、提交逻辑为同步执行，会在 .then 回调的赋值逻辑运行前就完成，此时插入的隐藏字段值要么为空，要么是之前残留的错误值，表单会不等富文本结果返回就直接提交。
• HTML 属性拼接错误：就算拿到了正确的序列化字符串，直接把 JSON 拼到 HTML 的 value 属性中，JSON 内的双引号会提前闭合 value 属性，导致浏览器解析出的字段值错乱，甚至出现安全问题。
• 接口收到的 [object Object] 是对象直接调用 toString() 方法的返回值，是错误把未序列化的 outputData 直接赋值给字段时产生的结果。

修复方案 #

调整表单提交逻辑，先阻止默认提交行为，等富文本异步结果返回后再插入隐藏字段、手动触发提交，同时使用 jQuery 提供的 API 赋值避免属性拼接问题，修复后代码如下：

$("form").submit(function(e){
    // 阻止默认提交行为，等异步结果返回后再手动提交
    e.preventDefault();
    const form = this;
    // 避免重复追加隐藏字段
    if ($(form).find('input[name="textBody"]').length > 0) return;

    editor.save().then((outputData) => {
        const outputString = JSON.stringify(outputData);
        // 用jQuery API设置value，避免字符串拼接的引号冲突
        const hiddenInput = $('<input type="hidden" name="textBody">');
        hiddenInput.val(outputString);
        $(form).append(hiddenInput);
        // 手动提交表单
        form.submit();
    })
    .catch((error) => {
        console.log('富文本保存失败: ', error);
    })
})

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