テキストコンポーネント

コアコンポーネントのテキストコンポーネントは、インプレース編集機能を備えたリッチテキスト編集および作成用コンポーネントです。

使用方法

テキストコンポーネントは、シンプルなインラインエディターでもフルスクリーン形式でも容易にテキスト編集をおこなえる堅牢なリッチテキストエディターを提供します。

編集ダイアログには、限定的なオプションのみのインライン編集機能と、すべての機能を利用できるフルスクリーン編集機能が用意されています。デザインダイアログでは、見出し、特殊文字、段落スタイルなどのテキスト書式設定オプションをコンテンツ作成者のテンプレートに設定できます。

バージョンと互換性

このドキュメントでは、テキストコンポーネントの現在のバージョン(2018 年 1 月にコアコンポーネントのリリース 2.0.0 で導入された v2)について説明します。

コンポーネントのすべてのサポート対象バージョン、コンポーネントの各バージョンと互換性のある AEM バージョン、以前のバージョンのドキュメントへのリンクを次の表に示します。

コンポーネントのバージョン AEM 6.4 AEM 6.5 AEM as a Cloud Service
v2 互換性あり 互換性あり 互換性あり
v1 互換性あり 互換性あり -

コアコンポーネントのバージョンとリリースについて詳しくは、コアコンポーネントのバージョンを参照してください。

コンポーネント出力のサンプル

テキストコンポーネントを実際に体験し、その設定オプションや HTML および JSON 出力の例を確認するには、コンポーネントライブラリを参照してください。

技術的詳細

テキストコンポーネントに関する最新の技術ドキュメントについては、GitHub を参照してください。

コアコンポーネントの開発について詳しくは、コアコンポーネント開発者向けドキュメントを参照してください。

テキストコンポーネントとリッチテキストエディター

コアコンポーネントのテキストコンポーネントでは、AEM リッチテキストエディター(RTE)を利用します。RTE には、コンテンツ作成者がテキストコンテンツの編集に使用できる幅広い機能が用意されています。RTE は設定の柔軟性が非常に高く、数多くのオプションを提供しています。RTE の設定方法の詳細については、リッチテキストエディターの設定リッチテキストエディタープラグインの設定を参照してください。

コアコンポーネントのテキストコンポーネントでは、RTE がすぐに使用できる状態に設定されています。このドキュメントではこの後、テキストコンポーネントの標準設定について説明します。

メモ

テキストコンポーネントでは、RTE の UI 設定で有効になっているオプションのみ使用できます。

編集ダイアログ

編集ダイアログには、テキストの作成を支援する標準のリッチテキスト書式設定ツールが用意されています。

テキストコンポーネントの編集ダイアログ

太字

太字アイコン

選択したテキストに太字書式を適用したり、カーソルの後に入力したテキストに太字書式を設定したりするために使用します。

Ctrl + B をキーボードショートカットとして使用できます。

斜体

斜体アイコン

選択したテキストに斜体書式を適用したり、カーソルの後に入力したテキストに斜体書式を設定したりするために使用します。

Ctrl + I をキーボードショートカットとして使用できます。

下線

下線アイコン

選択したテキストに下線書式を適用したり、カーソルの後に入力したテキストに下線書式を設定したりするために使用します。

Ctrl + U をキーボードショートカットとして使用できます。

下付き文字

下付き文字アイコン

選択したテキストまたはカーソルの後に入力したテキストを下付き文字として書式設定するために使用します。

上付き文字

上付き文字アイコン

選択したテキストまたはカーソルの後に入力したテキストを上付き文字として書式設定するために使用します。

テキストとして貼り付け

「テキストとして貼り付け」アイコン

コピーしたテキストを書式設定のないプレーンテキストとして貼り付けます。

このオプションを選択すると、ウィンドウが開き、テキストを書式設定のないプレーンテキストとして貼り付けた状態を、実際に挿入する前にプレビューできます。続行する場合はチェックマークをタップまたはクリックし、キャンセルする場合は「x」をタップまたはクリックします。

「テキストとして貼り付け」の例

Word から貼り付け

「Word から貼り付け」アイコン

このオプションを選択すると、ウィンドウが開き、書式設定を維持しながらテキストを貼り付けた状態を、実際に挿入する前にプレビューできます。続行する場合はチェックマークをタップまたはクリックし、キャンセルする場合は「x」をタップまたはクリックします。

「Word から貼り付け」の例

ハイパーリンク

ハイパーリンクアイコン

このオプションを使用すれば、選択したテキストをハイパーリンクに変換したり、定義済みのリンクを変更したりできます。このオプションは、テキストが既に選択されている場合にのみ有効で、選択すると、リンクを設定するための追加オプションのウィンドウが開きます。

ハイパーリンクの例

  • パスを入力

    • 「選択ダイアログを開く」を使用して、AEM 内のパスを選択します
    • リンクが AEM 内でない場合は、絶対 URL を入力します
      • 絶対パス以外は、AEM を基準とした相対パスとして解釈されます
  • リンクの説明用代替テキストを入力します

  • リンクの動作を選択します

    • ターゲット
    • 同じタブ
    • 新しいタブ
    • 親フレーム
    • トップフレーム

    リンクを適用する場合はチェックマークをタップまたはクリックし、キャンセルする場合は「x」をタップまたはクリックします。

リンク解除

リンク解除アイコン

選択したテキストに既に適用されているリンクを削除する場合は、このオプションを使用します。このオプションは、リンクが既に選択されている場合にのみ有効です。

検索

検索アイコン

指定した文字列をテキスト内で検索する場合は、このオプションを使用します。このオプションを選択すると、検索オプションを指定するためのウィンドウが開きます。

検索の例

検索するテキストを入力し、「検索」をタップまたはクリックして検索を開始します。キャンセルする場合は、「x」をクリックまたはタップします。大文字と小文字を区別して完全一致検索をおこなう場合は、「大文字小文字を区別して一致」オプションを選択してから検索を開始します。一致する文字列が見つかった場合は、それが強調表示され、検索ダイアログが淡色表示になります。一致する次の文字列を検索するには、淡色表示のダイアログで「検索」ボタンを再度タップまたはクリックします。

検索例

一致する文字列がそれ以上見つからない場合は、メッセージが表示され、テキストの先頭から検索が再開されます。

これ以上出現しない場合の例を検索

置換

置換アイコン

指定した文字列をテキスト内で検索し、一致する文字列を別の文字列に置き換える場合は、このオプションを使用します。このオプションを選択すると、検索および置換オプションを指定するためのウィンドウが開きます。

置換の例

検索する文字列と置換後の文字列を入力します。

  • 検索を開始するには、「検索」をタップまたはクリックします。キャンセルする場合は、「x」をタップまたはクリックします。
  • 大文字と小文字を区別して完全一致検索をおこなう場合は、「大文字小文字を区別して一致」オプションを選択してから検索を開始します。
  • すべてを置換」をタップまたはクリックすると、一致するすべての文字列が一度に置換されます。

一致する文字列が見つかった場合は、それが強調表示され、検索ダイアログが淡色表示になります。一致する次の文字列を検索するには、淡色表示のダイアログで「検索」ボタンを再度タップまたはクリックします。強調表示されている一致文字列を置き換えるには、「置換」ボタンをタップまたはクリックします。なお、「置換」ボタンは、一致する文字列が見つかった場合にのみ有効になります。

検索と置換ダイアログは、「検索」をクリックすると透明になり、「置換」をクリックすると不透明になります。これにより、作成者は、置換されるテキストを確認できます。

メモ

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

テキストを左揃え

左揃えアイコン

テキストを左マージンに揃えます。

テキストを中央揃え

「テキストを中央揃え」アイコン

テキストを中央に揃えます。

テキストを右揃え

右揃えアイコン

テキストを右マージンに揃えます。

箇条書き

箇条書きアイコン

選択したテキストを箇条書きリストとして書式設定するか、カーソルの後に箇条書きリストを挿入するために使用します。

箇条書きリストを終了するには、「箇条書き」ボタンをタップまたはクリックするか、キャリッジリターンを 2 回入力します。

番号付き

番号付きリストアイコン

選択したテキストを番号付きリストとして書式設定するか、カーソルの後に番号付きリストを挿入するために使用します。

番号付きリストを終了するには、「番号付き」ボタンをタップまたはクリックするか、キャリッジリターンを 2 回入力します。

アウトデント

アウトデントアイコン

選択したテキストまたはカーソルの後に入力するテキストのインデントレベルを減らすために使用します。

選択したテキストまたはカーソルの位置が既にインデントされている場合にのみ有効です。

インデント

インデントアイコン

選択したテキストまたはカーソルの後に入力するテキストのインデントレベルを増やすために使用します。

テーブル

テーブルアイコン

テキストにテーブルを挿入するために使用します。このオプションを選択すると、テーブルの詳細を指定するためのウィンドウが開きます。

テーブルの例

  • - テーブルの列数(必須)
  • - テーブルの行数(必須)
  • - テーブルの幅
  • 高さ - テーブルの高さ
  • セル内の余白 - セルコンテンツの周囲の空白
  • セルの間隔 - セル間の空白
  • ボーダー - テーブルの罫線の太さ
    • テーブルの見出しについては次の選択肢があります。
      • 最初の行を使用する
      • 最初の列を使用する
      • 最初の行と最初の列を使用する
      • 見出しを使用しない
  • キャプション - テーブルのキャプション

スペルチェック

スペルチェックアイコン

テキストコンテンツのスペルをチェックするために使用します。スペルミスの可能性がある場合は、赤い破線が該当箇所の下に引かれます。

スペルチェックとスペルチェック辞書のカスタマイズについて詳しくは、リッチテキストエディタープラグインの設定を参照してください。

特殊文字

特殊文字アイコン

テキストに特殊文字を挿入するために使用します。このオプションを選択するとウィンドウが開き、使用可能な文字が表示されます。

特殊文字の例

目的の文字をタップまたはクリックすると、テキストのカーソルの後に文字が挿入されます。複数の文字を挿入できます。「x」をタップまたはクリックすると、選択ウィンドウが閉じます。

ソース編集

ソース編集アイコン

テキストの HTML ソースを表示および変更するために使用します。

ソース編集​アイコンをタップまたはクリックすると、テキストの内容が、書式設定された表示から HTML コードの表示に変わります。このモードでは、他の書式設定オプションはすべて無効になっています。ソース編集​アイコンを再度タップまたはクリックすると、書式設定された表示に戻ります。

注意

生の HTML コードにアクセスする場合は常にそうですが、「ソース編集」オプションを使用する際には注意する必要があります。

ソース編集​で入力した HTML コードはスキャンされて、XSS のリスクがないか確認されます。スクリプトを挿入してもすべて削除され、生成されるページには出現しません。ただし、ソース編集​で入力した HTML コードの形式が正しくない場合は、ページのテンプレートが破損して、予期しない書式設定になったり、生成されるページが使用できなくなるおそれがあります。

メモ

ソース編集​で入力した HTML コードはスキャンされて、XSS のリスクやスクリプトがないか確認され、検出されたものはすべて自動的に削除されます。したがって、実際に保存されたコンテンツは、ソース編集​で入力した内容と異なる可能性があります。そのため、ソース編集​を使用しておこなった変更を保存する場合は、まず、ソース編集​を終了して、テキストを通常のエディターで表示する必要があります。

段落書式

段落書式アイコン

選択したテキストまたはカーソルの後に挿入されるテキストに段落書式を適用するために使用します。このオプションを選択すると、段落形式を選択するためのドロップダウンが開きます。

段落書式の例

インライン編集

テキストコンポーネントはインラインでも編集できますが、スペースの制限により、必ずしもすべての書式設定オプションがインラインで使用できるわけではありません。すべてのオプションを表示するには、フルスクリーンモードに切り替えます。

インライン編集の例

設定と ID

このオプションを使用すると、HTML 内および データレイヤー内のコンポーネントの一意の識別子を制御できます。

  • 空白のままにした場合、一意の ID が自動的に生成されます。生成された ID は結果のページを調べることで確認できます。
  • ID を指定した場合、作者はその ID が一意であることを確認する必要があります。
  • ID を変更すると、CSS、JS、およびデータレイヤーのトラッキングに影響を与える可能性があります。

デザインダイアログ

デザインダイアログでは、コンテンツ作成者が使用できるテキスト書式設定オプションをテンプレート作成者が定義できます。

「プラグイン」タブ

「プラグイン」タブでは、コンテンツ作成者が使用できる様々なテキスト書式設定オプションを有効または無効にします。

特長

デザインダイアログの特長

コンポーネントに対して次の機能を有効または無効にすることができます。

  • プレーンテキストを貼り付け
  • Word から貼り付け
  • 検索と置換
  • スペルチェッカー
  • 挿入された画像の変更オプション
  • HTML ソースの編集

書式設定

デザインダイアログの書式設定

コンポーネントに対して次の書式設定オプションを有効または無効にすることができます。

  • テーブル
  • リスト(箇条書き、数値、インデント、アウトデント)
  • 整列(左、右、中央)
  • 太字、斜体、下線
  • リンク(およびリンク解除)
  • 下付き/上付き文字

段落スタイル

デザインダイアログの段落スタイル

コンポーネントに対して段落スタイルを有効または無効にすることができます。有効にすると、使用できる書式を定義できます。

  • 追加」ボタンをタップまたはクリックすると、新しいスタイルを挿入できます。
  • スタイルのコードと、編集ダイアログに表示される説明を入力します。
  • スタイルを削除するには、「削除」ボタンをタップまたはクリックします。
  • 書式の順序を並べ替えるには、ハンドルをタップまたはクリックしてドラッグします。

特殊文字

デザインダイアログの特殊文字

コンポーネントに対して、特殊文字を挿入するオプションを有効または無効にすることができます。有効にすると、使用できる文字を定義できます。

  • 追加」ボタンをタップまたはクリックすると、新しい文字を挿入できます。
  • 文字の HTML コードと、編集ダイアログに表示される説明を入力します。
  • 文字を削除するには、「削除」ボタンをタップまたはクリックします。
  • 文字の順序を並べ替えるには、ハンドルをタップまたはクリックしてドラッグします。

「スタイル」タブ

テキストコンポーネントでは、AEM スタイルシステムをサポートしています。

このページ