リッチテキストエディター(RTE)には、テキストコンテンツの編集に使用できる幅広い機能が用意されています。アイコン、選択ボックス、ツールバーおよびメニューを使用して、テキストを WYSIWYG で編集できます。
RTE 機能をオーサリングに使用する方法については、リッチテキストエディターをオーサリングに使用を参照してください。RTE の設定をおこなうことで、オーサリングコンポーネント内で使用可能な機能を有効化、無効化および拡張できます。以下のワークフローは、RTE 設定タスクをExperience Managerする際に推奨される順序を示しています。
図:リッチテキストエディターを設定するための一般的なワークフロー
タッチ操作 UI は AEM の標準 UI です。Adobeでタッチ UI が導入され、 レスポンシブデザイン オーサリング環境の場合、バージョン 5.6。タッチ UI は、タッチデバイスとデスクトップデバイス向けに設計されています。 元のクラシック UI とは大きく異なります。
図:タッチ操作対応 UI のリッチテキストエディターツールバー
図:クラシック UI のリッチテキストエディターツールバー
AEM では、コンポーネントの各種モードを使用して、テキストコンテンツを作成および編集できます。コンテンツを作成およびフォーマットするためのツールバーオプションと、各種編集モードにおける RTE 対応コンポーネントのユーザーエクスペリエンスは、RTE 設定によって異なります。
編集モード | 編集領域 | 有効化が推奨される機能 | タッチ UI | クラシック UI |
---|---|---|---|---|
インライン | 小さな編集をすばやくおこなうのに適したインプレース編集。ダイアログボックスを開かないフォーマット | 最小限の RTE 機能 | ○ | ○ |
RTE フルスクリーン | ページ全体に広がる | 必要なすべての RTE 機能 | ○ | × |
ダイアログ | ページコンテンツの上面にダイアログボックスが表示されるが、ページ全体に広がらない | クラシック UI の場合、必要なすべての RTE 機能。タッチ UI の場合、必要に応じて機能を有効化/無効化 | ○ | ○ |
ダイアログ(フルスクリーン) | フルスクリーンモードと同じ。RTE の横にダイアログのフィールドを含む | 必要なすべての RTE 機能 | ○ | × |
タッチ操作対応 UI のインライン編集モードでは、ソース編集機能を使用できません。 フルスクリーンモードでは画像をドラッグできません。その他の機能はすべて全モードで使用できます。
(ゆっくりしたダブルタップ/ダブルクリックで)開いた場合、コンテンツはページ内で編集できます。基本オプションを備えた、コンパクトなツールバーが表示されます。
図:タッチ操作対応 UI の基本ツールバーを使用したインライン編集
クラシック UI では、コンポーネントをゆっくりダブルクリックするとインライン編集が可能になり、オレンジ色の輪郭でコンテンツが強調表示されます。コンテンツファインダーが開くと、使用可能な RTE フォーマットオプションを備えたツールバーがウィンドウ上部に表示されます。コンテンツファインダーが開かない場合は、フォーマットオプションは表示されず、基本的なテキスト編集のみおこなうことができます。
AEM コンポーネントをフルスクリーン表示で開くことができます。この表示にした場合は、ページコンテンツが隠され、使用可能なスクリーンが占有されます。フルスクリーン編集には最も多くの編集オプションがあるので、インライン編集の詳細版と考えてください。フルスクリーン編集を開くには、インライン編集モードの使用中にコンパクトツールバーから をクリックします。
ダイアログのフルスクリーンモードには、詳細な RTE ツールバー、該当するオプション、ダイアログモードで使用可能なコンポーネントが表示されます。このモードは、他のコンポーネントと共に RTE を含むダイアログにのみ適用されます。
図:タッチ操作対応 UI でフルスクリーンモードで編集する場合の詳細な RTE ツールバー
クラシック UI でコンポーネントをダブルクリックすると、コンテンツ編集用のダイアログボックスが既存のページの上面に開きます。一部のシナリオでは、ポップアップウィンドウとして開くこともあります。例えば、複数列から成るページレイアウト内の列の一部がテキストコンポーネントで、ダイアログ用の領域が少ない場合などです。
図:タッチ操作対応 UI のダイアログ編集モード
図:編集用の詳細ツールバーを含むクラシック UI のダイアログボックス
この機能は、一連のプラグインを介して使用可能になります。各プラグインには以下が含まれます。
A features
プロパティ:
特別な設定を必要とする詳細なプロパティやオプションが存在する場合があります。
RTE の基本機能は、該当するプラグインのノードにある features
プロパティの値によって、アクティベートまたはアクティベート解除されます。
以下の表に最新のプラグインを示します。
features
プロパティの許可されている値。プラグイン ID | 機能 | 説明 |
---|---|---|
edit | cut copy paste-default paste-plaintext paste-wordhtml | 切り取り、コピーおよび 3 つの貼り付けモード。 |
findreplace | find replace | 検索と置換。 |
format | bold italic underline | 基本的なテキストフォーマット。 |
image | 画像 | 基本的な画像サポート(コンテンツまたはコンテンツファインダーからのドラッグ)。ブラウザーの種類に応じて、様々なサポート機能が提供されます |
keys | この値を定義するには、タブサイズを参照してください。 | |
justify | justifyleft justifycenter justifyright | 段落の整列。 |
links | modifylink unlink anchor | ハイパーリンクおよびアンカー。 |
lists | ordered unordered indent outdent | このプラグインは、インデントとリスト(ネストされたリストを含む)の両方を制御します。 |
misctools | specialchars sourceedit | 各種ツールを使用して、特殊文字の入力や HTML ソースの編集をおこなうことができます。また、独自のリストを定義する場合は、特殊文字の範囲全体を追加できます。 |
Paraformat | paraformat | <h2> デフォルトの段落形式は、段落、見出し 1、見出し 2 および見出し 3(<p> 、<h1> 、<h3> )です。他の段落フォーマットを追加したり、リストを拡張したりできます。 |
spellcheck | checktext | 言語ごとのスペルチェッカー。 |
styles | スタイル | CSS クラスを使用したスタイル設定のサポート。テキストで使用するスタイルの範囲を独自に追加(または拡張)する場合は、新しいテキストスタイルを追加します。 |
subsuperscript | subscript superscript | 下付き文字や上付き文字を追加して基本的なフォーマットを拡張。 |
table | table removetable insertrow removerow insertcolumn removecolumn cellprops mergecells splitcell selectrow selectcolumns | テーブル全体または個々のセルに独自のスタイルを追加する場合は、テーブルスタイルの設定を参照してください。 |
undo | undo redo | 取り消しおよびやり直し操作の履歴サイズ。 |
フルスクリーンプラグインは、ダイアログモードではサポートされません。の使用 dialogFullScreen
を設定して、フルスクリーンモード用のツールバーを設定します。
作成者に提供する RTE 編集のモード(および UI)によって、RTE プラグインをアクティベートするときの設定詳細の場所が決まります。
編集モード | タッチ UI の場所 | クラシック UI の場所 |
---|---|---|
インライン | cq:editConfig/cq:inplaceEditing |
cq:editConfig/cq:inplaceEditing |
フルスクリーン | cq:editConfig/cq:inplaceEditing |
適用なし |
ダイアログ | cq:dialog |
dialog |
フルスクリーンダイアログ | cq:dialog |
適用なし |
cq:inplaceEditing
の下のノードの名前を config
にしないでください。cq:inplaceEditing
ノードで、以下のプロパティを定義します。
configPath
String
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)の各機能は一連のプラグインから使用でき、それぞれに features プロパティがあります。features プロパティを設定することで、各プラグインの各種機能を有効化または無効化できます。
RTE プラグインの設定について詳しくは、RTE プラグインのアクティベートおよび設定方法に関する説明を参照してください。
RTE の設定方法について理解するには、このサンプル設定をダウンロードしてください。このパッケージではすべての機能が有効になっています。
コアコンポーネントのテキストコンポーネントを使用すると、テンプレートエディターのユーザーインターフェイスで多数の RTE プラグインをコンテンツポリシーとして設定し、技術的な設定を不要にすることができます。コンテンツポリシーは、RTE ユーザーインターフェイス設定と連携させることができます。詳しくは、 RTE ユーザーインターフェイス設定とコンテンツポリシー, ページテンプレートの作成、および コアコンポーネント開発者向けドキュメント.
参照用として、デフォルトのテキストコンポーネント(標準インストールの一環として提供)が次の場所に用意されています。
/libs/wcm/foundation/components/text
/libs/foundation/components/text
独自のテキストコンポーネントを作成するには、上記のコンポーネントを直接編集するのではなく、コピーしてください。
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 を使用するテキストコンポーネントが編集可能テンプレートで使用される場合は、コンテンツポリシーの定義によって、太字オプションやいくつかの段落フォーマットオプションを使用可能にできます。コンテンツポリシーは再利用が可能であり、複数のテンプレートに対して適用できます。
AEM 6.4 Service Pack 3 以降では、RTE フローで使用可能なオプションに関するユーザーインターフェイス設定がコンテンツポリシーに影響します。
例については、テキストコアコンポーネントのドキュメントを参照してください。
RTE ツールバーに表示される Coral アイコンと使用可能なコマンドとのマッピングをカスタマイズできます。Coral アイコンに加えて他のアイコンを使用することはできません。
icons
の下に、uiSettings/cui
という名前のノードを作成します。
そのノードの下に、各アイコンのノードを作成します。
個々のアイコンノードで、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 RTE clientlib または CoralUI 3 RTE clientlib を含めることができます。 デフォルトでは、リッチテキストエディターには CoralUI 3 RTE clientlib が含まれています。CoralUI 2 RTE に切り替えるには、次の手順を実行します。
こうした切り替えは、ベストプラクティスとしてお勧めするものではありません。CoralUI 2 RTE への切り替えは最後の手段です。CoralUI 2 RTE 用カスタムプラグインは、CoralUI 3 RTE で動作します ( プラグインが RTE の内部(クラスなど)に依存しない場合 )。 CoralUI3 RTE 用カスタムプラグインを使用する場合は、rte.coralui3
ライブラリを使用してください。
ノードをオーバーレイ /libs/cq/gui/components/authoring/editors/clientlibs/core
under /apps
、および次の操作を実行します。
rte.coralui3
と rte.coralui2
に設定します。cq.authoring.editor.core.inlineediting.rte.coralui3
と cq.authoring.editor.core.inlineediting.rte.coralui2
embed プロパティ用。cq.authoring.rte.coralui3
と cq.authoring.rte.coralui2
embed プロパティ用。ノードをオーバーレイ /libs/cq/gui/components/authoring/dialog/richtext/clientlibs/rte/coralui3
および /libs/cq/gui/components/authoring/dialog/richtext/clientlibs/rte/coralui2
under /apps
.
カテゴリを削除 cq.authoring.dialog
から /apps/cq/gui/components/authoring/dialog/richtext/clientlibs/rte/coralui3
をクリックし、 /apps/cq/gui/components/authoring/dialog/richtext/clientlibs/rte/coralui2
.
ページに含まれている他の依存関係を rte.coralui3
から rte.coralui2
に変更します。例えば、ノードをオーバーレイした後に、 /libs/mcm/campaign/components/touch-ui/clientlibs/rte
under /apps
を使用する場合、 rte.coralui3
から rte.coralui2
.
ノードをオーバーレイ 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 コンポーネントは、スタイル設定されたテキスト情報(リッチテキスト)を編集するためのフォームフィールドを提供します。リッチテキストフォームに使用可能なすべてのパラメーターについては、「設定オプション」を参照してください。
リッチテキストコンポーネントは、 CQ.form.rte.plugins.Plugin.プラグインごとに以下をおこないます。
リンクの HTML ルールに関する詳細も参照できます。
上記のオプションは、独自の RTE を拡張およびカスタマイズするために使用できます。例えば、リンク作成時にページで使用できるアンカーをリストするために、LinkPlugin
を独自に実装できます。
AEM RTE 機能には次の制限があります。
RTE 機能は AEM コンポーネントダイアログでのみサポートされます。RTE は、ウィザードやタッチ操作向け UI の基盤フォーム(ページプロパティや基礎モードなど)ではサポートされません。
AEM はハイブリッドデバイスでは機能しません。
RTE 設定ノードの名前を config
にしないでください。この名前にすると、RTE 設定が管理者に対してのみ有効になり、グループ content-author
のユーザーに対して有効になりません。
RTE は、コンテンツを埋め込むインラインフレームまたは iframe をサポートしていません。