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

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

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

図：リッチテキストエディターを設定するための一般的なワークフロー

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

タッチ操作 UI は AEM の標準 UI です。Adobeは、バージョン5.6で、オーサリング環境用にレスポンシブデザインを備えたタッチUIを導入しました。タッチUIは、タッチデバイスとデスクトップデバイス向けに設計されています。 元のクラシック UI とは大きく異なります。

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

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

各種編集モード

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

インライン編集

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

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

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

全画面表示での編集

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

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

図：タッチ操作対応UIでフルスクリーンモードで編集する場合の詳細なRTEツールバー

ダイアログ編集

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

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

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

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

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

• featuresプロパティ：

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

• 特別な設定を必要とする詳細なプロパティやオプションが存在する場合があります。

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

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

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

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

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

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

ダイアログ編集モードで適用される次のプロパティを設定します（タッチ 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 では、リッチテキストエディターの UI を編集モードごとに異なる設定にできます。デフォルト設定を以下に示します。これらの設定を必要に応じて上書きできます。

最適なオーサリング環境を実現するには：

• フローティングダイアログでは、そのサイズが小さいことを考慮して、ポップアップがないプラグインのみを有効にします。
• フルスクリーンダイアログでは、必要なプラグインをすべて有効にします。これは、Paste プラグインなど、ポップが大きなプラグインについても当てはまります。以下に示す 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]"
          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,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 を使用するテキストコンポーネントが編集可能テンプレートで使用される場合は、コンテンツポリシーの定義によって、太字オプションやいくつかの段落フォーマットオプションを使用可能にできます。コンテンツポリシーは再利用が可能であり、複数のテンプレートに対して適用できます。

AEM 6.4 Service Pack 3 以降では、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. /appsの下のノード/libs/cq/gui/components/authoring/editors/clientlibs/coreをオーバーレイし、次の操作を行います。

   • 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. /appsの下のノード/libs/cq/gui/components/authoring/dialog/richtext/clientlibs/rte/coralui3と/libs/cq/gui/components/authoring/dialog/richtext/clientlibs/rte/coralui2をオーバーレイします。

   /apps/cq/gui/components/authoring/dialog/richtext/clientlibs/rte/coralui3からカテゴリcq.authoring.dialogを削除し、/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 をサポートしていません。