リッチテキストエディタープラグインの設定 configure-the-rich-text-editor-plug-ins

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

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

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

• 名前 rtePlugins
• 型 nt:unstructured

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

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

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

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

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

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

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

• 名前 htmlPasteRules
• 型 nt:unstructured

htmlPasteRules の下に、使用可能な基本書式の詳細を格納するノードを作成します。

• 名前 allowBasics
• 型 nt:unstructured

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

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

プロパティの​ 型 ​はすべて Boolean なので、該当する​ 値 ​では、チェックマークを付けるか外すことで、機能を有効または無効にできます。

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

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

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

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

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

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

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

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

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

コンポーネント定義内で、「スタイル」ドロップダウンセレクターの有効化で作成したように、ノード <rtePlugins-node>/styles に移動します。

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

• 名前 styles
• 型 cq:WidgetCollection

styles ノードの下に、個別のスタイルを表すノードを作成します。

• 名前 実際のスタイルに適した名前を指定可能
• 型 nt:unstructured

CSS クラスを参照する cssName プロパティをこのノードに追加します。

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

text プロパティを同じノードに追加します。これは、選択ボックスに表示されるテキストを定義します。

• 名前 text
• 型 String
• 値 スタイルの説明。スタイルドロップダウン選択ボックスに表示されます。

変更を保存します。

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

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

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

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

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

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

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

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

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

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

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

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

コンポーネント定義内で、「形式」ドロップダウンセレクターの有効化で作成したように、<rtePlugins-node>/paraformat ノードに移動します。

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

• 名前 formats
• 型 cq:WidgetCollection

formats ノードの下に、個別の書式の詳細を格納するノードを作成します。

• 名前 実際の書式に適した名前（myparagraph、myheading1 など）を指定可能です。
• 型 nt:unstructured

このノードに、使用するブロックタグを定義するプロパティを追加します。

• 名前 tag

• 型 String

• 値：p、h1、h2 など、形式のブロックタグ。

  区切りの山括弧を入力する必要はありません。

同じノードに、説明テキストをドロップダウンリストに表示するための別のプロパティを追加します。

• 名前 description
• 型 String
• 値 この書式の説明テキスト（段落、見出し 1、見出し 2 など）。このテキストは「形式」選択リストに表示されます。

変更を保存します。

必要な各形式に対して、手順を繰り返します。

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

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

• 名前 features

• 型 String[]

• 値 specialchars

  （このプラグインに関してすべての機能を適用する場合は String / *）

misctools の下に、特殊文字の設定を格納するノードを作成します。

• 名前 specialCharsConfig
• 型 nt:unstructured

specialCharsConfig の下に、文字のリストを格納する別のノードを作成します。

• 名前 chars
• 型 nt:unstructured

chars の下に、個々の文字定義を格納するノードを追加します。

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

このノードに、以下のプロパティを追加します。

• 名前 entity
• 型 String
• 値 必要な文字の HTML 表現。分数 2 分の 1 を表す場合は &189; など。

変更を保存します。

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

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

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

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

• 名前 rangeStart

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

• 名前 rangeEnd

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

変更内容を保存します。

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

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

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

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

• 名前 features
• 型 String
• 値 *

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

table ノードの下に、必要に応じて次のノードを作成します。

• テーブル全体のスタイルを定義するには（テーブルのプロパティ ​の下）：

  • 名前 tableStyles
  • 型 cq:WidgetCollection

• 個々のセルのスタイルを定義するには（セルのプロパティ ​の下）：

  • 名前 cellStyles
  • 型 cq:WidgetCollection

tableStyles ノードまたは cellStyles ノード（適宜）の下に、個別のスタイルを表すノードを作成します。

• 名前 名前を指定できますが、スタイルが反映されている必要があります。
• 型 nt:unstructured

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

• 参照される CSS スタイルを定義するには、次の手順を実行します。

  • 名前 cssName
  • 型 String
  • 値 CSS クラスの名前（先頭の . を除く。例、.cssClass ではなく cssClass）

• ポップアップセレクターに表示する説明テキストを定義するには、次の手順を実行します。

  • 名前 text
  • 型 String
  • 値 選択リストに表示するテキスト

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

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

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

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

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

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

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

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

変更を保存します。

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

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

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

変更内容を保存します。

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

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

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

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

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

変更内容を保存します。

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

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

• 名前 htmlRules
• 型 nt:unstructured

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

• 名前 links
• 型 nt:unstructured

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 の場合にのみ使用）

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