複数のインプレースエディターの設定

Adobe Experience Managerでリッチテキストエディタを設定して、複数のインプレースエディタを使用できます。 このような設定にすると、適切なコンテンツを選択して、適切なエディターを開くことができます。

特定のインプレイスエディタ

複数のエディターを設定

複数のインプレースエディターを有効にするには、cq:InplaceEditingConfig ノードタイプの構造を cq:ChildEditorConfig ノードタイプの定義で強化します。

次に例を示します。

   /**
       * Configures in-place editing of a component.
       *
       * @prop active true to activate in-place editing for the component.
       * @prop editorType ID of in-place editor to use.
       * @prop cq:childEditors collection of {@link cq:ChildEditorConfig} nodes.
       * @prop configPath path to editor's config (optional).
       * @node config editor's config (used if no configPath is specified; optional).
     */
    [cq:InplaceEditingConfig] > nt:unstructured
      - active (boolean)
      - editorType (string)
      + cq:childEditors (nt:base) = nt:unstructured
      - configPath (string)
      + config (nt:unstructured) = nt:unstructured

    /**
      * Configures one child editor for a sub-component. The name of the this node is
      * used as DD ID.
      *
      * @prop type type of the inline editor. For example, ["image"].
      * @prop title Title of the inline editor.
      * @prop icon Icon to represent the inline editor.
    */
    [cq:ChildEditorConfig] > nt:unstructured
      orderable
      - type (string)
      - title (string)

複数のエディターを設定するには、次の手順に従います。

  1. ノードcq:inplaceEditing (タイプcq:InplaceEditingConfigの)で、次のプロパティを定義します。

    • 名前:editorType
    • 型:String
    • 値:hybrid
  2. このノードの下で、ノードを作成します。

    • 名前:cq:ChildEditors
    • 型:nt:unstructured
  3. cq:childEditorsノードの下に、各インプレースエディタのノードを作成します。

    • 名前:各ノードの名前は、それが表すプロパティの名前で、ドロップターゲットと同様に、 例えば、imagetext です。
    • 型:cq:ChildEditorConfig
    メモ

    定義されたドロップターゲットと子エディターの間には相関関係があります。cq:ChildEditorConfigノードの名前はドロップターゲットIDと見なされ、選択した子エディターのパラメーターとして使用されます。 編集可能サブ領域にドロップターゲットがない場合(例えば、テキストコンポーネント内など)、子エディターの名前は、対応する編集可能領域を識別するIDと見なされます。

  4. これらの各ノード(cq:ChildEditorConfig)で、次のプロパティを定義します。

    • 名前: type.

    • 値:登録インプレースエディタの名前(例:imagetext)。

    • 名前: title.

    • 値:使用可能なエディターのコンポーネント選択リストに表示されるタイトル。 例えば、ImageText です。

リッチテキストエディタの追加設定

複数のリッチテキストエディター(RTE)の設定は、個々の RTE インスタンスをそれぞれ別個に設定できるので、やや異なります。詳しくは、リッチテキストエディターの設定を参照してください。 複数のRTEに各インプレースRTEの設定を作成させる場合。 Adobeでは、cq:InplaceEditingConfigの下に新しい設定ノードを作成することを推奨します。各RTEは異なる設定を持つことができます。 新しいノードで、個々のRTE設定を作成します。

    texttext
        cq:dialog
        cq:editConfig
            cq:inplaceEditing
                cq:childEditors
                    someconfig
                        text1
                            rtePlugins
                        text2
                            rtePlugins
メモ

ただし、RTE の場合、configPath プロパティがサポートされるのは、コンポーネント内のテキストエディター(編集可能なサブエリア)のインスタンスが 1 つだけのときです。このconfigPathの使用は、コンポーネントの古いユーザインターフェイスダイアログとの後方互換性をサポートするために提供されます。

注意

RTE 設定ノードの名前を config にしないでください。それ以外の場合は、RTE設定は管理者のみが使用でき、グループcontent-author内のユーザーは使用できません。

コードサンプル

このページのコードは、GitHub🔗のaem-authoring-hybridededitorsプロジェクトにあります。 完全なプロジェクトは、ZIPアーカイブとしてダウンロードできます。

インプレ追加ースエディタ

インプレースエディタの追加に関する一般的な情報については、ページオーサリングのカスタマイズのドキュメントを参照してください。

このページ

Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now