リッチテキストエディターの設定

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

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

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

タッチ操作 UI とクラシック UI について

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

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

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

各種編集モード

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

インライン編集

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

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

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

全画面表示での編集

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

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

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

ダイアログ編集

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

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

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

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

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

• features プロパティ：

  • プラグインの基本機能をアクティベートまたはアクティベート解除するために使用
  • 標準化された手順を使用して設定可能

• 必要に応じて、追加のプロパティやオプションに特別な設定が必要です。

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

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

• API ドキュメントへのリンクを含むプラグイン ID。ID は、プラグインをアクティベートするときにノード名として使用されます。
• features プロパティの許可されている値。
• プラグインが提供する機能の説明。

設定パスと設定の場所について

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

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

• useFixedInlineToolbar：RTE ツールバーをフロートではなく固定にするには、RTE ノード（sling:resourceType= cq/gui/components/authoring/dialog/richtext のもの）に定義されているこのブール値プロパティを True に設定します。

  このプロパティが true のときは、デフォルト動作により、リッチテキスト編集が「foundation-contentloaded」イベントで開始します。

  これを防ぐには、customStart プロパティを True に設定し、「rte-start」イベントを呼び出して RTE の編集を開始するようにします。このプロパティが true のときは、デフォルトの動作（クリック時に RTE が開始する）が機能しません。

• customStart：RTE を開始するタイミングを True イベントの呼び出しによって制御するには、RTE ノードに定義されているこのブール値プロパティを rte-start に設定します。

• rte-start：このイベントを RTE の contenteditable-div（RTE の編集を開始するタイミング）で呼び出します。これは、customStart が true に設定されている場合にのみ機能します。

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

インプレース編集のカスタマイズ

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

• editElementQuery - cq:InplaceEditingConfig に定義済み。このプロパティは、テキストコンポーネントのインライン編集を開始する HTML 要素のセレクターを指定するのに使用します。プロパティの指定がない場合は、インライン編集がテキストコンポーネント HTML 上で直接開始されます。
• textPropertyName - cq:InplaceEditingConfig に定義済み。このプロパティは、テキストコンポーネントの HTML 値をインライン編集後も保持しておくコンテンツノードに保存するプロパティの名前を指定するのに使用します。

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

プラグインのアクティベートによる RTE 機能の有効化

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

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

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

RTE ツールバーの設定

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 ユーザーインターフェイス設定とコンテンツポリシー

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

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

• ユーザーインターフェイス設定では、コンテンツポリシーで使用可能なオプションを定義します。
• RTE のユーザーインターフェイス設定が削除されたか、どの項目も有効にしていない場合、コンテンツポリシーではその設定ができません。
• 作成者は、ユーザーインターフェイス設定およびコンテンツポリシーによって使用可能となっている機能にのみアクセスできます。

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

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

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

1. icons の下に、uiSettings/cui という名前のノードを作成します。

2. そのノードの下に、各アイコンのノードを作成します。

3. 個々のアイコンノードで、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 リッチテキストエディターへの切り替え

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

1. ノード /libs/cq/gui/components/authoring/editors/clientlibs/core を /apps の下にオーバーレイし、次の操作を実行します。

   • dependencies プロパティで、rte.coralui3 を rte.coralui2 に置き換えます。
   • 埋め込みプロパティで、cq.authoring.editor.core.inlineediting.rte.coralui3 を cq.authoring.editor.core.inlineediting.rte.coralui2 に置き換えます。
   • 埋め込みプロパティで、cq.authoring.rte.coralui3 を cq.authoring.rte.coralui2 に置き換えます。

2. ノード/libs/cq/gui/components/authoring/dialog/richtext/clientlibs/rte/coralui3および/libs/cq/gui/components/authoring/dialog/richtext/clientlibs/rte/coralui2を/appsの下にオーバーレイします。

   カテゴリcq.authoring.dialogを/apps/cq/gui/components/authoring/dialog/richtext/clientlibs/rte/coralui3から削除して、/apps/cq/gui/components/authoring/dialog/richtext/clientlibs/rte/coralui2 に追加してください。

3. ページに含まれている他の依存関係を rte.coralui3 から rte.coralui2 に変更します。例えば、/appsの下のノード/libs/mcm/campaign/components/touch-ui/clientlibs/rteをオーバーレイした後、そのノードの依存関係をすべてrte.coralui3からrte.coralui2に変更します。

4. /appsの下のノードcq/ui/widgetsをオーバーレイします。ノード /apps/cq/ui/widgets の依存関係 cq.rte を cq.coralui2.rte で置き換えます。

その他の情報

RTE の設定について詳しくは、AEM ウィジェット API リファレンスを参照してください。

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

• CQ.form.RichText コンポーネントは、スタイル設定されたテキスト情報（リッチテキスト）を編集するためのフォームフィールドを提供します。リッチテキストフォームに使用可能なすべてのパラメーターについては、「設定オプション」を参照してください。

• リッチテキストコンポーネントは、CQ.form.rte.plugins.Plugin の下にリストされるプラグインを使用した幅広い機能を提供します。各プラグインについては、以下を参照してください。

  • 有効化（または無効化）が可能な機能の詳細については「機能」を参照してください。
  • 該当するプラグインの詳細設定に使用可能なすべてのパラメーターについては、「設定オプション」を参照してください。

• リンクの HTML ルールに関する詳細も参照できます。

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

既知の制限事項

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

• RTE 機能は AEM コンポーネントダイアログでのみサポートされます。RTE は、ウィザードやタッチ操作向け UI の基盤フォーム（ページプロパティや基礎モードなど）ではサポートされません。

• AEM はハイブリッドデバイスでは機能しません。

• RTE 設定ノードの名前を config にしないでください。この名前にすると、RTE 設定が管理者に対してのみ有効になり、グループ content-author のユーザーに対して有効になりません。

• RTE は、コンテンツを埋め込むインラインフレームまたは iframe をサポートしていません。

ベストプラクティスとヒント

• フローティングダイアログでは、ポップアップなしのプラグインのみを有効にします。ポップアップなしのプラグインはサイズが小さく、フローティングダイアログに最適です。
• Paste プラグインなど、大きめのポップアップがあるプラグインは、フルスクリーンダイアログモードまたはフルスクリーンモードでのみ有効にします。大きなポップアップがあるプラグインは、優れたオーサリング環境を提供するために、より多くのスクリーンスペースを必要とします。
• CoralUI RTE のカスタムプラグインを使用する場合は、rte.coralui33 ライブラリを使用してください。

RTE に関するよくある問題のトラブルシューティング

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

テーブル内の複数のセルを選択するには、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プロパティを使用します。

Business.Adobe.com リソース

Ecommerce Integrations Targeted Content Asset Collections Web Content Management Digital Rights Management Content Management System