Show Menu
トピック×

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

リッチテキストエディター(RTE)には、テキストコンテンツの編集に使用できる幅広い機能が用意されています。アイコン、選択ボックス、ツールバーおよびメニューを使用して、テキストを WYSIWYG で編集できます。
RTE 機能をオーサリングに使用する方法については、 リッチテキストエディターをオーサリングに使用 を参照してください。RTE の設定をおこなうことで、オーサリングコンポーネント内で使用可能な機能を有効化、無効化および拡張できます。次のワークフローは、Experience ManagerでRTE設定ワークフローを完了する際に推奨されるタスクの順序を示しています。
図:RTEの設定方法を学ぶ手順のシーケンス

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

タッチ対応UIは、Experience Managerの標準的なユーザーインターフェイスです。 アドビでは、オーサリング用のレスポンシブデザ インを備えたタッチ対応 UIを環境しました。 タッチ対応UIは、タッチデバイスおよびデスクトップデバイス向けに設計されています。 インターフェイスは、元のクラシックUIとは大きく異なります。
図:タッチ対応UIのリッチテキストエディターツールバー
図:クラシックUIのリッチテキストエディタのツールバー

各種編集モード

作成者は、様々なコンポーネントモードを使用して、Experience Managerでテキストコンテンツを作成および編集できます。 コンテンツを作成およびフォーマットするためのツールバーオプションと、各種編集モードにおける RTE 対応コンポーネントのユーザーエクスペリエンスは、RTE 設定によって異なります。
編集モード
編集領域
有効化が推奨される機能
タッチ UI
クラシック UI
インライン
小さな編集をすばやくおこなうのに適したインプレース編集。ダイアログボックスを開かないフォーマット
最小限の RTE 機能
RTE フルスクリーン
ページ全体に広がる
必要なすべての RTE 機能
×
ダイアログ
ページコンテンツの上面にダイアログボックスが表示されるが、ページ全体に広がらない
クラシック UI の場合、必要なすべての RTE 機能。タッチ UI の場合、必要に応じて機能を有効化/無効化
ダイアログ(フルスクリーン)
フルスクリーンモードと同じ。RTE の横にダイアログのフィールドを含む
必要なすべての RTE 機能
×
タッチ対応UIのインライン編集モードでは、ソース編集機能を使用できません。 フルスクリーンモードでは画像をドラッグできません。その他の機能はすべて全モードで使用できます。

インライン編集

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

フルスクリーン編集

Experience Managerコンポーネントは、ページのコンテンツを非表示にし、利用可能な表示を占めるフルスクリーンモードで開くことができます。 フルスクリーン編集には最も多くの編集オプションがあるので、インライン編集の詳細版と考えてください。It can be opened by clicking , from the compact toolbar when using the inline editing mode.
ダイアログフルスクリーンモードでは、詳細な RTE ツールバーのほかに、ダイアログ内で使用可能なオプションとコンポーネントも提供されます。このモードは、他のコンポーネントと共に RTE を含むダイアログにのみ適用されます。
図:タッチ対応UIでフルスクリーンモードで編集する場合の詳細なRTEツールバー

ダイアログ編集

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

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

この機能は、一連のプラグインを介して使用可能になります。各プラグインには以下が含まれます。
  • プロパ features ティ:
    • プラグインの基本機能をアクティベートまたはアクティベート解除するために使用
    • 標準化された手順を使用して設定可能
  • 必要に応じて、追加のプロパティやオプションに特別な設定が必要.
RTE の基本機能は、該当するプラグインのノードにある features プロパティの値によって、アクティベートまたはアクティベート解除されます。
以下の表に最新のプラグインを示します。
  • API ドキュメントへのリンクを含むプラグイン ID。ID は、 プラグインをアクティベート するときにノード名として使用されます。
  • features プロパティの許可されている値。
  • プラグインが提供する機能の説明。
プラグイン ID
features
説明
edit
cut copy paste-default paste-plaintext paste-wordhtml
find replace
検索と置換.
bold italic underline
画像
基本的な画像のサポート(コンテンツまたはコンテンツファインダーからのドラッグ)。 ブラウザーに応じて、サポートの動作が異なります
この値を定義するには、 タブサイズ を参照してください。
justifyleft justifycenter justifyright
段落の整列。
modifylink unlink anchor
ordered unordered indent outdent
This plug-in controls both indentation and lists ; including nested lists.
specialchars sourceedit
Miscellaneous tools allow authors to enter special characters or edit the HTML source. Also, you can add a whole range of special characters if you want to define your own list.
Paraformat
paraformat
The default paragraph formats are Paragraph, Heading 1, Heading 2, and Heading 3 ( <p> , <h1> , <h2> , and <h3> ). 他の段落フォーマットを追加 したり、リストを拡張したりできます。
spellcheck
checktext
styles
styles
CSS クラスを使用したスタイル設定のサポート。 新し追加い文字スタイルを作成します。
subsuperscript
subscript superscript
基本形式の拡張で、サブスクリプトとスーパースクリプトを追加します。
table
table removetable insertrow removerow insertcolumn removecolumn cellprops mergecells splitcell selectrow selectcolumns
See configure table styles , if you want to add your own styles for either entire tables or individual cells.
undo
undo redo
History size of undo and redo operations.
フルスクリーンプラグインは、ダイアログモードではサポートされません。Use of the dialogFullScreen setting to configure the toolbar for full screen mode.

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

作成者に提供する RTE 編集のモード(および UI) によって、 RTE プラグインをアクティベート するときの設定詳細の場所が決まります。
編集モード
タッチ UI の場所
クラシック UI の場所
インライン
cq:editConfig/cq:inplaceEditing
cq:editConfig/cq:inplaceEditing
フルスクリーン
cq:editConfig/cq:inplaceEditing
適用なし
ダイアログ
cq:dialog
dialog
フルスクリーンダイアログ
cq:dialog
適用なし
Do not name the node under cq:inplaceEditing as config . On cq:inplaceEditing node, define the following properties:
  • 名前 : configPath
  • Type : String
  • :実際の設定を含むノードのパス
RTE 設定ノードの名前を config にしないでください。Otherwise, the RTE configurations take effect for only the administrators and not for the users in the group content-author .
ダイアログ編集モードで適用される次のプロパティを設定します(タッチ UI のみ)。
  • useFixedInlineToolbar :RTEノード(sling:resourceType=のあるもの)で定義されているこのBooleanプロパティをに設定し cq/gui/components/authoring/dialog/richtext 、RTEツー 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の設定方 法を説明する 、次のサンプル設定をダウンロードしてください。 このパッケージではすべての機能が有効になっています。
テンプレートエディターで コアコンポーネントのテキストコンポーネント を利用すると、技術的な設定をおこなうことなく、GUI で多くの RTE プラグインをコンテンツポリシーとして設定できます。コンテンツポリシーは、このドキュメントで説明するように RTE UI 設定と連携させることができます。
詳しくは、このドキュメントの RTE UI 設定とコンテンツポリシー のセクション、 ページテンプレートの作成 および コアコンポーネント開発者のドキュメント を参照してください。
参照用として、デフォルトのテキストコンポーネント(標準インストールの一環として提供)が次の場所に用意されています。
  • /libs/wcm/foundation/components/text
  • /libs/foundation/components/text
独自のテキストコンポーネントを作成するには、上記のコンポーネントを直接編集するのではなく、コピーしてください。

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 設定が使用されます。ツールバープロパティは、ツールバーのボタンの指定に使用します。
For example, if the button is itself a feature (for example, Bold ), it is specified as PluginName#FeatureName (for example, links#modifylink ).
If the button is a popover (containing some features of a plug-in), it is specified as #PluginName (for example, #format ).
Separators ( | ) between a group of buttons can be specified with - .
インラインまたはフルスクリーンモードのポップアップノードには、使用するポップオーバーのリストが含まれます。「popovers」ノードの下の各子ノードは、プラグインの名前を取って名付けられます(例:format)。プラグインの機能のリストが含まれるプロパティ「items」があります(例:format#bold)。

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

管理者は、上述のような設定をおこなわなくても、コンテンツポリシーを使用して RTE オプションを制御することができます。コンテンツポリシーでは、 編集可能テンプレート の一部として使用されるコンポーネントのデザインプロパティが定義されます。例えば、RTE を使用するテキストコンポーネントが編集可能テンプレートで使用される場合は、コンテンツポリシーの定義によって、太字オプションやいくつかの段落フォーマットオプションを使用可能にできます。コンテンツポリシーは再利用が可能であり、複数のテンプレートに対して適用できます。
RTE フローで使用可能なオプションに関するユーザーインターフェイス設定がコンテンツポリシーに影響します。
  • ユーザーインターフェイス設定では、コンテンツポリシーで使用可能なオプションを定義します。
  • RTEのユーザーインターフェイス設定が削除された場合、または項目が有効になっていない場合、コンテンツポリシーは項目を設定できません。
  • オーサーは、ユーザーインターフェイス設定およびコンテンツポリシーによって使用可能となっている機能にのみアクセスできます。
例については、 テキストコアコンポーネントのドキュメント を参照してください。

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

RTE ツールバーに表示される Coral アイコンと使用可能なコマンドとのマッピングをカスタマイズできます。Coralアイコン以外のアイコンは使用できません。
  1. Create a node named icons under uiSettings/cui .
  2. そのノードの下に、各アイコンのノードを作成します。
  3. 個々のアイコンノードで、Coralアイコンと、アイコンにマッピングするコマンドを指定します。
Below is a sample snippet to map the command Bold to the Coral icon named textItalic .
<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 に切り替えるには、次の手順を実行します。
この方法は、ベストプラクティスとしてお勧めするものではありません。CoralUI 2 RTE への切り替えは最後の手段です。CoralUI 2 RTE用のカスタムプラグインは、プラグインがクラスなどのRTE内部に依存しない場合、CoralUI 3 RTEで機能します。
CoralUI RTE のカスタムプラグインを使用する場合は、 rte.coralui3 3 ライブラリを使用してください。
  1. ノードを下にオー /libs/cq/gui/components/authoring/editors/clientlibs/core バーレ /apps イし、次の操作を行います。
    • Replace rte.coralui3 with rte.coralui2 for the dependencies property.
    • Replace cq.authoring.editor.core.inlineediting.rte.coralui3 with cq.authoring.editor.core.inlineediting.rte.coralui2 for the embed property.
    • Replace cq.authoring.rte.coralui3 with cq.authoring.rte.coralui2 for the embed property.
  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 に変更します。For example, after overlaying the node /libs/mcm/campaign/components/touch-ui/clientlibs/rte under /apps , change any dependency on it from rte.coralui3 to rte.coralui2 .
  4. Overlay the node cq/ui/widgets under /apps . ノードの依存関 cq.rte 係をに置き換 /apps/cq/ui/widgets えます cq.coralui2.rte
CoralUI 2 RTE は、プラグインダイアログのハンドルバーテンプレートを使用します。そのため、CoralUI 2 RTE clientlib は、ハンドルバー clientlib に対して依存関係があります。CoralUI 3 RTE は、ハンドルバーテンプレートを使用しないので、関連する依存関係はありません。カスタムプラグインがハンドルバーテンプレートを使用する場合、Web ページにハンドルバー clientlib を含めます。

その他の情報

RTE の設定について詳しくは、 AEM ウィジェット API リファレンスを参照してください。
特に、使用可能なプラグインおよび関連オプションを確認するには、以下を参照してください。
  • CQ.form.RichText コンポーネントは、スタイル設定されたテキスト情報(リッチテキスト)を編集するためのフォームフィールドを提供します。リッチテキストフォームに使用可能なすべてのパラメーターについては、「設定オプション」を参照してください。
  • The RichText component provides a wide range of functionality using plug-ins listed under CQ.form.rte.plugins.Plugin . For each plug-in:
    • 有効化(または無効化)が可能な機能の詳細については「機能」を参照してください。
    • 該当するプラグインの詳細設定に使用可能なすべてのパラメーターについては、「設定オプション」を参照してください。
  • リンクの HTML ルールに関する詳細も参照できます。
これらは、独自のRTEを拡張およびカスタマイズするために使用できます。 例えば、リンク作成時にページで使用できるアンカーをリストするために、 LinkPlugin を独自に実装できます。

既知の制限事項

AEM RTE 機能には次の制限があります。
  • RTE 機能は AEM コンポーネントダイアログでのみサポートされます。RTE は、ウィザードやタッチ操作向け UI の基盤フォーム( ページプロパティ 基礎モード など)ではサポートされません。
  • AEM は ハイブリッドデバイス では機能しません。
  • Do not name the RTE configuration node config . Otherwise, the RTE configuration takes effect for only the administrators and not for the users in the group content-author .
  • RTE は、コンテンツを埋め込むインラインフレームまたは iframe をサポートしていません。

Best practices and tips

  • フローティングダイアログのポップアップを表示しないプラグインのみを有効にします。 ポップアップのないプラグインはサイズが小さく、フローティングダイアログに最適です。
  • Enable the plug-ins with larger pop-up, such as the Paste plug-in, only in the full-screen dialog mode or in full-screen mode. 大きなポップアップがあるプラグインは、優れたオーサリング環境を提供するために、より多くのスクリーンスペースを必要とします。
  • CoralUI RTE のカスタムプラグインを使用する場合は、 rte.coralui3 3 ライブラリを使用してください。

RTEに関する頻繁な問題のトラブルシューティング

複数のテーブルセルを選択する方法を教えてください。
To select multiple cells in a table, press Ctrl or Cmd key and then click the table cells one-by-one.
選択したセルのプロパティを設定するなどして操作を実行します。
「設定」ボタンを使用してコンポーネントを編集すると、ハイパーリンクが失われてしまう
「設定」ボタンを使用してテキストコンポーネントを編集することによって、ハイパーリンクを追加します。もう一度編集して、再びハイパーリンクを検証すると、ハイパーリンクが失われることがあります。
回避策は、編集ダイアログが 2 度目に表示されたときに、テキストコンポーネントをクリックしてから、リンク検証を実行します。
この問題は AEM 6.3 以降で解決されています。
ソース編集モードで追加された HTML コンテンツが失われてしまう
XSS が発生しやすい HTML を追加しないでください。RTE ではなく AEM は、XSS AntiSamy ルールに準拠するために HTML コンテンツを削除することがあります。
貼り付けた HTML が保存されていることを確認するには、(コンテンツノードの)CRXDE で保存されたコンテンツを確認します。
保存されていない場合、HTML は RTE の規則に準拠していなかったため、RTEによって削除されたということです。
If saved in CRXDE but not rendered on the Page (to check rendering, see page's preview , it is removed by AEM XSS rules.
マルチフィールドコンポーネントが期待どおりに機能しない
マルチフィールドコンポーネントを作成するには、CoralUI 3 のみを使用してください。CoralUI 2 コンポーネントダイアログを使用しないでください。
また、マルチフィールド実装コードとノード構造が正しいことを確認してください。
管理者が利用できる設定を、作成者が利用できない
インターフェイス設定の更新が管理者には反映されているが作成者アカウントには反映されていない場合、設定ノードに config という名前が付けられていないか確認してください。Use the configPath .