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

検索
Experience Manager 6.3 Sites 開発ユーザーガイド
対象アプリケーション: Experience Manager 6.3 Sites

某些 Creative Cloud 应用程序、服务和功能在中国不可用。

現在表示中:

タッチ操作向け UI では、複数のインプレースエディターが含まれるようにコンポーネントを設定できます。

このような設定にすると、適切なコンテンツを選択して、適切なエディターを開くことができます。次に例を示します。

chlimage_1

複数のエディターの設定

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

次に例を示します。

   /**
       * Configures inplace editing of a component.
       *
       * @prop active true to activate inplace editing for the component
       * @prop editorType ID of inplace 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 subcomponent. The name of the this node will
      * be used as DD id.
      *
      * @prop type type of the inline editor. eg: ["image"]
      * @prop title totle od the inline editor
      * @prop icon icon to represent the inline editor
    */
    [cq:ChildEditorConfig] > nt:unstructured
      orderable
      - type (string)
      - title (string)

複数のエディターの設定手順

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

    • 名前：editorType
    • タイプ：String
    • 値：hybrid

  2. このノードの下に、新しいノードを作成します。

    • 名前：cq:ChildEditors
    • タイプ：nt:unstructured

  3. cq:childEditors ノードの下に、インプレースエディターごとに新しいノードを作成します。

    • 名前：各ノードの名前は、そのノードが（ドロップターゲットのように）表すプロパティの名前にしてください。例えば、image、text などです。
    • タイプ：cq:ChildEditorConfig

    注意：

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

  4.  

    これらのノード（cq:ChildEditorConfig）のそれぞれに次のプロパティを定義します。

    • 名前：type
    • 値：登録されているインプレースエディターの名前（image、text など）
    • 名前：title
    • 値：（使用可能なエディターの）コンポーネント選択リストに表示されるタイトル（画像、テキストなど）

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

複数のリッチテキストエディター（RTE）の設定は、個々の RTE インスタンスをそれぞれ別個に設定できるので、やや異なります。 

注意：

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

複数の RTE を含めるには、インプレース RTE ごとに次のような設定が必要です。

  • cq:InplaceEditingConfig の下に、config ノードを定義します。
    • config ノードの下に、個々の RTE 設定を定義します。
    texttext
        cq:dialog
        cq:editConfig
            cq:inplaceEditing
                cq:childEditors
                    config
                        text1
                            rtePlugins
                        text2
                            rtePlugins

注意：

各 RTE はそれぞれ異なる設定を持つことができるので、推奨されるベストプラクティスは、config ノードを cq:InplaceEditingConfig の下に定義することです。

ただし、RTE の場合、configPath プロパティがサポートされるのは、コンポーネント内のテキストエディター（編集可能なサブエリア）のインスタンスが 1 つだけのときです。この configPath のサポートは、コンポーネントの古い UI ダイアログとの下位互換性のために提供されています。

コードサンプル

GitHub のコード

このページのコードは GitHub にあります

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

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