本文旨在解决在grapesjs等web编辑器中，使用ctrl+s等快捷键执行自定义保存命令时，浏览器默认保存对话框意外弹出的问题。我们将探讨两种有效的解决方案：一种是通过深入访问事件对象来调用`preventdefault()`，提供精细控制；另一种是利用grapesjs keymaps的`prevent`选项进行更简洁的配置，帮助开发者实现无缝的用户体验。
在构建基于Web的富文本编辑器或页面构建器（如GrapesJS）时，开发者经常需要自定义键盘快捷键来触发特定的应用程序行为，例如保存内容。一个常见的需求是使用Ctrl+S（或⌘+S）来执行自定义的保存逻辑，例如将数据同步到数据库。然而，即使在事件监听器中显式调用了event.preventDefault()，浏览器默认的“将页面另存为”对话框仍然可能弹出，这会干扰用户体验。本文将深入探讨这一问题，并提供两种有效的解决方案。
问题分析
当我们在GrapesJS中添加一个键盘映射来监听Ctrl+S时，通常会像这样配置：
keymaps.add('ns:save-keymap', '⌘+s, ctrl+s', editor => {
editor.runCommand('save-db');
});
editor.on('keymap:emit', (id, shortcut, event) => {
switch(id){
case 'ns:save-keymap':
event.preventDefault(); // 尝试阻止默认行为
event.stopPropagation();
// alert('Saving template...');
break;
}
});尽管代码中包含了event.preventDefault()，但浏览器默认的保存对话框依然可能会出现。这通常是因为在GrapesJS的keymap:emit事件中接收到的event对象并非原始的DOM事件对象。它可能是一个封装过的对象，其中包含了原始DOM事件的引用。直接对这个封装对象调用preventDefault()可能无法触及到浏览器需要阻止的那个原生事件。
解决方案一：访问原始事件对象进行阻止
为了解决这个问题，我们需要深入到GrapesJS提供的事件对象内部，找到并操作真正的原生DOM事件对象。在GrapesJS的keymap:emit事件中，原始的键盘事件通常嵌套在event.event._parentEvent属性中。
以下是修改后的代码示例：
keymaps.add('ns:save-keymap', '⌘+s, ctrl+s', editor => {
editor.runCommand('save-db');
});
editor.on('keymap:emit', (id, shortcut, event) => {
switch(id){
case 'ns:save-keymap':
// 访问原始DOM事件对象并阻止其默认行为
if (event && event.event && event.event._parentEvent) {
event.event._parentEvent.preventDefault();
event.event._parentEvent.stopPropagation();
} else {
// 作为备用，尝试对当前事件对象进行阻止
event.preventDefault();
event.stopPropagation();
}
// 执行你的自定义保存逻辑，例如：
// editor.runCommand('save-db'); // 如果上面keymaps.add中没有直接执行
// alert('Saving template...');
break;
}
});注意事项：
- 这种方法的好处是提供了更细粒度的控制。你可以在某些条件下阻止默认行为，而在其他情况下允许它发生。
- 路径event.event._parentEvent可能因GrapesJS版本或内部实现细节而略有不同，但这种模式（寻找嵌套的原始事件）是常见的。建议在开发时通过console.log(event)检查事件对象的结构。
解决方案二：利用Keymap配置的prevent选项（推荐）
GrapesJS的keymaps.add方法提供了一个更简洁、更直接的方式来阻止默认浏览器行为，而无需手动处理事件对象。你可以通过在keymaps.add方法的选项中设置prevent: true来实现。
keymaps.add('ns:save-keymap', '⌘+s, ctrl+s', 'save-db', { prevent: true });
// 如果你仍需要监听 'keymap:emit' 来执行其他逻辑，可以保持监听器，
// 但此时通常不再需要手动调用 preventDefault()
editor.on('keymap:emit', (id, shortcut, event) => {
switch(id){
case 'ns:save-keymap':
// 此时默认行为已被 keymap 配置阻止，此处可执行其他逻辑
// alert('Saving template...');
break;
}
});在这个例子中：
- 'save-db'直接作为第三个参数传递，表示当快捷键触发时要运行的命令ID。
- 第四个参数是一个配置对象{ prevent: true }，它指示GrapesJS自动阻止与此快捷键相关的默认浏览器行为。
优点：
- 简洁性： 代码更少，意图更明确。
- 可靠性： GrapesJS内部处理了寻找和阻止原始事件的复杂性。
- 推荐： 对于大多数仅需阻止默认行为的场景，这是更推荐的方法。
总结
在GrapesJS中实现自定义快捷键并阻止浏览器默认行为，是提升用户体验的关键一步。当遇到Ctrl+S等快捷键仍然触发浏览器默认保存对话框的问题时，我们可以选择以下两种方法：
- 手动访问原始事件对象： 通过event.event._parentEvent.preventDefault()来精确控制，适用于需要根据条件阻止默认行为的复杂场景。
- 使用Keymap的prevent选项： 在keymaps.add方法中设置{ prevent: true }，这是更简洁、更推荐的方式，适用于大多数仅需阻止默认行为的场景。
选择哪种方法取决于你的具体需求和对代码复杂度的偏好。通常情况下，使用prevent: true选项可以更高效地解决问题，并保持代码的整洁性。
