gutenbergdocs/reference-guides/data/data-core-rich-text.md

162 lines
3.4 KiB
Markdown
Raw Normal View History

2025-10-21 17:33:45 +00:00
# 富文本
命名空间:`core/rich-text`
## 选择器
<!-- START TOKEN(Autogenerated selectors|../../../packages/rich-text/src/store/selectors.js) -->
### getFormatType
通过名称返回格式类型。
_使用方法_
```js
import { __, sprintf } from '@wordpress/i18n';
import { store as richTextStore } from '@wordpress/rich-text';
import { useSelect } from '@wordpress/data';
const ExampleComponent = () => {
const { getFormatType } = useSelect(
( select ) => select( richTextStore ),
[]
);
const boldFormat = getFormatType( 'core/bold' );
return boldFormat ? (
<ul>
{ Object.entries( boldFormat )?.map( ( [ key, value ] ) => (
<li>
{ key } : { value }
</li>
) ) }
</ul>
) : (
__( '未找到' )
;
};
```
_参数_
- _state_ `Object`: 数据状态。
- _name_ `string`: 格式类型名称。
_返回值_
- `?Object`: 格式类型。
### getFormatTypeForBareElement
获取可以处理裸元素(不带 data-format-type 属性)的格式类型(如果有),给定该元素的标签名称。
_使用方法_
```js
import { __, sprintf } from '@wordpress/i18n';
import { store as richTextStore } from '@wordpress/rich-text';
import { useSelect } from '@wordpress/data';
const ExampleComponent = () => {
const { getFormatTypeForBareElement } = useSelect(
( select ) => select( richTextStore ),
[]
);
const format = getFormatTypeForBareElement( 'strong' );
return format && <p>{ sprintf( __( '格式名称: %s' ), format.name ) }</p>;
};
```
_参数_
- _state_ `Object`: 数据状态。
- _bareElementTagName_ `string`: 要查找格式类型的元素的标签名称。
_返回值_
- `?Object`: 格式类型。
### getFormatTypeForClassName
获取可以处理元素的格式类型(如果有),给定其类名。
_使用方法_
```js
import { __, sprintf } from '@wordpress/i18n';
import { store as richTextStore } from '@wordpress/rich-text';
import { useSelect } from '@wordpress/data';
const ExampleComponent = () => {
const { getFormatTypeForClassName } = useSelect(
( select ) => select( richTextStore ),
[]
);
const format = getFormatTypeForClassName( 'has-inline-color' );
return format && <p>{ sprintf( __( '格式名称: %s' ), format.name ) }</p>;
};
```
_参数_
- _state_ `Object`: 数据状态。
- _elementClassName_ `string`: 要查找格式类型的元素的类名。
_返回值_
- `?Object`: 格式类型。
### getFormatTypes
返回所有可用的格式类型。
_使用方法_
```js
import { __, sprintf } from '@wordpress/i18n';
import { store as richTextStore } from '@wordpress/rich-text';
import { useSelect } from '@wordpress/data';
const ExampleComponent = () => {
const { getFormatTypes } = useSelect(
( select ) => select( richTextStore ),
[]
);
const availableFormats = getFormatTypes();
return availableFormats ? (
<ul>
{ availableFormats?.map( ( format ) => (
<li>{ format.name }</li>
) ) }
</ul>
) : (
__( '无可用格式' )
);
};
```
_参数_
- _state_ `Object`: 数据状态。
_返回值_
- `Array`: 格式类型。
<!-- END TOKEN(Autogenerated selectors|../../../packages/rich-text/src/store/selectors.js) -->
## 操作
<!-- START TOKEN(Autogenerated actions|../../../packages/rich-text/src/store/actions.js) -->
暂无内容需要记录。
<!-- END TOKEN(Autogenerated actions|../../../packages/rich-text/src/store/actions.js) -->