GrapesJS中阻止浏览器默认保存对话框弹出的方法

本文旨在解决GrapesJS编辑器中，自定义保存命令（如Ctrl+S）与浏览器默认保存页面对话框冲突的问题。通过分析GrapesJS事件对象的结构，我们提供了两种有效的解决方案：一是深入访问原生事件对象并调用preventDefault()，适用于需要条件性阻止默认行为的场景；二是利用GrapesJS keymaps.add 方法提供的prevent选项，实现更简洁、直接的默认行为阻止。掌握这些方法，能确保GrapesJS的自定义快捷键功能按预期工作，提升用户体验。

引言

在开发基于GrapesJS的富文本或页面构建器时，我们常常需要自定义快捷键来触发特定功能，例如使用Ctrl+S或⌘+S来保存当前编辑内容。然而，浏览器通常会为这些快捷键绑定默认行为，例如弹出“保存页面为”的对话框。即使在自定义事件监听器中尝试调用event.preventDefault()，有时也无法阻止浏览器的默认行为，这给开发者带来了困扰。本文将深入探讨GrapesJS中事件对象的结构，并提供两种有效的方法来解决这一问题。

问题分析：为什么event.preventDefault()不生效？

在GrapesJS的keymap:emit事件监听器中，我们获取到的event对象并非总是浏览器原生的DOM事件对象。GrapesJS对事件进行了封装，这意味着直接对传入的event参数调用preventDefault()可能作用于GrapesJS内部的事件对象，而非浏览器需要阻止的那个原生事件。

原始代码示例：

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参数实际上是一个选项对象，其内部包含了一个名为event的属性，而这个内部的event属性又可能包含一个指向原生事件的_parentEvent属性。因此，我们需要更深层次地访问到真正的原生事件对象才能成功阻止默认行为。

解决方案一：访问原生事件对象并阻止默认行为

此方法通过深入解析GrapesJS事件对象的结构，找到并操作底层的原生事件。这种方式提供了最大的灵活性，允许开发者根据特定条件决定是否阻止默认行为。

实现步骤：

1. 在keymap:emit监听器中，检查传入的event参数。
2. 通过event.event._parentEvent路径访问到浏览器原生的DOM事件对象。
3. 对该原生事件对象调用preventDefault()。

示例代码：

存了个图

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

17

查看详情

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(); // 阻止事件冒泡
            } else {
                // 备用方案，如果上述路径不适用，尝试直接对GrapesJS事件对象阻止
                event.preventDefault();
                event.stopPropagation();
            }
            // 执行你的保存逻辑
            console.log('Template saving...');
            // alert('Saving template...');
            break;
    }
});

注意事项：

• 这种方法允许你在keymap:emit回调内部进行条件判断，例如，只有在特定模式下才阻止默认保存，增加了代码的灵活性。
• _parentEvent是一个内部属性，在GrapesJS未来版本中其名称或结构可能发生变化，但目前是可行的方案。

解决方案二：利用keymaps.add的prevent选项

GrapesJS的keymaps.add方法提供了一个更简洁、声明式的方式来阻止与快捷键关联的默认浏览器行为。通过设置一个简单的选项，即可实现无条件阻止。

实现步骤：

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

示例代码：

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

// 如果你的命令是一个回调函数，则这样写：
// keymaps.add('ns:save-keymap', '⌘+s, ctrl+s', editor => {
//     editor.runCommand('save-db');
// }, { prevent: true });

// 此时，你可能不再需要 'keymap:emit' 监听器来阻止默认行为
// 如果仍需要其他逻辑，可以保留，但阻止默认行为的部分可以移除
editor.on('keymap:emit', (id, shortcut, event) => {
    switch(id){
        case 'ns:save-keymap':
            // 此时，默认行为已被 'prevent: true' 阻止，这里无需再次调用 preventDefault
            console.log('Template saving via keymap option...');
            break;
    }
});

注意事项：

• 此方法更为简洁，推荐用于你总是希望阻止默认行为的场景。
• 它直接在GrapesJS内部处理了事件的preventDefault()，无需开发者手动深入事件对象。
• 如果你的快捷键命令是直接指向一个已注册的命令ID（如'save-db'），则可以直接在keymaps.add中添加{ prevent: true }。

总结与推荐

在GrapesJS中阻止浏览器默认的页面保存对话框弹出，主要有两种有效策略：

1. 通过event.event._parentEvent.preventDefault()手动阻止： 适用于需要精细控制或条件性阻止默认行为的场景。它提供了最大的灵活性，但代码相对复杂。
2. 通过keymaps.add方法的prevent: true选项： 这是最推荐的方案，适用于你总是希望阻止默认行为的情况。它简洁、声明式，且由GrapesJS内部处理，减少了出错的可能性。

在大多数自定义保存快捷键的场景中，我们通常希望无条件地阻止浏览器默认行为，因此使用keymaps.add的prevent: true选项是更优的选择。选择哪种方法取决于你的具体需求和对代码灵活性的要求。无论选择哪种，正确地处理事件阻止机制，都能确保GrapesJS应用的用户体验流畅且符合预期。

以上就是GrapesJS中阻止浏览器默认保存对话框弹出的方法的详细内容，更多请关注php中文网其它相关文章！