如何在GrapesJS保存命令中阻止浏览器默认保存弹窗弹出

你遇到的问题是在GrapesJS中绑定Ctrl+S/⌘+S执行自定义保存后，浏览器默认的页面保存弹窗仍会弹出，即便在keymap:emit事件中调用了阻止默认行为的方法也无效。

问题原因 #

keymap:emit事件的触发时机晚于浏览器对快捷键的默认事件捕获，导致浏览器已经触发保存弹窗后，你的阻止代码才执行，因此无法生效。

解决方案 #

直接在快捷键绑定的回调函数中处理事件，优先拦截浏览器的默认行为：

// 重新绑定快捷键，在回调中直接处理事件
keymaps.add('ns:save-keymap', '⌘+s, ctrl+s', (editor, event) => {
    // 立即阻止浏览器默认行为和事件传播
    event.preventDefault();
    event.stopPropagation();
    // 执行自定义保存命令
    editor.runCommand('save-db');
});

// 移除原有的keymap:emit监听，无需再通过该事件处理

兼容性增强（可选） #

如果在部分浏览器中仍有问题，可以在回调末尾添加return false;，进一步确保默认行为被阻止：

keymaps.add('ns:save-keymap', '⌘+s, ctrl+s', (editor, event) => {
    event.preventDefault();
    event.stopPropagation();
    editor.runCommand('save-db');
    return false;
});

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