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

リッチテキストエディター (RTE) は、作成者に対して、テキストコンテンツの編集に関する様々な機能を提供します。 アイコン、選択ボックス、ツールバーおよびメニューを使用して、テキストを WYSIWYG で編集できます。

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

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

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

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

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

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

各種編集モード editingmodes

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

インライン編集 inline-editing

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

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

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

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

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

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

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

ダイアログ編集 dialog-editing

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

図：タッチ操作対応 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では、リッチテキストエディターの UI を編集モードごとに異なる設定にできます。 デフォルト設定を以下に示します。これらのデフォルト値は、要件に応じて上書きできます。

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

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

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

AEM 6.4 Service Pack 3 以降では、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 機能には次の制限があります。