--- title: "リッチテキストエディタのツールバーをカスタマイズできます" slug: "customize-the-rich-text-editor-toolbar" abstract: "Editor profile APIを使えば、SitecoreAIのRTEツールバーをプロファイルで設定し、アイテムの順序変更や削除を行い、これらのプロファイルを特定のサイトに割り当てることができます。" --- # リッチテキストエディタのツールバーをカスタマイズできます Sitecore AIでは、CKEditorによる [リッチテキストエディタ](https://doc.sitecore.com/sai/en/users/sitecoreai/add-rich-text-to-a-page.html) (RTE)ツールバーがデフォルトで固定された機能セットを備えています。エディター用のツールバーは [、プロファイル](https://api-docs.sitecore.com/sai/sites-api/editor-profiles/createprofile) を定義して[SitecoreAIサイトに割り当て](https://api-docs.sitecore.com/sai/sites-api/sites/updatesite)ることで設定できます。これらのプロファイルは、コンテンツ作成者が利用できるエディターツールや構成方法を決定します。各プロファイルではツールバー内のアイテムを削除または並べ替えできますが、新機能の導入やツールバーのアイテムやグループのスキーマ形状の変更はできません。 ## エディタープロファイルAPIの理解 [Editor profile API](https://api-docs.sitecore.com/sai/sites-api/editor-profiles)を使って、独自のRTEツールバー構成を持つ新しいプロファイルを作成できます。新しいツールバープロファイルを作成する際、ツールバーの項目名や構造はサポートされている構成に従う必要があります。 エディタープロファイルは、2つの必須フィールドを持つオブジェクトとして保存されます。 - 名前 - エディターツールバーのプロファイル名を指定します。 - value - ツールバーのアイテムとグループ化の設定(-stringified Editor config objectとして)を含みます。 プロファイルに格納する場合、この構成はvalueプロパティ内でストリング化されなければなりません。例えば: { "name": "Basic Editing", "value": "{"toolbar":{"items":"bold","italic","underline","link","bulletedList","numberedList"}}" } value配列をカスタマイズする際: - アイテム配列から任意のアイテムを削除することができます。 - アイテムの順序を入れ替えることができます(グループやパイプキャラクター|区切り器も含む)。 SitecoreAIとの互換性を確保するために: - 新しいツールバーのアイテム名を追加しないでください。利用可能なツールバーのアイテムテーブルに記載されているアイテムIDのみが有効です。追加またはカスタムネームは却下されます。 - ツールバーアイテムやグループオブジェクトのスキーマ構造を変更しないでください。新しいプロパティを導入したり、期待されるオブジェクトの形状を変更したりすることはできません。 - 既存のツールバー項目の名前を変更しないでください。名前は「利用可能なツールバーのアイテムテーブル」に記載されている項目と正確に一致しなければなりません(大文字を区別して)。 - Sitecoreが提供していない限り、カスタムプラグイン識別子は導入しないでください。 > !注:SitecoreAIでは、リッチテキストエディタのツールバープロファイルはフィールドごとではなくサイトレベルで適用されます。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を処理・フィルタリングします。これにより、サイトをセキュリティリスクや意図しないマークアップから守ることができます。その結果、