GrapesJS中自定义Ctrl+S保存命令：阻止浏览器默认保存对话框弹出

本文旨在解决grapesjs开发中，当用户通过ctrl+s（或cmd+s）触发自定义保存命令时，浏览器默认“页面另存为”对话框意外弹出的问题。我们将深入探讨为何常见的`event.preventdefault()`在此场景下失效，并提供两种有效的解决方案：一种是深入事件对象访问原始浏览器事件以实现精细控制，另一种是利用grapesjs按键映射的`prevent`选项进行简洁配置，确保您的自定义保存逻辑能无干扰地执行。

GrapesJS中自定义Ctrl+S保存命令与浏览器默认行为的冲突

在GrapesJS等富文本编辑器或页面构建工具中，开发者通常会为常见的键盘快捷键（如Ctrl+S或Cmd+S）绑定自定义的保存功能，例如将当前编辑内容保存到数据库。然而，一个常见的问题是，即使开发者在自定义的按键事件处理逻辑中使用了event.preventDefault()来阻止默认行为，浏览器仍然会弹出其内置的“页面另存为”对话框。这通常是由于GrapesJS处理事件的方式与原始浏览器事件的层级关系造成的。

问题根源分析

当您在GrapesJS中使用editor.on('keymap:emit', ...)监听按键事件时，传递给回调函数的event参数并非直接的原始浏览器键盘事件对象。GrapesJS对事件进行了封装，这个event参数实际上是一个包含更多信息的选项对象，而原始的浏览器事件对象被嵌套在其内部。因此，直接在顶层event对象上调用preventDefault()并不能触及到真正的浏览器事件，也就无法阻止其默认行为。

以下是常见的、但在此场景下无效的代码示例：

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;
    }
});

要解决这个问题，我们需要采取两种不同的策略，它们分别提供了不同程度的控制和简洁性。

解决方案一：深入事件对象访问原始浏览器事件

这种方法允许您在特定条件下阻止默认行为，提供了更高的灵活性。它通过访问GrapesJS事件对象内部的嵌套属性来获取原始的浏览器事件，然后在其上调用preventDefault()。

实现方式：

在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':
            // 访问原始浏览器事件并阻止默认行为
            if (event && event.event && event.event._parentEvent) {
                event.event._parentEvent.preventDefault();
                event.event._parentEvent.stopPropagation(); // 阻止事件冒泡
            }
            // 执行您的自定义保存逻辑
            // alert('Saving template...');
            break;
    }
});

优点：

• 精细控制： 您可以在if条件语句中添加更多逻辑，仅在满足特定条件时才阻止浏览器默认行为。例如，只有在编辑器处于某种特定模式时才阻止。
• 理解事件流： 这种方式有助于开发者更深入地理解GrapesJS如何封装和传递事件。

注意事项：

存了个图

视频图片解析/字幕/剪辑，视频高清保存/图片源图提取

17

查看详情

• _parentEvent是一个内部属性，虽然目前有效，但在GrapesJS未来的版本中可能会有变动。使用时请留意官方文档更新。
• 同时调用stopPropagation()可以确保事件不会继续冒泡到DOM树的更高层级，进一步减少潜在的冲突。

解决方案二：利用GrapesJS按键映射的prevent选项

GrapesJS的keymaps.add方法提供了一个更简洁的选项来直接阻止与快捷键关联的默认浏览器行为。如果您总是希望阻止默认的保存对话框，这种方法是更优的选择。

实现方式：

在keymaps.add方法中，将第三个参数（命令ID或回调函数）后的选项对象中设置prevent: true。

keymaps.add('ns:save-keymap', '⌘+s, ctrl+s', 'save-db', { prevent: true });

// 如果您需要监听事件来执行其他操作，可以继续使用keymap:emit，
// 但此时浏览器默认行为已被prevent选项阻止。
editor.on('keymap:emit', (id, shortcut, event) => {
    switch(id){
        case 'ns:save-keymap':
            // 此时浏览器默认保存对话框已被阻止
            // alert('Saving template...');
            break;
    }
});

优点：

• 简洁明了： 只需一行配置即可实现目标，代码更易读。
• 官方支持： prevent选项是GrapesJS按键映射API的一部分，因此比访问内部属性更稳定。
• 无需手动处理事件： 您无需在keymap:emit回调中手动调用preventDefault()。

注意事项：

• 设置prevent: true后，该快捷键的浏览器默认行为将始终被阻止。如果您需要在某些情况下允许默认行为，则应考虑使用解决方案一。

总结与选择

为了阻止GrapesJS中Ctrl+S（或Cmd+S）触发浏览器默认的“页面另存为”对话框，您有两种主要策略：

1. 对于需要条件性阻止或更精细控制的场景： 使用editor.on('keymap:emit', ...)监听事件，并通过event.event._parentEvent.preventDefault()来访问并阻止原始浏览器事件。
2. 对于总是需要阻止默认行为的简单场景： 在keymaps.add方法中直接设置{ prevent: true }选项。

通常情况下，如果您的目标是无条件地将Ctrl+S完全用于GrapesJS的自定义保存逻辑，那么第二种方法（使用prevent: true选项）是更推荐和简洁的实践。它减少了代码量，并利用了GrapesJS提供的内置机制，提高了代码的稳定性和可维护性。

以上就是GrapesJS中自定义Ctrl+S保存命令：阻止浏览器默认保存对话框弹出的详细内容，更多请关注php中文网其它相关文章！