リッチテキストエディタープラグインの設定

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

他の RTE 設定について詳しくは、リッチテキストエディターの設定を参照してください。

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

プラグインをアクティベートするには、次の手順に従います。初めてプラグインを設定するときは、対応するノードが存在しないので、一部の手順のみ実行します。

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

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. 設定するインターフェイスに応じて、ノード <rtePlugins-node> を作成します（まだ存在しない場合）。

   • 名前 rtePlugins
   • 型 nt:unstructured

4. この下に、アクティベートする各プラグインのノードを作成します。

   • 型 nt:unstructured
   • 名前 必要なプラグインのプラグイン ID

プラグインをアクティベートしたら、次のガイドラインに従って features プロパティを設定します。

findreplace プラグインの理解

findreplace プラグインには設定は必要ありません。すぐに使用できます。

置換機能を使用する場合は、検索文字列と同時に置換後の文字列も入力する必要があります。ただし、置換する前に「検索」をクリックして文字列を検索することはできます。「検索」をクリックした後に置換後の文字列を入力すると、検索がリセットされ、テキストの先頭から再開されます。

検索と置換ダイアログは、「検索」をクリックすると透明になり、「置換」をクリックすると不透明になります。この動作により、作成者は置き換えられるテキストを確認できます。「すべてを置換」をクリックすると、ダイアログが閉じて、実行された置換の回数が表示されます。

貼り付けモードの設定

RTE では、次の 3 つのいずれかのモードで、コンテンツを貼り付けることができます。

• ブラウザーモード：ブラウザーのデフォルトの貼り付け機能を使用して、テキストを貼り付けます。この方法は推奨されません。不要なマークアップが追加されることがあります。

• プレーンテキストモード：クリップボードの内容をプレーンテキストとして貼り付けます。この方法では、クリップボードの内容を Experience Manager コンポーネントに挿入する前に、そのスタイル要素と書式設定要素がすべて削除されます。

• MS Word モード：MS Word からテキスト（テーブルを含む）を書式付きでコピーして貼り付けます。Web ページや MS Excel など、他のソースからのテキストのコピーおよび貼り付けはサポートされていないので、一部の書式しか保持されません。

RTE ツールバーで使用可能な貼り付けオプションの設定

これらの 3 つのアイコンのいくつか、またはすべてを RTE ツールバーに表示できます（どのアイコンも表示しないという選択も可能です）。

• 貼り付け（Ctrl + V）：事前設定によって、3 つの貼り付けモードのいずれかに対応付けることができます。

• テキストとして貼り付け：プレーンテキストモード機能を提供します。

• Word から貼り付け：MS Word モード機能を提供します。

必須アイコンを表示するように RTE を設定するには、以下の手順に従います。

1. 例えば、/apps/<myProject>/components/text コンポーネントに移動します。
2. rtePlugins/edit ノードに移動します。このノードが存在しない場合は、プラグインのアクティベートを参照してください。
3. features ノードの edit プロパティを作成し、1 つ以上の機能を追加します。すべての変更を保存します。

貼り付け（Ctrl + V）アイコンとショートカットの動作の設定

以下の手順に従って、貼り付け（Ctrl + V）​アイコンの動作を事前設定できます。また、この設定では、作成者がコンテンツの貼り付けに使用するキーボードショートカット Ctrl + V の動作も定義します。

この設定では、以下の 3 つの使用方法を定義できます。

• ブラウザーのデフォルトの貼り付け機能を使用して、テキストを貼り付けます。この方法は推奨されません。不要なマークアップが追加されることがあります。下の browser を使用して設定します。

• クリップボードの内容をプレーンテキスト形式で貼り付けます。この方法では、クリップボードの内容を Experience Manager コンポーネントに挿入する前に、そのスタイル要素と書式設定要素がすべて削除されます。下の plaintext を使用して設定します。

• MS Word からテキスト（テーブルを含む）を書式付きでコピーして貼り付けます。Web ページや MS Excel など、他のソースからのテキストのコピーおよび貼り付けはサポートされていないので、一部の書式しか保持されません。下の wordhtml を使用して設定します。

1. コンポーネント内で、<rtePlugins-node>/edit ノードに移動します。このノードが存在しない場合は作成します。詳しくは、プラグインのアクティベートを参照してください。

2. edit ノード内で、次の詳細情報を使用してプロパティを作成します。

   • 名前 defaultPasteMode
   • 型 String
   • 値​は browser、plaintext、wordhtml モードからのいずれかの必須の貼り付けモードです。

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

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

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

• テキスト
• リンク

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

別のプログラムから Experience Manager にテキストを貼り付けるときに使用可能な書式を設定するには、次のようにします。

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 ノードに適用できます。

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

"htmlPasteRules": {
    "allowBasics": {
        "italic": true,
        "link": true
    },
    "allowBlockTags": [
        "p", "h1", "h2", "h3"
    ],
    "list": {
        "allow": false,
        "ignoreMode": "paragraph"
    },
    "table": {
        "allow": true,
        "ignoreMode": "paragraph"
    }
}

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

テキストスタイルの設定

スタイルを適用して、テキストの外観を部分的に変更できます。スタイルは、CSS スタイルシートに事前定義する CSS クラスに基づきます。スタイル設定したコンテンツは、CSS クラスを参照する span 属性を使用して class タグで囲まれます。次に例を示します。

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

スタイルプラグインを初めて有効にしたときは、使用可能なデフォルトのスタイルがありません。ポップアップリストは空です。スタイルを使用できるようにするには、次の操作をおこないます。

• 「スタイル」ドロップダウンセレクターを有効にします。
• スタイルシートの場所を 1 つ以上指定します。
• 「スタイル」ポップアップリストから選択可能な個々のスタイルを指定します。

例えばスタイルを追加するなど、後で再設定する場合は、新しいスタイルシートを参照して追加スタイルを指定する手順にのみ従います。

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

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

1. コンポーネント内で、ノード <rtePlugins-node>/styles に移動します。このノードが存在しない場合は作成します。詳しくは、プラグインのアクティベートを参照してください。

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

   • 名前 features
   • 型 String
   • 値 *（アスタリスク）

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

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

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

1. テキストコンポーネントのルートノードに移動します（例：/apps/<myProject>/components/text）。

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

   • 名前 externalStyleSheets
   • 型 String[]（複数文字列。CRXDE で「複数」をクリック）
   • 値 使用する各スタイルシートのパスとファイル名。リポジトリーパスを使用します。
   メモ

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

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

RTE をダイアログ（クラシック UI）で使用する場合は、リッチテキスト編集用に最適化されたスタイルシートを指定できます。技術上の制限により、CSS コンテキストはエディターから失われるので、CSS コンテキストをエミュレートして WYSIWYG 環境を改善できます。

リッチテキストエディターは、表示や編集に対して異なるスタイルを提供する CQrte の ID を持つコンテナ DOM 要素を使用します。

#CQ td {
// defines the style for viewing
 }

#CQrte td {
 // defines the style for editing
 }

ポップアップリストで使用可能なスタイルの指定

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. 変更内容を保存します。

   必要な各スタイルについて上記の手順を繰り返します。

日本語で最適な単語分割をするための RTE の設定

Experience Manager を使用して日本語コンテンツを作成する作成者は、改行が不要な場合に改行を避けるスタイルを文字に適用できます。これにより、作成者は文を目的の位置で区切ることができます。この機能のスタイルは、CSS スタイルシートに事前定義する CSS クラスに基づいています。

作成者が日本語のテキストに適用できるスタイルを作成するには、次の手順に従います。

1. スタイルノードの下にノードを作成します。スタイルを指定するを参照してください。

   • 名前：jpn-word-wrap
   • 型：nt:unstructure

2. CSS クラスを参照する cssName プロパティをノードに追加します。このクラス名は日本語のワードラップ機能のための予約名です。

   • 名前：cssName
   • 型：String
   • 値：jpn-word-wrap（先行の . なし）

3. プロパティテキストを同じノードに追加します。値は、スタイルを選択するときに作成者に表示されるスタイルの名前です。

   • 名前：text
     *型：
     String
   • 値：Japanese word-wrap

4. スタイルシートを作成してそのパスを指定します。スタイルシートの場所を指定を参照してください。スタイルシートに次のコンテンツを追加します。必要に応じて背景色を変更してください。

   .text span.jpn-word-wrap {
       display:inline-block;
   }
   .is-edited span.jpn-word-wrap {
       background-color: #ffddff;
   }
   

   

段落書式の設定

RTE で作成したテキストは、ブロックタグ（デフォルトでは <p> タグ）内に配置されます。paraformat プラグインを有効にすることで、ドロップダウン選択リストを使用して、段落に割り当てることができる追加のブロックタグを指定します。段落書式は、正しいブロックタグを割り当てることにより、段落の種類を特定します。作成者は、書式セレクターを使用して書式を選択し、割り当てることができます。ブロックタグとしては、例えば、標準段落 <p> や見出し <h1>、<h2> などがあります。

段落書式プラグインを初めて有効にしたときは、使用可能なデフォルトの段落書式はありません。ポップアップリストは空です。段落書式を使用できるようにするには、次の操作をおこないます。

• 「形式」ポップアップセレクターリストを有効化します。
• ポップアップメニューから段落書式として選択できるブロックタグを指定します。

例えば書式を追加するなど、後で再設定する場合は、関連する手順にのみ従います。

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

paraformat プラグインを有効にするには、次の手順に従います。

1. コンポーネント内で、ノード <rtePlugins-node>/paraformat に移動します。このノードが存在しない場合は作成します。詳しくは、プラグインのアクティベートを参照してください。

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

   • 名前 features
   • 型 String
   • 値 *（アスタリスク）

使用可能な段落書式の指定

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

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. 変更内容を保存します。

   必要な各書式について上記の手順を繰り返します。

特殊文字の設定

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

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

単一文字の定義

1. コンポーネント内で、ノード <rtePlugins-node>/misctools に移動します。このノードが存在しない場合は作成します。詳しくは、プラグインのアクティベートを参照してください。

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

   • 名前 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 でプロパティを保存すると、HTML 表現された文字が表示されます。下の例を参照してください。上記の手順を繰り返して、より多くの特殊文字を使用できるようにします。

文字範囲の定義

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

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

   • 名前 文字範囲を反映する名前（pencils など）を指定可能
   • 型 nt:unstructured

3. このノード（特殊文字の範囲に従って命名）の下に、次の 2 つのプロパティを追加します。

   • 名前 rangeStart

     型 Long
     値 範囲内の最初の文字の Unicode 表現（10 進数）

   • 名前 rangeEnd

     型 Long
     値 範囲内の最後の文字の Unicode 表現（10 進数）

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

   例えば、9998 ～ 10000 の範囲を定義すると、次の文字が作成されます。

   

   図：CRXDE で、RTE で使用可能な文字の範囲を定義します。

   

テーブルスタイルの設定

スタイルは一般的に、テキストに適用されますが、テーブルやいくつかのテーブルセルに適用できるスタイルもあります。こうしたスタイルは、セルのプロパティまたはテーブルのプロパティダイアログの「スタイル」セレクターボックスから使用できます。スタイルは、標準のテーブルコンポーネントではなく、テキストコンポーネント（または派生コンポーネント）内のテーブルを編集するときに使用できます。

1. コンポーネント内で、以下のノードに移動します。<rtePlugins-node>/tableこのノードが存在しない場合は作成します。詳しくは、プラグインのアクティベートを参照してください。

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

   • 名前 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. すべての変更を保存します。

必要な各スタイルについて上記の手順を繰り返します。

アクセシビリティ向上のためにテーブル内に非表示のヘッダーを設定

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

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

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

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

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

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

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

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

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

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

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

必要に応じて辞書を追加するには、次の手順に従います。

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

2. 必要な言語を選択して、スペル定義を含む ZIP ファイルをダウンロードします。アーカイブの内容をファイルシステム上に抽出します。

   注意

   OpenOffice.org v2.0.1 以前の MySpell 形式の辞書のみがサポートされています。辞書は現在アーカイブファイルなので、ダウンロード後にアーカイブを確認することをお勧めします。

3. .aff ファイルと .dic ファイルを見つけます。ファイル名は小文字のままにします。例えば、de_de.aff と de_de.dic です。

4. /apps/cq/spellchecker/dictionaries のリポジトリー内に .aff ファイルと .dic ファイルを読み込みます。

取り消しおよびやり直し操作の履歴サイズの設定

RTE では、以前の編集を取り消す、またはやり直すことができます。デフォルトでは、50 回分の編集が履歴に保存されます。この値は必要に応じて設定できます。

1. コンポーネント内で、以下のノードに移動します。<rtePlugins-node>/undoこれらのノードが存在しない場合は作成します。詳しくは、プラグインのアクティベートを参照してください。

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

   • 名前 maxUndoSteps
   • 型 Long
   • 値 履歴に保存する取り消しステップ数。デフォルトは 50 です。元に戻す／やり直しを完全に無効にする場合、0 を使用します。

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

タブサイズの設定

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

タブサイズを定義するには、次のようにします。

1. コンポーネント内で、ノード <rtePlugins-node>/keys に移動します。このノードが存在しない場合は作成します。詳しくは、プラグインのアクティベートを参照してください。

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

   • 名前 tabSize
   • 型 String
   • 値 タブに使用するスペース文字の数.

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

インデントの余白の設定

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

1. コンポーネント内で、以下のノードに移動します。<rtePlugins-node>/listsこれらのノードが存在しない場合は作成します。詳しくは、プラグインのアクティベートを参照してください。

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

   • 名前：identSize
   • 型：Long
   • 値：インデントの余白に必要なピクセル数

編集可能な領域の高さの設定

コンポーネントダイアログ内に表示される編集可能な領域の高さを定義できます。この設定は、ダイアログで RTE を使用する場合にのみ適用されます。この設定によってダイアログウィンドウの高さが変わることはありません。

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

   • 名前 height
   • 型 Long
   • 値 編集キャンバスの高さ（ピクセル単位）

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

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

Experience Manager でリンクを追加する場合、使用する CSS スタイルと、自動的に受け入れるプロトコルを定義できます。別のプログラムから Experience Manager にリンクを追加する方法を設定するには、HTML ルールを定義します。

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

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

   • 名前 htmlRules
   • 型 nt:unstructured
   メモ

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

   • 名前 xtype
   • 型 String
   • 値 richtext

   ../items/text ノードの場所は、ダイアログの構造によって異なる場合があります。/apps/myProject>/components/text/dialog/items/text と /apps/<myProject>/components/text/dialog/items/panel/items/text の 2 つの例があります。

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

   • 名前 links
   • 型 nt:unstructured

4. links ノードの下で、必要に応じてプロパティを定義します。

   • 内部リンクの CSS スタイル：

     • 名前 cssInternal
     • 型 String
     • 値 CSS クラスの名前（先頭に「.」を付けない。例、.cssClass ではなく cssClass）

   • 外部リンクの CSS スタイル：

     • 名前 cssExternal
     • 型 String
     • 値 CSS クラスの名前（先頭に「.」を付けない。例、.cssClass ではなく cssClass）

   • 有効な​プロトコル​の配列（https://、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. すべての変更を保存します。