44 lines
1.5 KiB
Markdown
44 lines
1.5 KiB
Markdown
|
# 自动补全
|
||
|
|
|
||
|
|
`editor.Autocomplete.completers` 过滤器用于扩展和覆盖区块所使用的自动补全程序列表。
|
||
|
|
|
||
|
|
`@wordpress/block-editor` 中的 `Autocomplete` 组件会应用此过滤器。`@wordpress/components` 包提供了基础的 `Autocomplete` 组件，但该组件不会应用此类过滤器。不过，区块通常应使用 `@wordpress/block-editor` 提供的组件。
|
||
|
|
|
||
|
|
### 示例
|
||
|
|
|
||
|
|
以下示例演示如何使用 `editor.Autocomplete.completers` 过滤器添加首字母缩写补全程序。你可以在 `@wordpress/components` 包中找到关于自动补全程序接口的完整文档。
|
||
|
|
|
||
|
|
```jsx
|
||
|
|
// 我们的补全程序
|
||
|
|
const acronymCompleter = {
|
||
|
|
name: 'acronyms',
|
||
|
|
triggerPrefix: '::',
|
||
|
|
options: [
|
||
|
|
{ letters: 'FYI', expansion: '供您参考' },
|
||
|
|
{ letters: 'AFAIK', expansion: '据我所知' },
|
||
|
|
{ letters: 'IIRC', expansion: '如果我没记错' },
|
||
|
|
],
|
||
|
|
getOptionKeywords( { letters, expansion } ) {
|
||
|
|
const expansionWords = expansion.split( /\s+/ );
|
||
|
|
return [ letters, ...expansionWords ];
|
||
|
|
},
|
||
|
|
getOptionLabel: acronym => acronym.letters,
|
||
|
|
getOptionCompletion: ( { letters, expansion } ) => (
|
||
|
|
<abbr title={ expansion }>{ letters }</abbr>
|
||
|
|
),
|
||
|
|
};
|
||
|
|
|
||
|
|
// 过滤器函数
|
||
|
|
function appendAcronymCompleter( completers, blockName ) {
|
||
|
|
return blockName === 'my-plugin/foo' ?
|
||
|
|
[ ...completers, acronymCompleter ] :
|
||
|
|
completers;
|
||
|
|
}
|
||
|
|
|
||
|
|
// 添加过滤器
|
||
|
|
wp.hooks.addFilter(
|
||
|
|
'editor.Autocomplete.completers',
|
||
|
|
'my-plugin/autocompleters/acronym',
|
||
|
|
appendAcronymCompleter
|
||
|
|
);
|
||
|
|
```
|