リッチテキストエディターにカスタムスタイルを追加してください
このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。
Editor Profiles APIを使って 、リッチテキストエディタ (RTE)ツールバーにカスタムスタイルを追加できます。これらのスタイルは、カスタム見出しやハイライトテキストなど、すぐに使えるフォーマットオプションを著者に提供します。
カスタムスタイルはエディターのプロファイルJSONのstyleプロパティを使って設定します。各スタイルの定義には以下が含まれます:
- name - エディターに表示される表示名。
- element - レンダリングする HTML 要素。
- classes - 1つ以上のCSSクラスを適用すること。
設定すると、これらのスタイルはリッチテキストエディターの 「スタイル」 ドロップダウンメニューに表示され、著者は選択したコンテンツに適用できます。
!重要エディターのツールバーでスタイルドロップダウンを有効にするには、ツールバーのアイテム配列にスタイルオプションを追加してください。スタイルが存在しない場合、スタイルプロパティで定義されたカスタムスタイルはアクセスできません。
定義したCSSクラス(例えばカテゴリやインフォボックス)が、公開されたサイト上でスタイルが見えるように、あなたのサイトのスタイルシートに存在していることを確認してください。
以下の例は、記事カテゴリ 見出しと 情報ボックス 段落のカスタムスタイルを含むツールバープロファイルを示しています。
{ "toolbar": "bold", "italic", "style", "style": { "definitions": { "name": "Article category", "element": "h3", "classes": "category" }, { "name": "Info box", "element": "p", "classes": "info-box" }
} }
このプロファイルがサイトに割り当てられている場合、コンテンツ作成者はこれらのスタイルを使って以下を行えます:
- 記事カテゴリのテキストをとしてレンダリングしてください。
- 情報ボックスのテキストを
のようにレンダリングしてください。