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

リッチテキストエディター(RTE)には、テキストコンテンツの編集に使用できる幅広い機能が用意されています。アイコン、選択ボックス、ツールバーおよびメニューを使用して、テキストを WYSIWYG で編集できます。管理者は RTE の設定をおこなって、オーサリングコンポーネント内で使用可能な機能を有効化、無効化および拡張できます。作成者が Web コンテンツのオーサリングに RTE を使用する方法を参照してください。

RTE の概念と設定に必要な手順を以下に示します。

RTE の概念について 必要な機能を有効にする 個々の機能の設定
インターフェイスの理解 設定の場所の理解および設定 プラグインの設定
編集モードの種類 プラグインのアクティベーション 機能プロパティの設定
プラグインについて RTE ツールバーの設定 貼り付けモードの設定

作成者が使用できるユーザーインターフェイスを理解します。

RTE インターフェイスは、オーサリング環境にレスポンシブデザインを提供します。このインターフェイスは、タッチデバイスとデスクトップデバイスで使用できるように設計されています。

リッチテキストエディターのツールバー

図:使用可能なすべてのオプションが有効なリッチテキストエディターのツールバー

ツールバーには、WYSIWYG オーサリング環境で使用できるオプションが用意されています。Experience Manager の管理者は、インターフェイスのツールバーで使用できるオプションを設定できます。Experience Manager では、包括的な編集オプションセットをデフォルトで使用できます。開発者は Experience Manager をカスタマイズして、さらに編集オプションを追加できます。

各種編集モード

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

編集モード 編集領域 有効化が推奨される機能
インライン 小さな編集をすばやくおこなうのに適したインプレース編集。ダイアログボックスを開かないフォーマット。 最小限の RTE 機能。
RTE フルスクリーン ページ全体に広がる。 必要なすべての RTE 機能。
ダイアログ ページコンテンツの上面にダイアログボックスが表示されるが、ページ全体に広がらない。 慎重に有効化された機能。
ダイアログフルスクリーン フルスクリーンモードと同じ。RTE の横にダイアログのフィールドを含む。 必要なすべての RTE 機能。
メモ

インライン編集モードでは、ソース編集機能を使用できません。フルスクリーンモードでは画像をドラッグできません。その他の機能はすべて全モードで使用できます。

インライン編集

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

ツールバーの基本オプションを使用したインライン編集

図:ツールバーの基本オプションを使用したインライン編集。

フルスクリーン編集

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

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

フルスクリーンモードで編集する場合の詳細な RTE ツールバー

図:フルスクリーンモードで編集する場合の詳細な RTE ツールバー。

ダイアログ編集

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

ダイアログ編集モード

図:ダイアログ編集モード。

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

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

  • features プロパティ

    • プラグインの基本機能をアクティベートまたはアクティベート解除するために使用します。
    • 標準化された手順を使用して設定します。
  • 必要に応じて、さらなるプロパティやオプションに特別な設定が必要です。

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

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

  • API ドキュメントへのリンクを含むプラグイン ID。ID は、プラグインをアクティベートするときにノード名として使用されます。
  • features プロパティの許可されている値。
  • プラグインが提供する機能の説明。
プラグイン ID 機能 説明
edit cutcopypaste-defaultpaste-plaintextpaste-wordhtml 切り取り、コピーおよび 3 つの貼り付けモード
findreplace findreplace 検索と置換。
format bolditalicunderline 基本的なテキストフォーマット
image image 基本的な画像サポート(コンテンツまたはコンテンツファインダーからのドラッグ)。ブラウザーの種類に応じて、様々なサポート機能が提供されます
keys - この値を定義するには、タブサイズを参照してください。
justify justifyleftjustifycenterjustifyright 段落の整列。
links modifylinkunlinkanchor ハイパーリンクおよびアンカー
lists orderedunorderedindentoutdent このプラグインは、インデントとリスト(ネストされたリストを含む)の両方を制御します。
misctools specialcharssourceedit 各種ツールを使用して、特殊文字の入力や HTML ソースの編集をおこなえます。また、独自のリストを定義する場合は、特殊文字の範囲を追加できます。
Paraformat paraformat <h2>デフォルトの段落形式は、段落、見出し 1、見出し 2 および見出し 3(<p><h1><h3>)です。他の段落フォーマットを追加したり、リストを拡張したりできます。
spellcheck checktext 言語ごとのスペルチェッカー
styles styles CSS クラスを使用したスタイル設定のサポート。テキストで使用するスタイルの範囲を独自に追加(または拡張)する場合は、新しいテキストスタイルを追加します。
subsuperscript subscriptsuperscript 下付き文字や上付き文字を追加して基本的なフォーマットを拡張。
table tableremovetableinsertrowremoverowinsertcolumnremovecolumncellpropsmergecellssplitcellselectrowselectcolumns テーブル全体または個々のセルに独自のスタイルを追加する場合は、テーブルスタイルの設定を参照してください。
undo undoredo 取り消しおよびやり直し操作の履歴サイズ。
メモ

フルスクリーンプラグインは、ダイアログモードではサポートされません。dialogFullScreen 設定を使用して、フルスクリーンモード用のツールバーを設定します。

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

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

  • インラインモード:cq:editConfig/cq:inplaceEditing
  • フルスクリーンモード:cq:editConfig/cq:inplaceEditing
  • ダイアログモード:cq:dialog
  • フルスクリーンダイアログモード:cq:dialog
メモ

cq:inplaceEditing の下のノードの名前を config にしないでください。cq:inplaceEditing ノードで、以下のプロパティを定義します。

  • 名前configPath
  • String
  • :実際の設定を含むノードのパス

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

ダイアログ編集モードで適用する次のプロパティを設定します。

  • useFixedInlineToolbar:RTE ツールバーは、フローティングではなく固定することができます。RTE ノードで定義されているこのブール型プロパティ sling:resourceType= cq/gui/components/authoring/dialog/richtextTrue に設定します。このプロパティを True に設定すると、リッチテキストの編集が foundation-contentloaded イベントで開始されます。これを防ぐには、customStart プロパティを True に設定し、rte-start イベントを呼び出して RTE の編集を開始するようにします。このプロパティが true の場合、RTE はクリックで開始しなくなり、これがデフォルトの動作になります。

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

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

タッチ操作対応ダイアログで RTE を使用する場合は、問題を回避するために useFixedInlineToolbar プロパティを true に設定します。

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

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

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

コアコンポーネントのテキストコンポーネントを使用すると、テンプレートエディターのユーザーインターフェイスを使用して多数の RTE プラグインをコンテンツポリシーとして設定でき、技術的な設定が不要になります。コンテンツポリシーは、このドキュメントで説明するように RTE UI 設定と連携させることができます。詳しくは、ページテンプレートの作成およびコアコンポーネント開発者向けドキュメントを参照してください。

参照用として、デフォルトのテキストコンポーネント(標準インストールの一環として提供)が次の場所に用意されています。

  • /libs/wcm/foundation/components/text
  • /libs/foundation/components/text

独自のテキストコンポーネントを作成するには、上記のコンポーネントを直接編集するのではなく、コピーしてください。

RTE ツールバーの設定

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

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>

インラインモードとフルスクリーンモードでは別のユーザーインターフェイス設定が使用されます。ツールバープロパティは、ツールバーのオプションを指定します。

例えば、オプション自体が 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>

既知の制限事項

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

  • RTE 機能は Experience Manager コンポーネントダイアログでのみサポートされます。RTE は、ウィザードまたは Foundation-forms ではサポートされていません。

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

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

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

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

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

このページ

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now