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

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

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

メモ

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

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

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

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

メモ

この記事では、重複を避けるために、それぞれの rtePlugins ノードを <rtePlugins-node> と表記しています。

  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 プロパティを設定します。

すべての機能を有効化 一部の特定の機能を有効化 すべての機能を無効化
名前 features 機能 機能
String String(複数文字列。CRXDE Lite で型を String に設定し、「複数」をクリック)[] 文字列
*(アスタリスク) 1 つまたは複数の機能値を設定 -

findreplace プラグインの理解

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

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

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

貼り付けモードの設定

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

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

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

  • 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 を使用して設定します。

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

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

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

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

    • 名前 defaultPasteMode
    • String
    • browserplaintextwordhtml のいずれかの必須の貼り付けモード。

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

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 文字列

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

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

table nt:unstructured

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

このノードには、テーブルの貼り付けを許可するかどうかを定義するプロパティ allow(型は Boolean)が必要です。

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

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

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

リストの貼り付けを許可するかどうかを定義するプロパティ allow(型は Boolean)が必要です。

allowfalse に設定した場合、ignoreMode プロパティ(String 型)を指定して、貼り付けたリストコンテンツの処理方法を定義する必要があります。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"
    }
}
  1. すべての変更を保存します。

テキストスタイルの設定

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

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

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

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

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

メモ

テーブルやテーブルセルのスタイルを定義することもできます。これらの設定には別の手順が必要となります。

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

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

  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 の設定

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

メモ

この機能には、AEM 6.5 Service Pack 1 以降が必要です。

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

  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> などがあります。

注意

このプラグインは、リストやテーブルなど複雑な構造を持つコンテンツには適していません。

メモ

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

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

  • 「フォーマット」ドロップダウンセレクターリストを有効化します。
  • ドロップダウンから段落書式として選択できるブロックタグを指定します。

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

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

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

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

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

    • 名前 features
    • String
    • *(アスタリスク)
メモ

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

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

RTE の段落書式を設定する際に、書式オプションとしての段落タグ <p> を削除しないでください。<p> タグが削除されると、追加書式を設定したとしても、コンテンツ作成者が「段落書式」オプションを選択できなくなります。

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

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

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

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

注意

カスタム書式を定義すると、デフォルトの書式(<p><h1><h2><h3>)は削除されます。<p> 書式はデフォルトの書式なので再作成してください。

特殊文字の設定

標準的な AEM インストール環境では、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 表現された文字が表示されます。下の例を参照してください。上記の手順を繰り返して、より多くの特殊文字を使用できるようにします。

CRXDE で、RTE ツールバーで使用可能にする 1 文字を追加します。

文字範囲の定義

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

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

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

    • 名前 rangeStart

      Long
      範囲内の最初の文字の Unicode 表現(10 進数)

    • 名前 rangeEnd

      Long
      範囲内の最後の文字の Unicode 表現(10 進数)

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

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

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

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

    RTE で使用できる特殊文字は、ポップアップウィンドウで作成者に表示されます。

テーブルスタイルの設定

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

メモ

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

メモ

RTE コンポーネント内または RTE コンポーネントからのテーブルのコピーおよび貼り付けはブラウザーに依存します。デフォルトでは一部のブラウザーしかサポートされていません。結果はテーブルの構造やブラウザーに応じて様々です。例えば、クラシック UI とタッチ UI の Mozilla Firefox で、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/ ブランチはドイツ語としてチェックされます。

メモ

インストールされていない言語に対してチェックを行うと、メッセージSpell checking failedが表示されます。 標準辞書は、readme ファイルと一緒に /libs/cq/spellchecker/dictionaries にあります。これらのファイルを修正しないでください。

標準的なAEMのインストールには、米国英語(en_us)と英語(en_gb)の辞書が含まれます。 辞書を追加するには、次の手順に従います。

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

  2. 次のいずれかの操作を行って、選択した言語の辞書を検索します。

    • 選択した言語の辞書を検索します。 辞書ページで、元のソースまたは発言者のWebページへのリンクを探します。 該当するページ上のv2.xの辞書ファイルを見つけます。
    • https://wiki.openoffice.org/wiki/User:Khirano/Dictionariesでv2.xディクショナリファイルを検索してください。
  3. スペルの定義を含むアーカイブをダウンロードします。 アーカイブの内容をファイルシステム上に抽出します。

    注意

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

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

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

メモ

RTE スペルチェッカーは、オンデマンドで使用できます。テキストの入力を開始しても自動的に実行されません。スペルチェッカーを実行するには、ツールバーのスペルチェッカーをクリックします。 RTEは単語のスペルをチェックし、スペルの間違った単語をハイライトします。
スペルチェッカーで提案される変更を組み込むと、テキストの状態が変更され、スペルミスのある単語はハイライト表示されなくなります。 スペルチェッカーを実行するには、「スペルチェッカー」ボタンをもう一度タップまたはクリックします。

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

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 をダイアログで(クラシック UI のインプレース編集ではなく)使用している場合にのみ該当します。

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

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

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

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

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

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

AEM にリンクを追加する場合、次の定義が可能です。

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

別のプログラムから AEM にリンクを追加する方法を設定するには、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. すべての変更を保存します。

このページ