处理按键
# 可访问性
目前,我们的 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 用于添加新条目:(addKeystrokeInfos
、addKeystrokeInfoGroup
和 addKeystrokeInfoCategory
方法)。
在本例中,一个简单的 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 或框架监听器对该按键组合做出反应,并将该事件标记为已处理。
# 下一步
在下一章也是最后一章中,您将了解有关插件配置的更多信息。
我们每天都在努力使我们的文档保持完整。您是否发现过时信息?是否缺少什么?请通过我们的 问题跟踪器 报告。
随着版本 42.0.0 的发布,我们重写了大部分文档以反映新的导入路径和功能。感谢您的反馈,帮助我们确保文档的准确性和完整性。