リッチテキストエディタのツールバーをカスタマイズできます
このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。
Sitecore AIでは、CKEditorによる リッチテキストエディタ (RTE)ツールバーがデフォルトで固定された機能セットを備えています。エディター用のツールバーは 、プロファイル を定義してSitecoreAIサイトに割り当てることで設定できます。これらのプロファイルは、コンテンツ作成者が利用できるエディターツールや構成方法を決定します。各プロファイルではツールバー内のアイテムを削除または並べ替えできますが、新機能の導入やツールバーのアイテムやグループのスキーマ形状の変更はできません。
エディタープロファイルAPIの理解
Editor profile APIを使って、独自のRTEツールバー構成を持つ新しいプロファイルを作成できます。新しいツールバープロファイルを作成する際、ツールバーの項目名や構造はサポートされている構成に従う必要があります。
エディタープロファイルは、2つの必須フィールドを持つオブジェクトとして保存されます。
- 名前 - エディターツールバーのプロファイル名を指定します。
- value - ツールバーのアイテムとグループ化の設定(-stringified Editor config objectとして)を含みます。
プロファイルに格納する場合、この構成はvalueプロパティ内でストリング化されなければなりません。例えば:
{ "name": "Basic Editing", "value": "{"toolbar":{"items":"bold","italic","underline","link","bulletedList","numberedList"}}" }
value配列をカスタマイズする際:
- アイテム配列から任意のアイテムを削除することができます。
- アイテムの順序を入れ替えることができます(グループやパイプキャラクター|区切り器も含む)。
SitecoreAIとの互換性を確保するために:
- 新しいツールバーのアイテム名を追加しないでください。利用可能なツールバーのアイテムテーブルに記載されているアイテムIDのみが有効です。追加またはカスタムネームは却下されます。
- ツールバーアイテムやグループオブジェクトのスキーマ構造を変更しないでください。新しいプロパティを導入したり、期待されるオブジェクトの形状を変更したりすることはできません。
- 既存のツールバー項目の名前を変更しないでください。名前は「利用可能なツールバーのアイテムテーブル」に記載されている項目と正確に一致しなければなりません(大文字を区別して)。
- Sitecoreが提供していない限り、カスタムプラグイン識別子は導入しないでください。
!注
、リッチテキストエディタのツールバープロファイルはフィールドごとではなくサイトレベルで適用されます。XM/XPとは異なり、リッチテキストフィールドの定義のソースフィールドにエディタープロファイルを割り当てることはサポートされておらず、効果もありません。サイト内のすべてのリッチテキストフィールドは、そのサイトに割り当てられたツールバープロファイルを使用します。
利用可能なツールバーアイテム
以下の表に記載されているツールバー項目はRTEに追加可能です。
このテーブルには、CKEditorプロファイルを通じて明示的に設定可能なツールバー項目のみが含まれています。リッチテキストの編集時にコンテンツ作成者が見えるコマンド(例えば「検索」と「置き換え」)はエディターから提供されていますが、ツールバーのプロファイルでは設定できません。
テキスト書式
アイテムID
概要
太字
太字のテキスト
斜体
斜体テキスト
強調
カスタム強調スタイル
下線
下線テキスト
消し通し
取り消し書きのテキスト
添字
添字の書式化
上付き文字
上付き文字の書式化
removeFormat
すべてのフォーマットを消す
スタイル
ツールバーにスタイルドロップダウンが表示されます
カラーコントロール
アイテムID
概要
フォントカラー
テキストカラーピッカー
font背景色
ハイライトカラー
構成
アイテムID
概要
見出し
見出しドロップダウン(H1–H6、段落)
アライメント
左、中央、右に揃えて、両端を揃えてください
ブロッククォート
ブロッククォート
リスト&インデント
アイテムID
概要
bulletedList
順序なしリスト
numberedList
順序付きリスト
インデント
へこみを増やす
アウトデント
へこみを減らす
リンク
アイテムID
概要
リンク
外部リンク
内部リンク
内部Sitecore項目リンク
phoneLink
電話番号リンク
メディア&テーブル
アイテムID
概要
sitecoreSelectMedia
メディアライブラリ項目を挿入
insertTable
挿入表
水平線
水平ルールを挿入
高度な機能
アイテムID
概要
出典編集
生のHTMLソースエディタ
sitecoreResetFieldValue
クリアな価値
グループ化されたアイテム
グループ化されたドロップダウンメニューは以下の形態をとります。
{ "group": "formatting", "label": "Formatting", "icon": "text", "items": "strikethrough", "subscript", "superscript", "removeFormat" }
上記のコードサンプルでは:
- グループは一意識別子です。
- labelはドロップダウン表示名です。
- アイコンはアイコン識別子です。
- itemsは含まれているツールバーのアイテムIDのリストです。
以下の表は、ツールバーのあらかじめ定義されたグループを示しています:
グループID
レーベル
アイコン
アイテム
フォーマット
フォーマット
本文
取り消し線、添字、上付き字、removeFormat
挿入
挿入
プラス
horizonSelectMedia, insertTable, horizontalLine
例のプロファイル
以下はSitecoreAI RTEツールバープロファイルの設定例です。
最小プロファイル
{ "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", { "group": "formatting", "label": "Formatting", "icon": "text", "items": "strikethrough", "subscript", "superscript", "|","removeFormat" }, "fontColor", "fontBackgroundColor", "|", "heading", "|", "alignment", "bulletedList", "numberedList", "|", "outdent", "indent", "|", "link", "internalLink", "phoneLink", "|", { "group": "insert", "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" }
} } }
リッチテキストフィールド内のHTMLフィルタリング
リッチテキストフィールドにコンテンツを保存すると、SitecoreAIがHTMLを処理・フィルタリングします。これにより、サイトをセキュリティリスクや意図しないマークアップから守ることができます。その結果、