このページは Gutenberg の RichText コンポーネントのリファレンス 2019年11月25日版を和訳したものです。

`RichText`

リッチで contenteditable な入力欄をレンダリングし、ユーザがコンテンツをフォーマットすることが可能です。

プロパティ

`value: String`

必須
編集対象の HTML 文字列。 HTML は整合性がとれている( valid な)必要があります。tagName を指定した場合はその中の HTML が valid な必要があります。

`onChange( value: String ): Function`

必須
値の変更時に呼び出されます。

`tagName: String`

デフォルト値: div
編集可能要素のタグ名。インライン表示要素はサポートされません。

`placeholder: String`

任意
フィールドが空のときのプレースホルダテキスト。input や textarea の同名属性と似た動作。

`keepPlaceholderOnFocus: Boolean`

任意
コンテンツが未記入の場合、ブロックを選択・フォーカスしてもプレースホルダ文字を表示し続けるかを指定します。

`multiline: Boolean | String`

任意
デフォルトでは、Enter で改行が挿入されます。
このプロパティを設定すると、編集可能フィールドが複数の段落を持てるようになり、Enter で新しい段落が生成されます。

`onSplit( value: String ): Function`

任意
コンテンツが分割可能なときに呼び出されます。value には分割したコンテンツが指定されます。この内容で新しいブロックを生成してリターンします。
これが動作するためには、onReplace も同時に指定する必要があります。

`onReplace( blocks: Array ): Function`

任意
RichText のインスタンスが指定したブロックで置き換えできるときに呼び出されます。

`onMerge( forward: Boolean ): Function`

任意
ブロックをマージできるときに呼び出されます。次のブロックとマージできるときは forward が true に、手前のブロックとマージできるときは false になります。

`onRemove( forward: Boolean ): Function`

任意
ブロックが削除可能なときに呼び出されます。選択箇所が次のブロックに移動できる場合 forward が true に、手前のブロックと移動できる場合は false になります。

`allowedFormats: Array`

任意
デフォルトでは、登録された全フォーマットが使用できます。この設定により使用可能なフォーマットを微調整できます。例: [ 'core/bold', 'core/link' ]

`withoutInteractiveFormatting: Boolean`

任意
デフォルトでは、全てのフォーマット操作が表示されます。この設定はコンテンツをインタラクティブにするフォーマット操作を削除するのに使用します。
これは、

`isSelected: Boolean`

任意
フォーマット操作を表示するため、入力欄の選択状態を表示するかを指定します。デフォルトではブロックを選択したとき、操作部を表示します。

`autocompleters: Array<Completer>`

任意
デフォルト設定の代わりに、autocompleters が使用するリスト。

`preserveWhiteSpace: Boolean`

任意
value 内の空白文字を保持するかどうかを指定します。通常、タブ文字、ニューライン文字、スペース文字が一つのスペースにまとめられます。オンにすると、ソフト改行は改行要素ではなく、ニューライン文字として保存されます。

RichText.Content

RichText.Content はブロックの save 関数でリッチテキストのコンテンツを正しく保存するために使います。

使用例


const { registerBlockType } = wp.blocks;
const { RichText } = wp.editor;

registerBlockType( /* ... */, {
	// ...

	attributes: {
		content: {
			source: 'html',
			selector: 'h2',
		},
	},

	edit( { className, attributes, setAttributes } ) {
		return (
			<div className={ className }>
				<RichText
					tagName="h2"
					value={ attributes.content }
					onChange={ ( content ) => setAttributes( { content } ) }
				/>
			</div>
		);
	},

	save( { attributes } ) {
		return (
			<div>
				<RichText.Content tagName="h2" value={ attributes.content } />
			</div>
		);
	}
} );

RichTextToolbarButton

フォーマットツールバーの拡張スロット。フォーマットを UI に引き上げるための registerFormatType のコールの edit 関数で使用します。

使用例

import { registerFormatType } from 'wp-rich-text';
import { richTextToolbarButton } from 'wp-editor';

registerFormatType( /* ... */, {
	/* ... */
	edit( { isActive } ) {
		return (
			<RichTextToolbarButton
				icon={ 'editor-code' }
				title={ 'My formatting button' }
				onClick={ /* ... */ }
				isActive={ isActive }
				/>
		);
	},
	/* ... */
} );