現在表示中:

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

RTE の設定をおこなうことで、オーサリングコンポーネント内で使用可能な機能を有効化、無効化および拡張できます。RTE 機能をオーサリングに使用する方法については、リッチテキストエディターをオーサリングに使用を参照してください。

以下に、RTE 設定タスクの推奨されるワークフローを示します。

リッチテキストエディターを設定する標準的なワークフロー
リッチテキストエディターを設定する標準的なワークフロー

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

タッチ操作 UI は AEM の標準 UI です。AEM 5.6 からは、レスポンシブデザインに対応したタッチ UI がオーサリング環境に導入されています。タッチ UI は、タッチデバイスとデスクトップデバイスの両方で動作するように設計されており、元のクラシック UI とは大きく異なります。

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

関連トピック

各種編集モード

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

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

注意:

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

インライン編集

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

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

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

フルスクリーン編集

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

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

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

ダイアログ編集

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

タッチ操作向け UI のダイアログ編集モード
タッチ操作向け UI のダイアログ編集モード
編集用の詳細なツールバーを含む、クラシック UI のダイアログボックス
編集用の詳細なツールバーを含む、クラシック UI のダイアログボックス

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

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

  • features プロパティ:
    • プラグインの基本機能をアクティベートまたはアクティベート解除するために使用します。
    • 標準化された手順を使用して設定できます。
  • 特別な設定を必要とする詳細なプロパティやオプションが存在する場合があります。

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

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

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

プラグイン ID

features

説明

edit

cut
copy
paste-default
paste-plaintext
paste-wordhtml

切り取り、コピー、3 つの貼り付けモード

findreplace

find
replace

検索および置換。

format

bold
italic
underline

基本的なテキストフォーマット

image

image

整列や代替テキストのような画像プロパティを設定します。コンテンツファインダーから画像をドラッグ&ドロップするための基本サポートは、このプラグインなしでも機能します。

注意:このオーサリング動作はブラウザーによって異なる可能性があります。例えば、Mozilla Firefox にはリサイズ機能がありますが、Google Chrome にはありません。

keys

 

この値の定義については、タブサイズを参照してください。

justify

justifyleft
justifycenter
justifyright

段落の整列。

links

modifylink
unlink
anchor

ハイパーリンクおよびアンカー

lists

ordered
unordered
indent
outdent

このプラグインは、インデントとリスト(ネストされたリストを含む)の両方を制御します。

misctools

specialchars
sourceedit

各種ツールを使用して、特殊文字の入力や HTML ソースの編集をおこなうことができます。また、独自のリストを定義する場合は、特殊文字の範囲全体を追加できます。

Paraformat

paraformat

デフォルトの段落フォーマットは、段落、見出し 1、見出し 2 および見出し 3(<p>、<h1>、<h2> および <h3>)です。他の段落フォーマットを追加したり、リストを拡張したりできます。

spellcheck

checktext

言語ごとのスペルチェッカー

styles

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:editConfig 適用なし
ダイアログ cq:dialog dialog
フルスクリーンダイアログ cq:dialog 適用なし

注意:

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

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

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

ダイアログモードの RTE に適用される次のプロパティを設定します(タッチ UI のみ)。
  • useFixedInlineToolbar:RTE ノード(sling:resourceType=cq/gui/components/authoring/dialog/richtext のもの)に定義されているこのブール値プロパティを true に設定し、RTE ツールバーを永続的に(領域外がクリックされた場合でも)表示して、フロートさせずに固定します。
    このプロパティが true のときは、デフォルト動作により、リッチテキスト編集が「foundation-contentloaded」イベントで開始します。
    これを防ぐには、customStart プロパティを true に設定し、「rte-start」イベントを呼び出して RTE の編集を開始するようにします。このプロパティが true のときは、デフォルトの動作(クリック時に RTE が開始する)が機能しません。
  • customStart:RTE を開始するタイミングを rte-start イベントの呼び出しによって制御するには、RTE ノードに定義されているこのブール値プロパティを true に設定します(例:複数のフィールドの実装)。
  • rte-start:このイベントを RTE の contenteditable-div(RTE の編集を開始するタイミング)で呼び出します。これは、customStart が true に設定されている場合にのみ機能します。

タッチ操作ダイアログで RTE を使用する場合は、問題の発生を避けるために、プロパティ useFixedInlineToolbar に true を設定する必要があります。

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

リッチテキストエディター(RTE)の各機能は一連のプラグインを介して使用可能になり、それぞれに features プロパティがあります。features プロパティを設定することで、1 つ以上の RTE 機能を有効または無効にできます。この記事では、RTE プラグインの特殊な設定方法について説明します。

詳しくは、RTE プラグインをアクティベートして構成する方法を参照してください。

注意:

テンプレートエディターでコアコンポーネントのテキストコンポーネントを利用すると、技術的な設定をおこなうことなく、GUI で多くの RTE プラグインをコンテンツポリシーとして設定できます。コンテンツポリシーは、このドキュメントで説明するように RTE UI 設定と連携させることができます。

詳しくは、このドキュメントの RTE UI 設定とコンテンツポリシーのセクション、ページテンプレートの作成およびコアコンポーネント開発者のドキュメントを参照してください。

注意:

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

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

これらは編集してはいけません。ただし、コピーして独自のテキストコンポーネントを作成することはできます。

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 つの機能(例:太字)である場合は、「PluginName#FeatureName」と指定されます(例:links#modifylink)。

ボタンがポップオーバー(プラグインのいくつかの機能を含む)の場合は、「#PluginName」と指定されます(例:#format)。

ボタンのグループの間の区切り文字(|)は、「-」で指定できます。

インラインまたはフルスクリーンモードのポップアップノードには、使用するポップオーバーのリストが含まれます。「popovers」ノードの下の各子ノードは、プラグインの名前を取って名付けられます(例:format)。プラグインの機能のリストが含まれるプロパティ「items」があります(例:format#bold)。

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

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

AEM 6.3 Service Pack 3 CFP 1 以降では、RTE フローで使用可能なオプションに関するユーザーインターフェイス設定がコンテンツポリシーに影響します。

  • ユーザーインターフェイス設定では、コンテンツポリシーで使用可能なオプションを定義します。
  • RTE のユーザーインターフェイス設定が削除されたか、どの項目も有効にしていない場合、コンテンツポリシーではその設定ができません。
  • オーサーは、ユーザーインターフェイス設定およびコンテンツポリシーによって使用可能となっている機能にのみアクセスできます。

例については、テキストコアコンポーネントのドキュメントを参照してください。

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

RTE ツールバーに表示される Coral アイコンと使用可能なコマンドとのマッピングをカスタマイズできます。Coral アイコンに加えて他のアイコンを使用することはできません。

  1. uiSettings/cui の下に、icons という名前のノードを作成します。
  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 に切り替えるには、次の手順を実行します。

注意:

この方法は、ベストプラクティスとしてお勧めするものではありません。CoralUI 2 RTE への切り替えは最後の手段です。CoralUI 2 RTE 用のカスタムプラグインは、そのプラグインが RTE の内部構造(クラスなど)に依存していない場合に限り、CoralUI 3 RTE でも動作します。

CoralUI3 RTE のカスタムプラグインを使用する場合は、rte.coralui3 ライブラリを使用してください。

  1. /apps の下のノード /libs/cq/gui/components/authoring/editors/clientlibs/core をオーバーレイし、次の手順を実行します。

    • dependencies プロパティで、rte.coralui3rte.coralui2 に置き換えます。
    • embed プロパティで、cq.authoring.editor.core.inlineediting.rte.coralui3cq.authoring.editor.core.inlineediting.rte.coralui2 に置き換えます。
    • embed プロパティで、cq.authoring.rte.coralui3cq.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.rtecq.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 機能は AEM コンポーネントダイアログでのみサポートされます。RTE は、ウィザードやタッチ操作向け UI の基盤フォーム(ページプロパティ基礎モードなど)ではサポートされません。

ハイブリッドデバイスでは機能しない

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

設定ノードの名前を config にできない

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

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

法律上の注意   |   プライバシーポリシー