Edited at

Gutenberg RichText コンポーネント和訳

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


RichText

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


プロパティ


value: String

必須

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


onChange( value: String ): Function

必須

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


tagName: String

デフォルト値: div

編集可能要素のタグ名。インライン表示要素はサポートされません。


placeholder: String

任意

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


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 が使用するリスト。


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 }
/>
);
},
/* ... */
} );