Contribute to this guide

guide处理按键

# 可访问性

目前,我们的 highlight 插件要求用户单击编辑器工具栏中的按钮来突出显示选定的文本。这对于依赖键盘的用户来说可能是一个问题,因此让我们添加一个键盘快捷键作为突出显示文本的替代方法。

# 添加键盘快捷键

突出显示文本的常用快捷键是 Ctrl + Alt + H(在 Windows 系统上),因此我们将使用它作为我们的插件。在 macOS 上,这些按键将自动转换为 Cmd + Alt + H

要在按下这些键时执行 highlight 命令,请将以下代码添加到 Highlight 函数的末尾

editor.keystrokes.set( 'Ctrl+Alt+H', 'highlight' );

如您所见,传递给该函数的第一个参数是表示需要按下的键的字符串,而第二个参数是要执行的命令的名称。或者,您可以传递一个回调函数而不是命令名称,并在其中调用该命令。

editor.keystrokes.set( 'Ctrl+Alt+H', ( event, cancel ) => {
    editor.execute( 'highlight' );
    cancel();
} );

# 向可访问性帮助对话框添加快捷键信息

可访问性帮助对话框 显示所有可用键盘快捷键及其描述的完整列表。但是,它不知道我们刚刚添加的快捷键

该对话框从 editor.accessibility 命名空间中读取,其中存储了有关按键及其可访问标签的所有信息。有一个 API 用于添加新条目:(addKeystrokeInfosaddKeystrokeInfoGroupaddKeystrokeInfoCategory 方法)。

在本例中,一个简单的 editor.accessibility.addKeystrokeInfos( ... ) 就足以让可访问性帮助对话框了解新的快捷键

const t = editor.t;

editor.accessibility.addKeystrokeInfos( {
    keystrokes: [
        {
            label: t( 'Highlight text' ),
            keystroke: 'Ctrl+Alt+H'
        }
    ]
} );

您可以在 API 参考中了解更多关于 AccessibilityHelp 插件和 editor.accessibility 命名空间的信息。

# 更新按钮工具提示

当您将鼠标悬停在“撤消”和“重做”按钮上时,您将看到一个包含操作名称及其相应键盘快捷键的工具提示。但是,当您将鼠标悬停在“突出显示”按钮上时,键盘快捷键就会消失。

我们可以通过将 keystroke 属性添加到按钮来解决此问题

button.set( {
    label: t( 'Highlight' ),
    withText: true,
    tooltip: true,
    isToggleable: true,
    keystroke: 'Ctrl+Alt+H' // Add this attribute.
} );

# 深入探讨

我们用来注册新键盘快捷键的单行代码隐藏了许多复杂性。让我们看看如何使用更低级的 API 来实现相同的效果,以便更好地理解实际发生的情况。

要获取按键,我们可以监听来自 事件系统 的事件,我们在上一教程章节中探索了该事件系统,该事件系统由编辑视图文档触发。

// 5570632 is the code for the 'Ctrl+Alt+H' keyboard shortcut.
editor.editing.view.document.on( 'keydown:5570632', ( event, data ) => {
    // Call the `highlight` command.
    editor.execute( 'highlight' );

    // Stop the event in the DOM.
    data.preventDefault();
    data.stopPropagation();

    // Stop the event in the framework.
    event.stop();

    // Mark this event as handled.
    event.return = true;
} );

如上所示,我们注册了一个监听器,该监听器监听按下 Ctrl + Alt + H 键时触发的事件。当这种情况发生时,回调函数将被调用,它将执行 highlight 命令。

为了确保没有发生意外情况(例如,如果某些浏览器扩展也使用此键盘快捷键),我们停止事件的进一步传播。这将阻止任何其他 DOM 或框架监听器对该按键组合做出反应,并将该事件标记为已处理。

# 下一步

在下一章也是最后一章中,您将了解有关插件配置的更多信息