リッチテキストエディターの設定 configure-the-rich-text-editor

リッチテキストエディター（RTE）には、テキストコンテンツの編集に使用できる幅広い機能が用意されています。 アイコン、選択ボックス、ツールバーおよびメニューを使用して、テキストを WYSIWYG で編集できます。

RTE 機能をオーサリングに使用する方法については、リッチテキストエディターをオーサリングに使用を参照してください。 RTE の設定をおこなうことで、オーサリングコンポーネント内で使用可能な機能を有効化、無効化および拡張できます。 以下に、Experience Manager の RTE 設定タスクを完了するために推奨されるワークフローを示します。

図：の設定方法を学ぶための一連の手順

タッチ操作 UI とクラシック UI について understand-touch-enabled-ui-and-classic-ui

タッチ操作対応 UI は、Experience Manager の標準ユーザーインターフェイスです。 アドビは、オーサリング環境向けに、 レスポンシブデザイン を備えたタッチ操作対応 UI を導入しました。 タッチ操作対応 UI は、タッチデバイスとデスクトップデバイス向けに設計されています。 インターフェイスは元のクラシック UI とは大きく異なります。

図：タッチ操作対応 UI のリッチテキストエディターツールバー

図：クラシック UI のリッチテキストエディターツールバー

各種編集モード editingmodes

Experience Manager では、コンポーネントの各種モードを使用して、テキストコンテンツを作成および編集できます。 コンテンツの作成およびフォーマットのためのツールバーオプションと、各種編集モードにおける RTE 対応コンポーネントのユーザーエクスペリエンスは、RTE 設定によって異なります。

インライン編集 inline-editing

（ゆっくりしたダブルクリックで）開いた場合、コンテンツはページ内で編集できます。 非常に基本的なオプションを備えたコンパクトツールバーが表示されます。

図：タッチ操作対応 UI の基本ツールバーを使用したインライン編集

クラシック UI では、コンポーネントをゆっくりダブルクリックするとインライン編集が可能になり、オレンジ色の輪郭でコンテンツが強調表示されます。 コンテンツファインダーが開くと、使用可能な RTE フォーマットオプションを備えたツールバーがウィンドウ上部に表示されます。 コンテンツファインダーが開かない場合は、フォーマットオプションは表示されず、基本的なテキスト編集のみおこなうことができます。

全画面表示での編集 full-screen-editing

Experience Manager コンポーネントをフルスクリーン表示で開くことができます。この表示にした場合は、ページコンテンツが非表示になり、使用可能なスクリーンを占有します。 フルスクリーン編集には最も多くの編集オプションがあるので、インライン編集の詳細版と考えてください。 フルスクリーン編集を開くには、インライン編集モードの使用中にコンパクトツールバーから をクリックします。

ダイアログフルスクリーンモードでは、詳細な RTE ツールバーのほかに、ダイアログ内で使用可能なオプションとコンポーネントも提供されます。 このモードは、他のコンポーネントと共に RTE を含むダイアログにのみ適用されます。

図：タッチ操作対応 UI のフルスクリーンモードで編集するときに表示される、詳細な RTE ツールバー

ダイアログ編集 dialog-editing

コンポーネントをダブルクリックすると、コンテンツ編集用のダイアログボックスが開きます。 既存のページの上面に開きます。 一部のシナリオでは、ポップアップウィンドウとして開くこともあります。 例えば、複数列から成るページレイアウト内の列の一部がテキストコンポーネントで、ダイアログ用の領域が少ない場合などです。

図：タッチ操作対応 UI のダイアログ編集モード

図：編集用の詳細なツールバーを含む、クラシック UI のダイアログボックス

RTE プラグインと関連機能について aboutplugins

この機能は、一連のプラグインを介して使用可能になります。各プラグインには以下が含まれます。

RTE の基本機能は、該当するプラグインのノードにある features プロパティの値によって、アクティベートまたはアクティベート解除されます。

以下の表に最新のプラグインを示します。

設定パスと設定の場所について understand-the-configuration-paths-and-locations

作成者に提供する RTE 編集のモード（および UI）によって、RTE プラグインをアクティベートするときの設定詳細の場所が決まります。

ダイアログ編集モードで適用される次のプロパティを設定します（タッチ UI のみ）。

タッチ操作ダイアログで RTE を使用する場合は、問題の発生を避けるために、プロパティ useFixedInlineToolbar に true を設定する必要があります。

インプレース編集のカスタマイズ customizing-in-place-editing

次のプロパティを設定することで、テキストエディターが開始する HTML セレクターを定義できます。

ダイアログモードに対応するプロパティは、name です。

プラグインのアクティベートによる RTE 機能の有効化 enable-rte-functionalities-by-activating-plug-ins

リッチテキストエディター（RTE）の各機能は一連のプラグインから使用でき、それぞれに features プロパティがあります。 features プロパティを設定することで、各プラグインの各種機能を有効にすることも無効にすることもできます。

RTE プラグインの設定について詳しくは、RTE プラグインのアクティベートおよび設定方法に関する説明を参照してください。

サンプル：RTE の設定方法を例示したサンプル設定をダウンロードしてください。 このパッケージではすべての機能が有効になっています。

RTE ツールバーの設定 dialogfullscreen

AEM では、リッチテキストエディターのインターフェイスを編集モードごとに異なる設定にできます。 デフォルト設定を以下に示します。 これらの設定を必要に応じて上書きできます。 作成者に提供するツールバー機能のみをカスタマイズします。 すべてのツールバー設定を指定する必要はありません。

dialogFullScreen 用のツールバーを設定するには、次のサンプル設定を使用します。

<uiSettings jcr:primaryType="nt:unstructured">
  <cui jcr:primaryType="nt:unstructured">
    <inline
      jcr:primaryType="nt:unstructured"
      toolbar="[format#bold,format#italic,format#underline,#justify,#lists,links#modifylink,links#unlink,#paraformat]">
      <popovers jcr:primaryType="nt:unstructured">
        <justify
          jcr:primaryType="nt:unstructured"
          items="[justify#justifyleft,justify#justifycenter,justify#justifyright,justify#justifyjustify]"
          ref="justify"/>
        <lists
          jcr:primaryType="nt:unstructured"
          items="[lists#unordered,lists#ordered,lists#outdent,lists#indent]"
          ref="lists"/>
        <paraformat
          jcr:primaryType="nt:unstructured"
          items="paraformat:getFormats:paraformat-pulldown"
          ref="paraformat"/>
      </popovers>
    </inline>
    <dialogFullScreen
      jcr:primaryType="nt:unstructured"
      toolbar="[format#bold,format#italic,format#underline,justify#justifyleft,justify#justifycenter,justify#justifyright,justify#justifyjustify,lists#unordered,lists#ordered,lists#outdent,lists#indent,links#modifylink,links#unlink,table#createoredit,#paraformat,image#imageProps]">
      <popovers jcr:primaryType="nt:unstructured">
        <paraformat
          jcr:primaryType="nt:unstructured"
          items="paraformat:getFormats:paraformat-pulldown"
          ref="paraformat"/>
      </popovers>
    </dialogFullScreen>
    <tableEditOptions
      jcr:primaryType="nt:unstructured"
      toolbar="[table#insertcolumn-before,table#insertcolumn-after,table#removecolumn,-,table#insertrow-before,table#insertrow-after,table#removerow,-,table#mergecells-right,table#mergecells-down,table#mergecells,table#splitcell-horizontal,table#splitcell-vertical,-,table#selectrow,table#selectcolumn,-,table#ensureparagraph,-,table#modifytableandcell,table#removetable,-,undo#undo,undo#redo,-,table#exitTableEditing,-]">
    </tableEditOptions>
  </cui>
</uiSettings>

インラインモードとフルスクリーンモードでは別の UI 設定が使用されます。 ツールバープロパティは、ツールバーのボタンの指定に使用します。

例えば、ボタン自体が 1 つの機能（例：Bold）である場合は、PluginName#FeatureName と指定されます（例：links#modifylink）。

ボタンがポップオーバー（プラグインのいくつかの機能を含む）の場合は、#PluginName と指定されます（例：#format）。

ボタンのグループの間の区切り記号（|）は、- で指定できます。

インラインまたはフルスクリーンモードのポップアップノードには、使用するポップオーバーのリストが含まれます。 「popovers」ノードの下の各子ノードは、プラグインの名前を取って名付けられます（例：format）。 プラグインの機能のリストが含まれるプロパティ「items」があります（例：format#bold）。

RTE ユーザーインターフェイス設定とコンテンツポリシー rtecontentpolicies

管理者は、上述のような設定を行わなくても、コンテンツポリシーを使用して RTE オプションを制御できます。 コンテンツポリシーでは、編集可能テンプレートの一部として使用されるコンポーネントのデザインプロパティが定義されます。 例えば、RTE を使用するテキストコンポーネントが編集可能テンプレートで使用される場合は、コンテンツポリシーの定義によって、太字オプションやいくつかの段落フォーマットオプションを使用可能にできます。 コンテンツポリシーは再利用が可能であり、複数のテンプレートに対して適用できます。

RTE フローで使用可能なオプションに関するユーザーインターフェイス設定がコンテンツポリシーに影響します。

例については、テキストコアコンポーネントのドキュメントを参照してください。

ツールバーアイコンとコマンドのマッピングのカスタマイズ iconstoolbar

RTE ツールバーに表示される Coral アイコンと使用可能なコマンドとのマッピングをカスタマイズできます。 Coral アイコンに加えて他のアイコンを使用することはできません。

以下に、textItalic という名前の Coral アイコンにコマンド「Bold」をマッピングするサンプルスニペットを示します。

<text jcr:primaryType="nt:unstructured" sling:resourceType="cq/gui/components/authoring/dialog/richtext" name="./text" useFixedInlineToolbar="{Boolean}true">
    <rtePlugins jcr:primaryType="nt:unstructured">
        <format jcr:primaryType="nt:unstructured" features="bold,italic"/>
    </rtePlugins>
    <uiSettings jcr:primaryType="nt:unstructured">
        <cui jcr:primaryType="nt:unstructured">
            <inline jcr:primaryType="nt:unstructured"
                toolbar="[format#bold,format#italic,format#underline,links#modifylink,links#unlink]">
            </inline>
            <icons jcr:primaryType="nt:unstructured">
                <bold jcr:primaryType="nt:unstructured"
                    command="format#bold"
                    icon="textItalic"/>
            </icons>
        </cui>
    </uiSettings>
</text>

CoralUI 2 リッチテキストエディターへの切り替え switch-to-coralui-rich-text-editor

ページに、CoralUI 2 RTE clientlib または CoralUI 3 RTE clientlib を含めることができます。 デフォルトでは、リッチテキストエディターには CoralUI 3 RTE clientlib が含まれています。 CoralUI 2 RTE に切り替えるには、次の手順を実行します。

その他の情報 further-information

RTE の設定について詳しくは、AEM Widget API リファレンスを参照してください。

特に、使用可能なプラグインおよび関連オプションを確認するには、以下を参照してください。

これらを使用して、独自の RTE を拡張およびカスタマイズできます。 例えば、リンク作成時にページで使用できるアンカーをリストするために、LinkPlugin を独自に実装できます。

既知の制限事項 known-limitations

AEM RTE 機能には次の制限があります。

ベストプラクティスとヒント best-practices-and-tips

RTE に関するよくある問題のトラブルシューティング troubleshoot-issues-with-aem-rich-text-editor

複数のテーブルセルを選択する方法を教えてください。

テーブル内の複数のセルを選択するには、CtrlキーまたはCmdキーを押しながらテーブルのセルを 1 つずつクリックしてください。

選択したセルのプロパティを設定するなどして操作を実行します。

「設定」ボタンを使用してコンポーネントを編集すると、ハイパーリンクが失われてしまう

「設定」ボタンを使用してテキストコンポーネントを編集することによって、ハイパーリンクを追加します。 もう一度編集して、再びハイパーリンクを検証すると、ハイパーリンクが失われることがあります。

回避策は、編集ダイアログが 2 度目に表示されたときに、テキストコンポーネントをクリックしてから、リンク検証を実行します。

この問題は AEM 6.3 以降で解決されています。

ソース編集モードで追加された HTML コンテンツが失われてしまう

XSS が発生しやすい HTML を追加しないでください。 RTE ではなく AEM は、XSS AntiSamy ルールに準拠するために HTML コンテンツを削除することがあります。

貼り付けた HTML が保存されていることを確認するには、（コンテンツノードの）CRXDE で保存されたコンテンツを確認します。

保存されていない場合、HTML は RTE の規則に準拠していなかったため、RTEによって削除されたということです。

CRXDE に保存されていてページにレンダリングされていない場合（レンダリングを確認するには、ページのプレビューを参照）、AEM XSS ルールによって削除されています。

マルチフィールドコンポーネントが期待どおりに機能しない

マルチフィールドコンポーネントを作成するには、CoralUI 3 のみを使用してください。 CoralUI 2 コンポーネントダイアログを使用しないでください。

また、マルチフィールド実装コードとノード構造が正しいことを確認してください。

管理者が利用できる設定を、作成者が利用できない

インターフェイス設定の更新が管理者には反映されているが作成者アカウントには反映されていない場合、設定ノードに config という名前が付けられていないか確認してください。 configPathプロパティを使用します。