リッチテキストエディタのツールバーをカスタマイズできます

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

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

Sitecore AIでは、CKEditorを搭載するリッチテキストエディタ (RTE)ツールバーがデフォルトで固定された機能セットを備えています。エディター用のツールバーは、プロファイルを定義してSitecoreAIサイトに割り当てることで設定できます。これらのプロファイルは、コンテンツ作成者が利用できるエディターツールや構成方法を決定します。各プロファイルではツールバー内のアイテムを削除または並べ替えできますが、新機能の導入やツールバーの項目やグループのJSONスキーマ形状の変更はできません。

エディタープロファイルAPIの理解

Editor profile APIを使って、独自のRTEツールバー構成を持つ新しいプロファイルを作成できます。新しいツールバープロファイルを作成する際、ツールバーのアイテム名とJSON構造はサポートされている構成に従う必要があります。

エディタープロファイルは、2つの必須フィールドを持つJSONオブジェクトとして格納されます。

name - エディターツールバーのプロファイル名を指定します。
value - ツールバー項目およびグルーピングのJSON設定(JSON文字列化されたエディター設定オブジェクト)を含みます。

プロファイルに格納される場合、この構成はvalueプロパティ内でJSONストリング化されなければなりません。例えば:

{
  "name": "Basic Editing",
  "value": "{\"toolbar\":{\"items\":[\"bold\",\"italic\",\"underline\",\"link\",\"bulletedList\",\"numberedList\"]}}"
}

value配列をカスタマイズする際:

アイテム配列から任意のアイテムを削除することができます。
アイテムの並べ替え(グループやパイプキャラクター|セパレーターも含む)ことができます。

SitecoreAIとの互換性を確保するために:

新しいツールバーのアイテム名を追加しないでください。利用可能なツールバーのアイテムテーブルに記載されているアイテムIDのみが有効です。追加またはカスタムの名前は却下されます。
ツールバーアイテムやグループ化されたオブジェクトのJSONスキーマ構造を変更しないでください。新しい性質を導入したり、期待される物体の形状を変えたりすることはできません。
既存のツールバー項目の名前を変更しないでください。名前は利用可能なツールバーの項目表に記載されている項目と正確に一致しなければなりません(大文字に応じた)必要があります。
Sitecoreから提供されていない限り、カスタムプラグイン識別子の導入は避けてください。

利用可能なツールバーアイテム

以下のツールバー項目はRTEに編集可能です:

テキスト書式

アイテムID	概要
太字	太字のテキスト
斜体	斜体テキスト
強調	カスタム強調スタイル
下線	下線テキスト
消し通し	取り消し書きのテキスト
添字	添字の書式化
上付き文字	上付き文字の書式化
removeFormat	すべてのフォーマットを消す

カラーコントロール

アイテムID	概要
フォントカラー	テキストカラーピッカー
font背景色	ハイライトカラー

構成

アイテムID	概要
見出し	見出しドロップダウン(H1–H6、段落)
アライメント	左、中央、右に揃えて、両端を揃えてください
ブロッククォート	Block quoteation

リスト&インデント

アイテムID	概要
bulletedList	順序なしリスト
numberedList	順序付きリスト
インデント	へこみを増やす
アウトデント	へこみを減らす

リンク

アイテムID	概要
Link	外部リンク
内部リンク	内部Sitecore項目リンク
phoneLink	電話番号リンク

メディア&テーブル

アイテムID	概要
sitecoreSelectMedia	メディアライブラリ項目を挿入
insertTable	挿入表
水平線	水平ルールを挿入

高度な機能

アイテムID	概要
出典編集	生のHTMLソースエディタ
sitecoreResetFieldValue	クリアな価値

グループ化されたアイテム

グループ化されたドロップダウンメニューは以下の形をとります。

{
"group": "formatting",
"label": "Formatting",
"icon": "text",
"items": ["strikethrough", "subscript", "superscript", "removeFormat"]
}

上記のコードサンプルでは:

groupは一意識別子です。
labelはドロップダウンの表示名です。
iconはアイコン識別子です。
itemsは含まれるツールバー項目のIDリストです。

以下の表は、ツールバーのあらかじめ定義されたグループを示しています:

グループID	レーベル	アイコン	アイテム
フォーマット	フォーマット	テキスト	取り消し線、添字、上付き字、removeFormat
挿入	挿入	プラス	horizonSelectMedia, insertTable, horizontalLine

例のプロファイル

こちらはSitecoreAI RTEツールバープロファイルのJSON設定の例です。

最小プロファイル

{
  "name": "Minimal",
  "value": "{\"toolbar\":{\"items\":[\"bold\",\"italic\",\"link\"] }}"
}

マーケタープロフィール

{
  "name": "Marketing",
  "value": "{\"toolbar\":{\"items\":[\"bold\",\"italic\",\"underline\",\"|\",
\"heading\",\"|\",\"bulletedList\",\"numberedList\",\"|\",\"link\"
,\"internalLink\",\"|\",\"horizonSelectMedia\"}}"
}

カスタムスタイル付きのフルツールバープロファイル

{
  "name": "Full with Custom Styles",
  "value": "{\"toolbar\":{\"items\":[\"bold\",\"italic\",\"emphasis\",\"underline\",\"style\",\"blockQuote\",{\"label\":\"Formatting\",\"icon\":\"text\",\"items\":[\"strikethrough\",\"subscript\",\"superscript\",\"|\",\"removeFormat\"]},\"fontColor\",\"fontBackgroundColor\",\"|\",\"heading\",\"|\",\"alignment\",\"bulletedList\",\"numberedList\",\"|\",\"outdent\",\"indent\",\"|\",\"link\",\"internalLink\",\"phoneLink\",\"|\",{\"label\":\"Insert\",\"withText\":false,\"icon\":\"plus\",\"items\":[\"sitecoreSelectMedia\",\"insertTable\",\"horizontalLine\"]},\"|\",\"sourceEditing\",\"|\",\"sitecoreResetFieldValue\"]},\"style\":{\"definitions\":[{\"name\":\"Article category\",\"element\":\"h3\",\"classes\":[\"category\"]},{\"name\":\"Info box\",\"element\":\"p\",\"classes\":[\"info-box\"]}]}}"
}

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