リッチテキスト（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>
   ) : (
   __( 'Not Found' )
   ;
};

パラメータ

• state Object: データ状態。
• name string: フォーマットタイプの名前。

返り値

• Object?: フォーマットタイプ。
  

getFormatTypeForBareElement

データフォーマットタイプ属性なしで、要素のタグ名を考慮して、裸の要素を処理できるフォーマットタイプを取得します。

使用法

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( __( 'Format name: %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( __( 'Format name: %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>
   ) : (
   __( 'No Formats available' )
   );
};

パラメータ

• state Object: データ状態。

返り値

• Array: フォーマットタイプ。

アクション

文書化することはありません。