RichText リファレンス

開発者は RichText コンポーネントを使用して contenteditable 入力 をレンダリングできます。ユーザーはブロックコンテンツを太字、斜体、リンク、その他のオプションでフォーマットできます。

RickText コンポーネントは非常にパワフルで、他のコンポーネントにはない以下の組み込み機能があります。

  • 編集画面、表示画面での一貫したスタイリング: 任意のブロックレベル要素、たとえば divh2p タグに編集可能なコンテナを設定できます。より簡単に style.css のスタイルをフロントエンドでの表示と編集画面に適用できます。editor.css でリライトする必要はありません。
  • 他とマッチするプレースホルダーテキスト: ユーザーがコンテンツを書く前に、ブロックエディターの他の部分とマッチしたスタイルでプレースホルダーテキストを配置できます。
  • フォーマットオプションの制御: RichTest フィールドででのフォーマットオプションを許可するか正確に指定できます。たとえばユーザーにテキストの太字、斜体、その両方を許可するかどうかを設定できます。

コンポーネントリファレンス セクション内の他のコンポーネントと異なり RichText は個別に存在します。これはブロックエディター内のみで意味があり、WordPress の他の領域では意味がないためです。

プロパティリファレンス

RickText コンポーネントに渡すことができるプロパティのリストについては GitHub 内のコンポーネントのドキュメントを参照してください。

RichText コンポーネントを使用するコアのブロック

多くのコアブロックが RickText コンポーネントを使用します。以下のリンク先の各ブロックの JavaScript の edit 関数はベストプラクティスとして、ブロック作成の際の参考になります。

  • Button: ボタンテキストの入力で使用します。
  • Heading: 見出しテキストの入力で使用します。
  • Quote: quotation と citation の2つの引用で使用します。
  • Search: 検索フィールドの上のラベルと「検索」ボタンテキストの2か所で使用します。

ES5

wp.blocks.registerBlockType( /* ... */, {
    // ...

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

    edit: function( props ) {
        return wp.element.createElement( wp.editor.RichText, {
            tagName: 'h2',  // このタグは要素の出力。編集画面で編集可能
            className: props.className,
            value: props.attributes.content, // データベースから、または属性デフォルトからの任意の既存コンテンツ
            formattingControls: [ 'bold', 'italic' ], // コンテンツは太字、斜体にできるが、他のフォーマットオプションは許可されない
            onChange: function( content ) {
                props.setAttributes( { content: content } ); // 更新したコンテンツはブロック属性として保存
            },
            placeholder: __( 'Heading...' ), // ユーザーに追加された任意のコンテツの前にこのテキストを表示
        } );
    },

    save: function( props ) {
        return wp.element.createElement( wp.editor.RichText.Content, {
            tagName: 'h2', value: props.attributes.content // 表示用に <h2>ユーザーが入力したコンテンツ</h2> をデータベースに保存
        } );
    }
} );

ESNext

import { registerBlockType } from '@wordpress/blocks';
import { RichText } from '@wordpress/block-editor';

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

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

    edit( { className, attributes, setAttributes } ) {
        return (
            <RichText
                tagName="h2" // このタグは要素の出力。編集画面で編集可能
                className={ className }
                value={ attributes.content } // データベースから、または属性デフォルトからの任意の既存コンテンツ
                formattingControls={ [ 'bold', 'italic' ] } // コンテンツは太字、斜体にできるが、他のフォーマットオプションは許可されない
                onChange={ ( content ) => setAttributes( { content } ) } // 更新したコンテンツはブロック属性として保存
                placeholder={ __( 'Heading...' ) } // Display this text before any content has been added by the user
            />
        );
    },

    save( { attributes } ) {
        return <RichText.Content tagName="h2" value={ attributes.content } />; // 表示用に <h2>ユーザーが入力したコンテンツ</h2> をデータベースに保存
    }
} );

よくある問題と解決策

RichText コンポーネントを使用すると共通の問題がしばしば発生します。

プレースホルダーコンテンツが入力域と別の場所に表示される

RichText のプレースホルダーコンテンツが表示したい入力域とは別の場所に表示される場合があります。おそらく以下の2つのどちらかが原因でしょう。

  1. インライン HTML 要素 を RichText コンポーネントとして使用することはできません。tagName プロパティが spanacode などのインライン要素を使用する場合は、ブロックレベル要素に変更する必要があります。
  2. 要素の position CSS プロパティ値は編集画面内で relative または absolute に設定する必要があります。style.css または editor.css 内のスタイルがこの要素の position プロパティ値を変更すると、表示時に問題が発生する可能性があります。

コンテンツ内に HTML フォーマットタグが表示される

<strong> や <em> などのテキストフォーマットの HTML タグがエスケープされてサイトのフロントエンド側に表示される場合は恐らく save 関数の問題です。save 関数のコードが <RichText.Content tagName="h2" value={ heading } /> (ESNext の場合) のようになっていることを確認してください。単純な出力 <h2>{ heading }</h2> は誤りです。

それでも予期しないフォーマットオプションが表示される

先に進む前に RichText コンポーネントが本当に必要か考え直してください。基本的な input や textarea 要素を使用したほうが良いかもしれません。フォーマットが一切必要ないならば、これらの HTML タグのほうが良いでしょう。

それでも RichText が使いたければ、formattingControls プロパティに formattingControls={ [] } (ESNext の場合) を指定してすべてのフォーマットオプションを削除してください。この場合でもコードの追加、インライン画像、他のフォーマットオプションは残ります。心配は無用です。すぐに修正される既存のバグを見つけただけです。

最終更新日: