現在表示中:

リッチテキストエディターRTE)では、テキストコンテンツを編集するための幅広い機能が提供されており、アイコン、選択ボックス、メニューを追加することによって WYSIWYG エクスペリエンスを実現できます。

これらは、インストールするテキストコンポーネントに合わせて個別にアクティベート、アクティベート解除、設定が可能です。

  • タッチ操作向け UI

    chlImage_1
  • クラシック UI

    rtedefault

この機能は、一連のプラグイン経由で、それぞれ以下を使用して利用できるようにします。

RTE プラグインと features プロパティ

プラグインとその機能

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

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

  • プラグインのアクティベート時にノード名として使用されるプラグイン ID
    テーブル内には、各プラグインの API ドキュメントへのリンクがあります。
  • features プロパティに許可されている値
  • 各プラグインで実現される機能の説明
    テーブル内には、RTE を使用したオーサリングに関する弊社のドキュメントへのリンクがあります。

注意:

デフォルトでは、formatlinklistjustifycontrol プラグインとそのすべての機能が RTE で有効になっています。

プラグイン ID
機能
説明
edit cut
copy
paste-default
paste-plaintext
paste-wordhtml
切り取り、コピーおよび様々な方法での貼り付け
findreplace
find
replace
検索および置換
format
bold
italic
underline
基本テキスト形式
image
image

基本の画像サポート(コンテンツまたはコンテンツフォルダーからドラッグ)。

使用するブラウザーによって使用時の動作が異なる場合があります。

keys   この値の定義については、タブサイズを参照してください。
justify
justifyleft
justifycenter
justifyright
段落の整列
links
modifylink
unlink
anchor
ハイパーリンクおよびアンカー
lists ordered
unordered
indent
outdent
このプラグインは、インデントリスト(ネストされたリストを含む)の両方を制御します。
misctools
specialchars
sourceedit

特殊文字の入力HTML ソースの編集に対応したその他のツール。

独自のリストを定義する場合は、特殊文字の追加を参照してください。

paraformat
paraformat

段落の書式設定

デフォルトの段落書式は次のとおりです。

  • 段落<p>
  • 見出し 1 <h1>
  • 見出し 2 <h2>
  • 見出し 3 <h3>
独自の段落書式を追加(またはリストを拡張)する場合は、新しい段落書式の追加を参照してください。
spellcheck
checktext
言語認識スペルチェッカー
styles
styles

CSS クラスを使用したスタイル設定のサポート。

テキストで使用するスタイルの範囲を独自に追加(または拡張)する場合は、新しいスタイル(テキスト)の追加を参照してください。

subsuperscript
subscript
superscript
下付き文字や上付き文字を追加した基本書式の拡張。
table
table
removetable
insertrow
removerow
insertcolumn
removecolumn
cellprops
mergecells
splitcell
selectrow
selectcolumns

テーブルのサポート

テーブル全体または個々のセルに独自のスタイルを追加する場合は、テーブルおよびテーブルセルのスタイルの追加を参照してください。

undo
undo
redo

取り消しとやり直し

取り消し/やり直しの履歴サイズを定義することもできます。

RTE - インプレースおよびダイアログ

RTE は様々なモードで使用できます。

インプレース編集

  • タッチ操作向け UI

    ゆっくりダブルタップ(またはダブルクリック)して開くと、コンテンツが編集可能になり、コンパクトツールバーに基本オプションが表示されます。

    chlImage_1

    全画面表示のインプレース編集は、コンパクトツールバーから開くことができます(コンテンツによってページコンテンツが非表示になります)。

    chlImage_1

    注意:

    テーブルプラグインとソース編集機能はタッチ UI のインプレース編集では使用できません。さらに、画像プラグインは一部のみサポートされています(ドラッグ&ドロップ機能は使用できません)。また、ドラッグ&ドロップはフルスクリーンモードには適用されません。 

  • クラシック UI

    コンポーネント領域をゆっくりダブルタップまたはダブルクリックすると、インプレース編集が開きます。コンテンツはオレンジ色のボーダーで囲まれます。

    chlImage_1

    注意:

    コンテンツファインダーを開いている場合は、RTE の書式設定オプションがウィンドウ領域の上部に表示されます(上記を参照)。

    コンテンツファインダーを開いていない場合は、ツールバーは表示されません。

ダイアログでの編集

  • タッチ操作向け UI

    機能はインプレース/全画面表示編集でカバーされるので、不要です。

    注意:

    テーブルプラグインは UI でダイアログを編集しているときにはサポートされません。

  • クラシック UI

    コンテンツのフロー内でダイアログが直接開きます。

    chlImage_1

    注意:

    特定のシナリオでは、このダイアログはポップアップウィンドウとして開く場合もあります。例えば、テキストコンポーネントが列構造の一部であり、スペースが小さすぎてダイアログがコンテンツフロー内に収まらない場合などです。

設定場所

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

注意:

以下の節での重複を防ぐために、それぞれの rtePlugins ノードは <rtePlugins-node> と表記します。

  • インプレース編集(タッチ操作向け UI およびクラシック UI):

    • .../text/cq:editConfig/cq:inplaceEditing/config/rtePlugins

    注意:

    後方互換性などの理由で、cq:inplaceEditing の下のノード名が config 以外になっている場合は、次の中間ノード

    • cq:inplaceEditing

    で、以下のプロパティが定義されていることを確認してください。

    • 名前configPath
    • 種類string
    • :設定の定義に使用したノードの名前(config に相当するもの。例えば、これまでの例では、inplaceEditingTextConfig と定義されている場合がありました)

  • ダイアログでの編集(クラシック UI のみ):

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

    タッチ UI のダイアログで RTE が使用されているときは、未知の問題が発生することを避けるために、必ずプロパティ useFixedInlineToolbar を true に設定してください。

注意:

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

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

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

プラグインのアクティベートと features プロパティの設定

プラグインノードごとに、features プロパティを設定して、1 つ以上の機能をアクティベートまたはアクティベート解除できます。

注意:

CRXDE Lite を使用する場合は、「すべて保存」を使用して、変更を定期的に保存することをお勧めします。

プラグインのアクティベート

注意:

この手順が必要なのは、コンポーネントに関してプラグインを初めて明示的に設定するときのみです。その後は、ノードは既に存在します。

  1. CRXDE Lite を使用して、プロジェクトのテキストコンポーネントを見つけます。

  2. コンポーネントによっては、RTE プラグインを設定する前に、<rtePlugins-node> の親ノードを作成する必要があります。

    • コンポーネントによって、次の親ノード
      • config
        • 例:
          .../text/cq:editConfig/cq:inplaceEditing/config
      • 代替の設定ノード
        • 例:
          .../text/cq:editConfig/cq:inplaceEditing/inplaceEditingTextConfig
      • text
        • 例:
          .../text/dialog/items/tab1/items/text
    • のタイプは、
      • jcr:primaryType cq:Widget
    • であり、いずれも以下のプロパティを持ちます。
      • 名前 name
      • 種類 String
      • ./text
  3. 設定対象の UI によっては、新しいノードを作成します(<rtePlugins-node>(存在しない場合)など)。

    • 名前 rtePlugins
    • 種類 nt:unstructured
  4. この下に、アクティベートするプラグインごとの新しいノードを作成します。

features プロパティの設定

  1. この「プラグイン」ノード(プラグインの名前が付いたノード)に関して、features プロパティを追加します。

    このプロパティを設定するには、以下の 2 つの方法があります。

    • プラグインのすべての機能をアクティベートするには:
      • 名前 features
      • タイプ String
      • *(アスタリスク)
    • 特定の機能をアクティベートするには(明示的に定義されていないものはアクティベート解除):
      • 名前 features
      • タイプ String[](複数文字列。CRXDE Lite でタイプを String に設定し、「複数」をクリック)
      • 1 つまたは複数の機能の値に設定

    警告:

    features の特定の値を 1 つだけ設定する場合であっても、String[] を使用する必要があります。

    String は、features* として定義する場合にのみ有効です。

以下の手順は、features プロパティ設定の一例を示しています。

各種貼り付けアイコンの設定例

次の 3 つの貼り付けアイコンがあります(ただし、全部ではなく一部のみを表示することもできます)。

  • ブラウザーのデフォルト(paste-default
  • プレーンテキスト(paste-plaintext
  • Microsoft Word(paste-wordhtml

表示するものを設定する方法は次のとおりです。

  • 編集プラグインをアクティベート(<rtePlugins-node>/edit ノードを作成)
  • <rtePlugins-node>/edit ノード上で features プロパティの値を定義
  1. コンポーネントに移動します。例は次のとおりです。
        /apps/<myProject>/components/text

  2. コンポーネント定義内で、rtePlugins/edit ノードに移動します。例は以下のとおりです。

        <rtePlugins-node>/edit

    これらが存在しない場合は、プラグインのアクティベートを参照してください。

  3. edit ノードで features プロパティを作成します(プロパティタイプは表示するアイコンの組み合わせによって異なります)。

    • すべてのアイコン(cut、copy、paste-browser、paste-plaintext、paste-wordhtml)を表示するには、features プロパティを次のように作成します。
      • 名前 features
      • タイプ String
      • *(アスタリスク)
    • 個々のアイコン、例えば
      • cut
      • copy
      • 「Microsoft Word として貼り付け」(paste-wordhtml
      を表示するには、features プロパティを次のように作成します。
      • 名前 features
      • タイプ String[](CRXDE を使用する場合は「複数」をクリック)
        • cut
        • copy
        • paste-wordhtml
  4. 変更内容を保存します。

ツールバー用のリッチテキストエディターダイアログ設定の設定(タッチ UI)

RTE ツールバーの作成に使用される、リッチテキストエディターの UI 設定を設定できます。

RTE には要件に応じてオーバーライドできる、次のデフォルト設定が用意されています。

"uiSettings": {
    "cui": {
		"inline": {
			// TODO adjust to final decision of default inline toolbar settings
			"toolbar": [
				"#format",
				"-",
				"#justify",
				"-",
				"#lists",
				"-",
				"links#modifylink",
				"links#unlink",
				"-",
				"fullscreen#start",
				"-",
				"control#close",
				"control#save"
			],
			"popovers": {
				"format": {
					"ref": "format",
					"items": [
						"format#bold",
						"format#italic",
						"format#underline"
					]
				},
				"justify": {
					"ref": "justify",
					"items": [
						"justify#justifyleft",
						"justify#justifycenter",
						"justify#justifyright"
					]
				},
				"lists": {
					"ref": "lists",
					"items": [
						"lists#unordered",
						"lists#ordered",
						"lists#outdent",
						"lists#indent"
					]
				},
				"styles": {
					"ref": "styles",
					"items": "styles:getStyles:styles-pulldown"
				},
				"paraformat": {
					"ref": "paraformat",
					"items": "paraformat:getFormats:paraformat-pulldown"
				}
			}
		},
		"fullscreen": {
			"toolbar": [
				"format#bold",
				"format#italic",
				"format#underline",
				"subsuperscript#subscript",
				"subsuperscript#superscript",
				"-",
				"edit#cut",
				"edit#copy",
				"edit#paste-default",
				"edit#paste-plaintext",
				"edit#paste-wordhtml",
				"-",
				"links#modifylink",
				"links#unlink",
				"links#anchor",
				"-",
				"findreplace#find",
				"findreplace#replace",
				"-",
				"undo#undo",
				"undo#redo",
				"-",
				"justify#justifyleft",
				"justify#justifycenter",
				"justify#justifyright",
				"-",
				"lists#unordered",
				"lists#ordered",
				"lists#outdent",
				"lists#indent",
				"-",
				"table#createoredit",
				"-",
				"image#imageProps",
				"-",
				"spellcheck#checktext",
				"misctools#specialchars",
				"misctools#sourceedit",
				"-",
				"#styles",
				"#paraformat",
				"-",
				"fullscreen#finish"
			],
			"popovers": {
				"styles": {
					"ref": "styles",
					"items": "styles:getStyles:styles-pulldown"
				},
				"paraformat": {
					"ref": "paraformat",
					"items": "paraformat:getFormats:paraformat-pulldown"
				}
			}
		},
		"tableEditOptions": {
			"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",
				"-"
			]
		}
	}
}

インラインモードとフルスクリーンモードでは別の UI 設定が使用されます。ツールバープロパティは、ツールバーのボタンの指定に使用します。

例えば、ボタン自体が 1 つの機能(例:Bold)である場合は、「PluginName#FeatureName」と指定されます(例:links#modifylink)。

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

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

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

デフォルト機能の上書き

標準のテキストコンポーネントでは、明示的に定義しなくても、特定のプラグインおよび機能が AEM によってデフォルトとしてアクティベートされます(サイト専用のコンポーネントでは他のデフォルトが設定される場合があります)。

そのようなプラグインおよびその機能を明示的に定義すると、その定義がデフォルトより優先されます。

何らかの理由により、デフォルトでアクティベートされるプラグインのすべての機能を無効にする場合は、features プロパティを String[] として定義(タイプを String に設定し、CRXDE Lite で「複数」ボタンを選択)して、値を空のリストにします。

RTE の他の機能の設定

注意:

ここでは、RTE 機能のサブセットの設定について詳細に説明します。

追加のオプションが用意されており、同様の方法を使用して設定できます。

スタイル(テキスト)

スタイルは、単一の文字からそれ以上の部分まで、テキストの一部の外観に影響します。スタイルは CSS クラス(CSS スタイルシート内に存在)に基づきます。これは、class 属性を使用して CSS クラスを参照する span タグでテキストの一部を囲むからです。次に例を示します。

    <span class=monospaced>Monospaced Text Here</span>

ダイアログでスタイルを選択できるようにするには、以下の手順を実行します。

注意:

スタイルプラグインが有効なときは、使用可能なデフォルトのスタイルはありません。

使用可能なスタイルを指定するまでは、ドロップダウンリストは空です。

注意:

以下の手順は、選択可能なスタイルを初めて設定するときに必要なすべての手順を網羅しています。

これが設定済みで、使用可能なスタイルのリストを拡張するだけの場合に必要な手順は次のとおりです。

「スタイル」ドロップダウンセレクターの有効化

これをおこなうには、スタイルプラグインを有効にします。

  1. コンポーネント定義内で、以下のノードを作成します。

        <rtePlugins-node>/styles

    詳しくは、プラグインのアクティベートを参照してください。

  2. styles ノードで features プロパティを作成します。

    • 名前 features
    • 種類 String
    • *(アスタリスク)
  3. すべての変更を保存します。

注意:

スタイルプラグインが有効になると、編集ダイアログに「スタイル」ドロップダウンセレクターが表示されます。ただし、デフォルトのスタイルがないので、アクティベート解除されるか、空になります。

スタイルシートの場所の指定

次に、参照するスタイルシートの場所を指定します。

  1. テキストコンポーネントのルートノードに移動します。例は以下のとおりです。

        /apps/<myProject>/components/text

  2. <rtePlugins-node> の親ノードに、externalStyleSheets プロパティを追加します。

    • 名前 externalStyleSheets
    • タイプ String[](複数文字列。CRXDE で「複数」をクリック)
    • 含めるスタイルシートごとのパスとファイル名を指定。
                     次のようなリポジトリパスを使用します。/etc/designs/geometrixx/static.css

    注意:

    参照先のスタイルシートは後から追加できます。

  3. すべての変更を保存します。

注意:

ダイアログで RTE を使用する場合(ダイアログでの編集 - クラシック UI)は、リッチテキスト編集用に最適化されたスタイルシートを指定することをお勧めします。技術的な制限により、CSS コンテキストはエディターで失われるので、このコンテキストをエミュレートして WYSIWYG エクスペリエンスを向上することをお勧めします。

リッチテキストエディターでは、CQrte という ID を持つコンテナ DOM 要素を使用します。これを使用して、表示や編集用に様々なスタイルを提供できます。

#CQ td {
    // 表示用のスタイルを定義
}

#CQrte td {
    // 編集用のスタイルを定義
}

ドロップダウンリストで選択可能なスタイルの指定

最後に、エディターの「スタイル」ドロップダウンリストから選択可能な個々のスタイルを指定する必要があります。

  1. コンポーネント定義内で、以下のノードに移動します。

        <rtePlugins-node>/styles

    スタイルドロップダウンセレクターの有効化で作成)。

  2. styles ノードの下に、選択可能にするリストを格納する新しいノード(同じく styles という名前)を作成します。

    • 名前 styles
    • 種類 cq:WidgetCollection
  3. styles ノードの下に、個別のスタイルを表す新しいノードを作成します。

    • 名前 実際のスタイルに適した名前を指定可能
    • 種類 nt:unstructured
  4. CSS クラスを参照する cssName プロパティをこのノードに追加します。

    • 名前 cssName
    • タイプ String
    • CSS クラスの名前(先頭の「.」を除く。例えば、.cssClass ではなく cssClass
  5. text プロパティを同じノードに追加します。これは、選択ボックスに表示されるテキストを定義します。

    • 名前 text
    • タイプ String
    • スタイルの説明。「スタイル」ドロップダウン選択ボックスに表示されます。
  6. 変更内容を保存します。

  7. 必要なスタイルごとに手順 3 ~ 6 を繰り返します。

注意:

手順 3 ~ 6 を後から使用してスタイルを追加できます。

段落書式

段落書式は、正しいブロックタグを割り当てることにより、段落タイプを特定します。作成者は、書式セレクターを使用して書式を選択し、割り当てることができます。

注意:

ブロックタグには以下が含まれます。

  • 標準の段落 <p>
  • 見出し <h1><h2><h3>

警告:

このプラグインは、リストやテーブルなど、複雑な構造を暗示するブロックには適していません。

入力するテキストはすべて、ブロックタグ(デフォルトは <p>)内に配置されます。paraformat プラグインを有効にすることにより、ドロップダウン選択リストを使用して、段落に割り当て可能な追加のブロックタグを指定します。

注意:

ブロックタグ(<hr> タグなど)を段落に割り当てることができない場合は、paraformat プラグインを使用するのに有効なケースではありません。

新しい段落書式を追加するには、以下の手順を実行します。

注意:

以下の手順は、選択可能な段落書式を初めて設定するときに必要なすべての手順を網羅しています。

これが設定済みで、使用可能なリストを拡張するだけの場合に必要な手順は一部のみです。

書式ドロップダウンセレクターの有効化

まず、paraformat プラグインを有効にします。

  1. コンポーネント定義内で、以下のノードを作成します。

        <rtePlugins-node>/paraformat

    詳しくは、プラグインのアクティベートを参照してください。

  2. paraformat ノードで features プロパティを作成します。

    • 名前 features
    • 種類 String
    • *(アスタリスク)

注意:

プラグインでこれ以上の設定をおこなわない場合は、以下のデフォルト書式が有効になります。

  • 段落(<p>
  • 見出し 1(<h1>
  • 見出し 2(<h2>
  • 見出し 3(<h3>

ドロップダウンリストで選択可能な段落書式の指定

段落書式を選択可能にするには、次の手順を実行します。

  1. コンポーネント定義内で、以下のノードに移動します。

        <rtePlugins-node>/paraformat

    書式ドロップダウンセレクターの有効化で作成)。

  2. paraformat ノードの下に、書式のリストを格納する新しいノードを作成します。

    • 名前 formats
    • 種類 cq:WidgetCollection
  3. formats ノードの下に、個別の書式の詳細を格納する新しいノードを作成します。

    • 名前 実際の書式に適した名前(myparagraph、myheading1 など)を指定可能です。
    • 種類 nt:unstructured
  4. このノードに、使用するブロックタグを定義するプロパティを追加します。

    • 名前 tag
    • 種類 String
    • 書式のブロックタグ(p、h1、h2 など)。
                区切り文字の山括弧は入力不要です。
  5. 同じノードに、説明テキストをドロップダウンリストに表示するための別のプロパティを追加します。

    • 名前 description
    • タイプ String
    • この書式の説明テキスト。例えば、段落、見出し 1、見出し 2 などです。このテキストは「書式」選択リストに表示されます。
  6. 変更内容を保存します。

  7. 必要な書式ごとに手順 3 ~ 6 を繰り返します。

注意:

手順 3 ~ 6 を後から使用して段落書式を追加できます。

警告:

カスタム書式(上記で指定)を定義すると、デフォルトの書式(<p><h1><h2> および <h3>)は削除されます。

<p> はデフォルトの書式なので、この書式を再作成する必要があります

同じことが、既存のコンテンツで既に使用されているすべての書式に該当します。

特殊文字

標準的な AEM インストール環境では、misctools プラグインで特殊文字(specialchars)を有効にすると、デフォルトの選択肢がただちに使用可能になります。例えば、著作権や商標の記号などです。

個別の文字またはシーケンス全体を定義することにより、独自で選択した文字が使用可能になるように RTE を設定できます。

警告:

独自の特殊文字を追加すると、デフォルトの選択肢よりも優先されます。

必要に応じて、独自の選択肢の中で(再)定義をおこないます。

単一文字の定義

  1. コンポーネント内で、以下のノードに移動します。

        <rtePlugins-node>/misctools

    これらのノードが存在しない場合は作成します。詳しくは、プラグインのアクティベートを参照してください。

  2. misctools ノードで features プロパティを作成します。

    • 名前 features
    • タイプ String[]
    • specialchars
                (このプラグインに関してすべての機能を適用する場合は String / *
  3. misctools の下に、特殊文字の設定を格納するノードを作成します。

    • 名前 specialCharsConfig
    • 種類 nt:unstructured
  4. specialCharsConfig の下に、文字のリストを格納する別のノードを作成します。

    • 名前 chars
    • 種類 nt:unstructured
  5. chars の下に、個々の文字定義を格納する新しいノードを追加します。

    • 名前 文字を反映する名前(half など)を指定可能
    • 種類 nt:unstructured
  6. このノードに、以下のプロパティを追加します。

    • 名前 entity
    • 種類 String
    • 必要な文字の HTML 表現。分数 2 分の 1 を表す場合は &189; など。
  7. 変更内容を保存します。

    CRXDE では、このプロパティを保存すると、表現される文字が表示されます。例えば、分数「2 分の 1」は次のように表示されます。

    chlImage_1

注意:

手順 5~9 を後から使用して、使用可能な特殊文字を拡張できます。

文字の範囲の定義

一連の文字をすべて追加することもできます。

  1. 単一文字の定義の手順 1~3 を使用します。

  2. chars の下に、文字範囲の定義を格納する新しいノードを追加します。

    • 名前 文字範囲を反映する名前(pencils など)を指定可能
    • 種類 nt:unstructured
  3. このノード(特殊文字の範囲に従って命名)の下に、次の 2 つのプロパティを追加します。

    • 名前 rangeStart
      種類 Long
      範囲内の最初の文字の Unicode 表現(10 進数)
    • 名前 rangeEnd
      種類 Long
      範囲内の最後の文字の Unicode 表現(10 進数)
  4. 変更内容を保存します。

    例えば、9998~10000 の範囲を定義すると、

    chlImage_1

    次の文字が提供されます。

    rtepencil

注意:

手順 2~4 を後から使用して、使用可能な特殊文字を拡張できます。

スタイル(テーブルおよびテーブルのセル)

通常のテキストで使用するスタイルを定義する場合と同様に、テーブル全体用、または個々のセル用にもスタイル(別個のセット)を定義できます。これらは、セルのプロパティダイアログまたはテーブルのプロパティダイアログの「スタイル」セレクターボックスから選択できます。

注意:

これらのスタイルは、標準のテーブルコンポーネントではなく、テキストコンポーネント(または派生)内でテーブルを編集する場合にのみ使用できます。

注意:

現在、テーブルとセルのスタイルはクラシック UI でのみ定義できます。

注意:

RTE への(または RTE からの)テーブルのコピーおよび貼り付けは、ブラウザーに依存する機能であり、すべてのブラウザーで標準でサポートされるものではありません。例えば、Firefox を使用して、クラシック UI およびタッチ UI で RTE/テキストコンポーネントからテーブルをコピーまたは貼り付けたときは、テーブルのレイアウトが維持されません。

最適な結果を得るには、前の段落の末尾から、テーブルの下にある次の段落の先頭までを含めて、テーブル全体を選択します。

  1. コンポーネント内で、以下のノードに移動します。

        <rtePlugins-node>/table

    これらのノードが存在しない場合は作成します。詳しくは、プラグインのアクティベートを参照してください。

  2. table ノードで features プロパティを作成します。

    • 名前 features
    • 種類 String
    • *

    注意:

    テーブルの機能をすべて有効にはしない場合は、features プロパティを次のように作成します。

    • 種類 String[]
    • 必要に応じて、以下のいずれかまたは両方:
      • table:スタイルを含むテーブルのプロパティの編集を許可する場合
      • cellprops:スタイルを含むセルのプロパティの編集を許可する場合

  3. CSS スタイルシートの場所を、参照可能なように定義する必要があります。

    これはテキストのスタイルを定義する場合と同じなので、スタイルシートの場所の指定を参照してください(他のスタイルが定義済みの場合は、既に定義されている可能性があります)。

  4. table ノードの下に、次の新しいノードを作成します(必要に応じて)。

    • テーブル全体のスタイルを定義するには(テーブルプロパティの下):
      • 名前 tableStyles
      • タイプ cq:WidgetCollection
    • 個々のセルのスタイルを定義するには(セルプロパティの下):
      • 名前 cellStyles
      • 種類 cq:WidgetCollection
  5. tableStyles ノードまたは cellStyles ノード(適宜)の下に、個別のスタイルを表す新しいノードを作成します。

    • 名前 名前を指定できますが、スタイルが反映されている必要があります。
    • 種類 nt:unstructured
  6. このノードで、以下のプロパティを作成します。

    • 参照する CSS スタイルを定義するには
      • 名前 cssName
      • タイプ String
      • CSS クラスの名前(先頭の「.」を除く。例えば、.cssClass ではなく cssClass
    • ドロップダウンセレクターに表示する説明テキストを定義するには
      • 名前 text
      • 種類 String
      • 選択リストに表示するテキスト
  7. すべての変更を保存します。

  8. 必要なスタイルごとに手順 5~7 を繰り返します。

非表示のヘッダー(テーブル)

ある列ヘッダーの目的が他の列との関係性によって暗示される場合、その列ヘッダーに目に見えるテキストがないデータテーブルを作成することがあります。このケースでは、ヘッダーセル内に非表示の内部テキストを指定し、スクリーンリーダーやその他補助テクノロジの支援により、身体に障害を持つユーザーがその列の目的を理解できるようにする必要があります。

このようなシナリオでアクセシビリティを向上させるために、RTE は非表示のヘッダーセルをサポートします。また、テーブルの非表示のヘッダーに関連する設定が用意されています。これらの設定を使用すると、編集モードやプレビューモードで非表示のヘッダーに CSS スタイルを適用できます。作成者が編集モードで非表示のヘッダーを特定できるように、コードに次のパラメーターを追加してください。

  • hiddenHeaderEditingCSS:RTE が編集されたときに、非表示のヘッダーセルに適用されている CSS クラスの名前を指定します。
  • hiddenHeaderEditingStyle:RTE が編集されたときに、非表示のヘッダーセルに適用されているスタイル文字列を指定します。

コードに CSS とスタイル文字列の両方を指定すると、CSS がスタイル文字列に優先され、スタイル文字列によって加えられたすべての設定の変更が上書きされることがあります。

作成者がプレビューモードで非表示のヘッダーに CSS を適用できるように、コードに次のパラメーターを追加してください。

  • hiddenHeaderClassName:プレビューモードで非表示のヘッダーセルに適用される CSS クラスの名前を指定します。
  • hiddenHeaderStyle:プレビューモードで非表示のヘッダーセルに適用されているスタイル文字列を指定します。

コードに CSS とスタイル文字列の両方を指定すると、CSS がスタイル文字列に優先され、スタイル文字列によって加えられたすべての設定の変更が上書きされることがあります。

スペルチェッカー用の辞書の追加

スペルチェックプラグインがアクティベートされると、RTE ではそれぞれ該当する言語の辞書を使用します。その後、サブツリーの言語プロパティを取得するか、URL から言語を抽出することによって、Web サイトの言語に従って辞書が選択されます。例えば、/en/ ブランチは英語としてチェックされ、/de/ ブランチはドイツ語としてチェックされます。

注意:

インストールされていない言語に関してチェックを試みると、「スペルチェックできませんでした。」というメッセージが表示されます。

標準の AEM インストールには、以下の辞書が含まれます。

  • イギリス英語(en_gb
  • アメリカ英語(en_us

注意:

これらの標準辞書は、
    /libs/cq/spellchecker/dictionaries
の下に、該当する README ファイルと共にあります。

これらのファイルは変更しないでください。

ただし、必要に応じて辞書を追加できます。

  1. ページ https://extensions.openoffice.org に移動します。

  2. 必要な言語を選択して、スペル定義を含む zip ファイルをダウンロードします。

    警告:

    OpenOffice.org v2.0.1 以前の MySpell 形式の辞書のみがサポートされています。

    辞書は現在アーカイブファイルなので、ダウンロード後に完全なテストをおこなうことをお勧めします。

  3. zip ファイルの内容をローカルシステムに解凍します。

  4. 次のファイルを見つけます。

    • *.aff
    • *.dic

    注意:

    ファイル名はすべて小文字にする必要があります。必要に応じて大文字から小文字に変更してください。

    例えば、de_de.affde_de.dic などです。

  5. *.aff ファイルと *.dic ファイルを以下の場所にあるリポジトリに読み込みます。

    /apps/cq/spellchecker/dictionaries

注意:

RTE スペルチェッカーは、オンデマンドで使用できます。テキストの入力を開始しても自動的に実行されません。

スペルチェッカーを実行するには、ツールバーの「スペルチェッカー」ボタンをタップまたはクリックします。RTE は、単語のスペルをチェックし、スペルミスした単語をハイライト表示します。

スペルチェッカーが提案した変更を組み込むと、テキストの状態が変更され、スペルミスした単語はハイライト表示されなくなります。スペルチェッカーを実行するには、「スペルチェッカー」ボタンをもう一度タップまたはクリックします。

注意:

AEM RTE スペルチェッカーは、MySpell スペルチェッカーに基づいています。

詳しくは、サポートチームまたは販売チームにお問い合わせください。

取り消し/やり直しの履歴サイズ

RTE を使用すると、作成者は必要に応じて直前の編集ステップを取り消しおよびやり直しできます。標準インストールの場合は、デフォルトで 50 ステップが履歴に「記憶」されます。この値は必要に応じて変更できます。

  1. コンポーネント内で、以下のノードに移動します。

        <rtePlugins-node>/undo

    これらのノードが存在しない場合は作成します。詳しくは、プラグインのアクティベートを参照してください。

  2. undo ノードで、以下のプロパティを作成します。

    • 名前 maxUndoSteps
    • 種類 Long
    • 履歴に保存する取り消しステップ数。
      • デフォルトは 50 です。
      • 取り消し/やり直しを完全に無効にするには 0 を使用します。
  3. 変更内容を保存します。

デフォルトの貼り付けモード

デフォルトの貼り付けモードは、Crtl+V で使用できます。これは次の 3 つのうちいずれかの値に設定できます。

  • browser
    ブラウザーの貼り付け実装を使用します。不要なマークアップが発生する可能性があるので、お勧めできません。
  • plaintext
    プレーンテキストのみを挿入します。
  • wordhtml(デフォルト)
    Microsoft-Word と互換性のある HTML 貼り付け(不適切なマークアップは自動的に削除されます)。

デフォルトの貼り付けモードを適用するには:

  1. コンポーネント内で、以下のノードに移動します。

        <rtePlugins-node>/edit

    これらのノードが存在しない場合は作成します。詳しくは、プラグインのアクティベートを参照してください。

  2. edit ノードで、以下のプロパティを作成します。

    • 名前 defaultPasteMode
    • タイプ String
    • 必要な貼り付けモード(browserplaintext または wordhtml)。

タブサイズ

任意のテキスト内でタブ文字を押すと、事前に定義済みの数のスペースが挿入されます。デフォルトでは、これはノーブレークスペース 3 個とスペース 1 個です。

タブサイズを定義するには:

  1. コンポーネント内で、以下のノードに移動します。

        <rtePlugins-node>/keys

    これらのノードが存在しない場合は作成します。詳しくは、プラグインのアクティベートを参照してください。

  2. keys ノードで、以下のプロパティを作成します。

    • 名前 tabSize
    • 種類 String
    • タブに使用するスペース文字の数
  3. 変更内容を保存します。

インデントの余白

インデントが有効なとき(デフォルト)は、インデントのサイズを定義できます。

注意:

このインデントサイズは、テキストの段落(ブロック)のみに適用されます。実際のリストのインデントには影響しません。

  1. コンポーネント内で、以下のノードに移動します。

        <rtePlugins-node>/lists

    これらのノードが存在しない場合は作成します。詳しくは、プラグインのアクティベートを参照してください。

  2. lists ノードで、identSize パラメーターを作成します。

    • 名前identSize
    • 種類Long
    • :インデントの余白に必要なピクセル数

高さ(編集可能な領域)

注意:

これは、RTE をダイアログで(インプレース編集 - クラシック UI ではなく)使用している場合にのみ該当します。

コンポーネントダイアログ内に表示される編集可能な領域の高さを定義できます。

  1. コンポーネントのダイアログ定義の ../items/text ノードで、次の新しいプロパティを作成します。

    • 名前 height
    • 種類 Long
    • 編集キャンバスの高さ(ピクセル単位)

    注意:

    これによってダイアログウィンドウの高さが変わることはありません。

  2. 変更内容を保存します。

コンテンツ貼り付け時に使用可能な書式

Microsoft Word として貼り付けpaste-wordhtml)モードをさらに詳細に設定し、Microsoft Word など別のプログラムから AEM に貼り付けるときに使用可能なスタイルを明示的に定義することができます。

例えば、AEM への貼り付けの際に太字書式とリストのみを許可する場合は、他の書式を除外できます。これは設定可能な貼り付けのフィルタリングと呼ばれます。

以下の両方に関して実行できます。

リンクに関しては、自動的に承認されるプロトコルも定義できます。

テキスト貼り付け時に使用可能な書式

別のプログラムから AEM にテキストを貼り付けるときに使用可能な書式を設定するには:

  1. コンポーネント内で、以下のノードに移動します。

        <rtePlugins-node>/edit

    これらのノードが存在しない場合は作成します。詳しくは、プラグインのアクティベートを参照してください。

  2. edit ノードの下に、HTML 貼り付けルールを格納する新しいノードを作成します。

    • 名前 htmlPasteRules
    • タイプ nt:unstructured
  3. htmlPasteRules の下に、使用可能な基本書式の詳細を格納する新しいノードを作成します。

    • 名前 allowBasics
    • 種類 nt:unstructured
  4. 受け入れられる個々の書式を制御するには、以下のうち 1 つまたは複数のプロパティを allowBasics ノードで作成します。

    • 名前 bold
    • 名前 italic
    • 名前 underline
    • 名前 anchor(リンクと名前付きアンカーの両方に対応)
    • 名前 image

    プロパティのタイプはすべて boolean なので、該当するでは、チェックマークを付けるか解除することにより、機能を有効または無効にすることができます。

    注意:

    明示的に定義されていない場合は、デフォルト値である true が使用され、書式が承認されます。

  5. その他の様々なプロパティやノードを使用して、その他の書式も定義でき、htmlPasteRules ノードに適用できます。

    プロパティ タイプ 説明
    allowBlockTags String[]

    許可するブロックタグのリストを定義します。

    使用可能なブロックタグの一部を次に示します。

    • 見出し(h1、h2、h3)
    • 段落(p)
    • リスト(ol、ul)
    • テーブル(table)
    fallbackBlockTag String

    allowBlockTags に含まれていないブロックタグを持つブロックに使用するブロックタグを定義します。

    ほとんどの場合は p で十分です。

    table nt:unstructured

    テーブル貼り付け時の動作を定義します。

    このノードには、テーブルの貼り付けを許可するかどうかを定義する allowBoolean タイプ)プロパティがある必要があります。

    allowfalse に設定した場合は、ignoreModeString タイプ)プロパティを指定して、貼り付けたテーブルコンテンツの処理方法を定義する必要があります。ignoreMode の有効な値は次のとおりです。

    • remove:テーブルコンテンツを削除します。
    • paragraph:テーブルセルを段落に変換します。
    list nt:unstructured

    リスト貼り付け時の動作を定義します。

    リストの貼り付けを許可するかどうかを定義する allowBoolean タイプ)プロパティがある必要があります。

    allowfalse に設定した場合は、ignoreModeString タイプ)プロパティを指定して、貼り付けたリストコンテンツの処理方法を定義する必要があります。ignoreMode の有効な値は次のとおりです。

    • remove:リストコンテンツを削除します。
    • paragraph:リスト項目を段落に変換します。

    有効な htmlPasteRules 構造の例を以下に示します。

    "htmlPasteRules": {
        "allowBasics": {
            "italic": true,
            "link": true
        },
        "allowBlockTags": [
            "p", "h1", "h2", "h3"
        ],
        "list": {
            "allow": false,
            "ignoreMode": "paragraph"
        },
        "table": {
            "allow": true,
            "ignoreMode": "paragraph"
        }
    }
  6. すべての変更を保存します。

リンクのスタイルとプロトコルの設定

AEM RTE にリンクを追加する場合、次の両方を定義できます。

  • 使用する CSS スタイル
  • 自動的に承認されるプロトコル

別のプログラムから AEM にリンクを追加する方法を設定するには、HTML ルールを定義する必要があります。

注意:

HTML ルールについて詳しくは、必要に応じてその他の情報を参照してください。

  1. CRXDE Lite を使用して、プロジェクトのテキストコンポーネントを見つけます。

  2. <rtePlugins-node> と同じレベル(<rtePlugins-node> の親ノードの下)に新しいノードを作成します。

    • 名前 htmlRules
    • 種類 nt:unstructured

    注意:

    ../items/text ノードは次のプロパティを持ちます。

    • 名前 xtype
    • 種類 String
    • richtext

    ../items/text ノードの場所は、ダイアログの構造によって異なる場合があります。以下に例を 2 つ挙げます。

    • /apps/<myProject>/components/text/dialog/items/text
    • /apps/<myProject>/components/text/dialog/items/panel/items/text

  3. htmlRules の下に、新しいノードを作成します。

    • 名前 links
    • 種類 nt:unstructured
  4. links ノードの下で、必要に応じてプロパティを定義します。

    • 内部リンクの CSS スタイル:
      • 名前 cssInternal
      • タイプ String
      • CSS クラスの名前(先頭の「.」を除く。例えば、.cssClass ではなく cssClass
    • 外部リンクの CSS スタイル:
      • 名前 cssExternal
      • タイプ String
      • CSS クラスの名前(先頭の「.」を除く。例えば、.cssClass ではなく cssClass
    • 有効なプロトコルの配列(http://、https://、file://、mailto: などを含む)
      • 名前 protocols
      • 種類 String[]
      • 1 つまたは複数のプロトコル
    • defaultProtocol(種類が String のプロパティ):ユーザーが明示的に指定しなかった場合に使用されるプロトコル。
      • 名前 defaultProtocol
      • 種類 String
      • 1 つまたは複数のデフォルトプロトコル
    • リンクのターゲット属性の処理方法の定義。新しいノードを作成します。
      • 名前 targetConfig
      • 種類 nt:unstructured
      targetConfig ノード上:必要なプロパティを定義します。
      • ターゲットモードを指定:
        • 名前 mode
        • 種類 String

          • auto:自動ターゲットが選択されたことを意味します
            (外部リンクの場合は targetExternal プロパティ、内部リンクの場合は targetInternal プロパティで指定)。
          • manual:このコンテキストでは使用不可
          • blank:このコンテキストでは使用不可
      • 内部リンクのターゲット:
        • 名前 targetInternal
        • 種類 String
        • 内部リンクのターゲット(モードが auto の場合にのみ使用)
      • 外部リンクのターゲット:
        • 名前 targetExternal
        • 種類 String
        • 外部リンクのターゲット(モードが auto の場合にのみ使用)
  5. すべての変更を保存します。

その他の情報

RTE の設定について詳しくは、AEM ウィジェット API のドキュメントを参照してください。

警告:

これは開発者向けの参照用ドキュメントとして設計されているので、詳細な手順説明は含まれていません。

特に、使用可能なプラグインおよび関連オプションを確認するには、以下を参照してください。

  • CQ.form.RichText コンポーネントは、スタイル設定されたテキスト情報(リッチテキスト)を編集するためのフォームフィールドを提供します。
    • リッチテキストフォームで使用可能なすべてのパラメーターについては、「設定オプション」を参照してください。
  • RichText コンポーネントは、CQ.form.rte.plugins.Plugin(および上記のプラグインとその機能)にリストされているプラグインを使用して、幅広い機能を提供します。プラグインごとに、
    • 有効化(または無効化)が可能な機能の詳細については「機能」を参照してください。
    • 該当するプラグインの詳細設定に使用可能なすべてのパラメーターについては、「設定オプション」を参照してください。
  • リンクの HMTL ルールに関する詳細も参照できます。

注意:

機能や設定オプションの定義の横に矢印が表示されている場合は、このエントリを展開して詳細を表示できます。

これらを使用して、以下のように独自の RTE を拡張およびカスタマイズできます。

  • リンク作成時にページで使用できるアンカーをリストするために、LinkPlugin を独自に実装できます。

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

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