跳转到主要内容

键盘快捷键数据

命名空间：core/keyboard-shortcuts。

选择器

getAllShortcutKeyCombinations

Returns the shortcuts that include aliases for a given shortcut name.

Usage

import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
import { useSelect } from '@wordpress/data';
import { createInterpolateElement } from '@wordpress/element';
import { sprintf } from '@wordpress/i18n';

const ExampleComponent = () => {
	const allShortcutKeyCombinations = useSelect(
		( select ) =>
			select( keyboardShortcutsStore ).getAllShortcutKeyCombinations(
				'core/editor/next-region'
			),
		[]
	);

	return (
		allShortcutKeyCombinations.length > 0 && (
			<ul>
				{ allShortcutKeyCombinations.map(
					( { character, modifier }, index ) => (
						<li key={ index }>
							{ createInterpolateElement(
								sprintf(
									'Character: <code>%s</code> / Modifier: <code>%s</code>',
									character,
									modifier
								),
								{
									code: <code />,
								}
							) }
						</li>
					)
				) }
			</ul>
		)
	);
};

Parameters

  • state Object: Global state.
  • name string: Shortcut name.

Returns

  • WPShortcutKeyCombination[]: Key combinations.

getAllShortcutRawKeyCombinations

返回给定快捷键名称的所有键盘组合的原始表示形式。

用法

import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
import { useSelect } from '@wordpress/data';
import { createInterpolateElement } from '@wordpress/element';
import { sprintf } from '@wordpress/i18n';

const ExampleComponent = () => {
	const allShortcutRawKeyCombinations = useSelect(
		( select ) =>
			select( keyboardShortcutsStore ).getAllShortcutRawKeyCombinations(
				'core/editor/next-region'
			),
		[]
	);

	return (
		allShortcutRawKeyCombinations.length > 0 && (
			<ul>
				{ allShortcutRawKeyCombinations.map(
					( shortcutRawKeyCombination, index ) => (
						<li key={ index }>
							{ createInterpolateElement(
								sprintf(
									' <code>%s</code>',
									shortcutRawKeyCombination
								),
								{
									code: <code />,
								}
							) }
						</li>
					)
				) }
			</ul>
		)
	);
};

参数

  • state Object: 全局状态。
  • name string: 快捷键名称。

返回值

  • string[]: 快捷键数组。

getCategoryShortcuts

返回给定分类名称的快捷键名称列表。

用法

import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
import { useSelect } from '@wordpress/data';

const ExampleComponent = () => {
	const categoryShortcuts = useSelect(
		( select ) =>
			select( keyboardShortcutsStore ).getCategoryShortcuts( 'block' ),
		[]
	);

	return (
		categoryShortcuts.length > 0 && (
			<ul>
				{ categoryShortcuts.map( ( categoryShortcut ) => (
					<li key={ categoryShortcut }>{ categoryShortcut }</li>
				) ) }
			</ul>
		)
	);
};

参数

  • state Object: 全局状态。
  • name string: 分类名称。

返回值

  • string[]: 快捷键名称。

getShortcutAliases

Returns the aliases for a given shortcut name.

Usage

import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
import { useSelect } from '@wordpress/data';
import { createInterpolateElement } from '@wordpress/element';
import { sprintf } from '@wordpress/i18n';
const ExampleComponent = () => {
	const shortcutAliases = useSelect(
		( select ) =>
			select( keyboardShortcutsStore ).getShortcutAliases(
				'core/editor/next-region'
			),
		[]
	);

	return (
		shortcutAliases.length > 0 && (
			<ul>
				{ shortcutAliases.map( ( { character, modifier }, index ) => (
					<li key={ index }>
						{ createInterpolateElement(
							sprintf(
								'Character: <code>%s</code> / Modifier: <code>%s</code>',
								character,
								modifier
							),
							{
								code: <code />,
							}
						) }
					</li>
				) ) }
			</ul>
		)
	);
};

Parameters

  • state Object: Global state.
  • name string: Shortcut name.

Returns

  • WPShortcutKeyCombination[]: Key combinations.

getShortcutDescription

根据快捷键名称返回其描述。

用法

import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
import { useSelect } from '@wordpress/data';
import { __ } from '@wordpress/i18n';
const ExampleComponent = () => {
	const shortcutDescription = useSelect(
		( select ) =>
			select( keyboardShortcutsStore ).getShortcutDescription(
				'core/editor/next-region'
			),
		[]
	);

	return shortcutDescription ? (
		<div>{ shortcutDescription }</div>
	) : (
		<div>{ __( 'No description.' ) }</div>
	);
};

参数

  • state Object: 全局状态。
  • name string: 快捷键名称。

返回值

  • ?string: 快捷键描述。

getShortcutKeyCombination

Returns the main key combination for a given shortcut name.

Usage

import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
import { useSelect } from '@wordpress/data';
import { createInterpolateElement } from '@wordpress/element';
import { sprintf } from '@wordpress/i18n';
const ExampleComponent = () => {
	const { character, modifier } = useSelect(
		( select ) =>
			select( keyboardShortcutsStore ).getShortcutKeyCombination(
				'core/editor/next-region'
			),
		[]
	);

	return (
		<div>
			{ createInterpolateElement(
				sprintf(
					'Character: <code>%s</code> / Modifier: <code>%s</code>',
					character,
					modifier
				),
				{
					code: <code />,
				}
			) }
		</div>
	);
};

Parameters

  • state Object: Global state.
  • name string: Shortcut name.

Returns

  • WPShortcutKeyCombination?: Key combination.

getShortcutRepresentation

返回一个字符串，表示给定快捷键名称的主要按键组合。

用法

import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
import { useSelect } from '@wordpress/data';
import { sprintf } from '@wordpress/i18n';

const ExampleComponent = () => {
	const { display, raw, ariaLabel } = useSelect( ( select ) => {
		return {
			display: select( keyboardShortcutsStore ).getShortcutRepresentation(
				'core/editor/next-region'
			),
			raw: select( keyboardShortcutsStore ).getShortcutRepresentation(
				'core/editor/next-region',
				'raw'
			),
			ariaLabel: select(
				keyboardShortcutsStore
			).getShortcutRepresentation(
				'core/editor/next-region',
				'ariaLabel'
			),
		};
	}, [] );

	return (
		<ul>
			<li>{ sprintf( 'display string: %s', display ) }</li>
			<li>{ sprintf( 'raw string: %s', raw ) }</li>
			<li>{ sprintf( 'ariaLabel string: %s', ariaLabel ) }</li>
		</ul>
	);
};

参数

  • state Object: 全局状态。
  • name string: 快捷键名称。
  • representation keyof FORMATTING_METHODS: 表示类型（display, raw, ariaLabel）。

返回值

  • ?string: 快捷键表示字符串。

Actions

registerShortcut

Returns an action object used to register a new keyboard shortcut.

Usage

import { useEffect } from 'react';
import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
import { useSelect, useDispatch } from '@wordpress/data';
import { __ } from '@wordpress/i18n';

const ExampleComponent = () => {
	const { registerShortcut } = useDispatch( keyboardShortcutsStore );

	useEffect( () => {
		registerShortcut( {
			name: 'custom/my-custom-shortcut',
			category: 'my-category',
			description: __( 'My custom shortcut' ),
			keyCombination: {
				modifier: 'primary',
				character: 'j',
			},
		} );
	}, [] );

	const shortcut = useSelect(
		( select ) =>
			select( keyboardShortcutsStore ).getShortcutKeyCombination(
				'custom/my-custom-shortcut'
			),
		[]
	);

	return shortcut ? (
		<p>{ __( 'Shortcut is registered.' ) }</p>
	) : (
		<p>{ __( 'Shortcut is not registered.' ) }</p>
	);
};

Parameters

  • config WPShortcutConfig: Shortcut config.

Returns

  • Object: action.

unregisterShortcut

返回一个用于注销键盘快捷键的操作对象。

用法

import { useEffect } from 'react';
import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
import { useSelect, useDispatch } from '@wordpress/data';
import { __ } from '@wordpress/i18n';

const ExampleComponent = () => {
	const { unregisterShortcut } = useDispatch( keyboardShortcutsStore );

	useEffect( () => {
		unregisterShortcut( 'core/editor/next-region' );
	}, [] );

	const shortcut = useSelect(
		( select ) =>
			select( keyboardShortcutsStore ).getShortcutKeyCombination(
				'core/editor/next-region'
			),
		[]
	);

	return shortcut ? (
		<p>{ __( 'Shortcut is not unregistered.' ) }</p>
	) : (
		<p>{ __( 'Shortcut is unregistered.' ) }</p>
	);
};

参数

  • name string: 快捷键名称。

返回值

  • Object: 操作对象。
这篇文档对你有帮助吗？
想留言或继续讨论？请到 Cyberforums 赛博论坛参与。 参与讨论 / 回复