リッチテキストエディターにカスタムスタイルを追加してください

日本語翻訳に関する免責事項

このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。

Editor Profiles APIを使って、リッチテキストエディタ (RTE)ツールバーにカスタムスタイルを追加できます。これらのスタイルは、カスタム見出しやハイライトテキストなど、すぐに使えるフォーマットオプションを著者に提供します。

カスタムスタイルはエディターのプロファイルJSONのstyleプロパティを使って設定します。各スタイルの定義には以下が含まれます:

name - エディターに表示される表示名。
element - レンダリングするHTML要素。
classes - 1つ以上のCSSクラスを申請すること。

設定すると、これらのスタイルはリッチテキストエディターのStylesドロップダウンメニューに表示され、著者は選択したコンテンツに適用できます。

大事な

エディターのツールバーでStylesドロップダウンを有効にするには、ツールバーのアイテム配列にスタイルオプションを追加してください。スタイルが存在しない場合、スタイルプロパティで定義されたカスタムスタイルはアクセスできません。

定義したCSSクラス(例:カテゴリ、インフォボックス)がサイトのスタイルシートに存在し、公開されたサイト上でスタイルが見えるようにしてください。

以下の例は、Article category見出しとInfo box段落のカスタムスタイルを含むツールバープロファイルを示しています:

{
  "toolbar": ["bold", "italic", "style"],
  "style": [
    {
      "name": "Article category",
      "element": "h3",
      "classes": ["category", "secondary", "heading"]
    },
    {
      "name": "Info box",
      "element": "p",
      "classes": ["info-box"]
    }
  ]
}
``

このプロファイルがサイトに割り当てられている場合、コンテンツ作成者はこれらのスタイルを使って以下を行えます:

Article categoryテキストを<h3 class="category secondary heading">としてレンダリングします。
Info boxテキストを<p class="info-box">としてレンダリングします。

この記事を改善するための提案がある場合は、お知らせください!