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

富文本

命名空间：core/rich-text

选择器

getFormatType

通过名称返回格式类型。

使用方法

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 属性）的格式类型（如果有），给定该元素的标签名称。

使用方法

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

获取可以处理元素的格式类型（如果有），给定其类名。

使用方法

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

返回所有可用的格式类型。

使用方法

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: 格式类型。

操作

暂无内容需要记录。