Configurar vários editores no local

Você pode configurar o Editor de Rich Text no Adobe Experience Manager para que ele tenha vários editores no local. Quando configurado, você pode selecionar o conteúdo apropriado e abrir o editor apropriado.

Um editor local específico

Configurar vários editores

Para habilitar vários editores no local, a estrutura de um tipo de nó cq:InplaceEditingConfig foi aprimorada com a definição do tipo de nó cq:ChildEditorConfig.

Por exemplo:

   /**
       * 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)

Para configurar vários editores, siga estas etapas:

  1. No nó cq:inplaceEditing (do tipo cq:InplaceEditingConfig), defina as seguintes propriedades:

    • Nome:editorType
    • Tipo: String
    • Valor: hybrid
  2. Neste nó, crie um nó:

    • Nome: cq:ChildEditors
    • Tipo: nt:unstructured
  3. No nó cq:childEditors, crie um nó para cada editor local:

    • Nome: O nome de cada nó é o nome da propriedade que ele representa, como é o caso dos públicos alvos descartados. Por exemplo, image e text.
    • Tipo: cq:ChildEditorConfig
    OBSERVAÇÃO

    Há uma correlação entre os públicos alvos de soltar definidos e os editores filhos. O nome do nó cq:ChildEditorConfig é considerado como a ID do público alvo de soltar, para uso como parâmetro para o editor filho selecionado. Se a subárea editável não tiver um público alvo de soltar, por exemplo, em um componente de texto, o nome do editor filho ainda será considerado como uma ID para identificar a área editável correspondente.

  4. Em cada um desses nós (cq:ChildEditorConfig), defina as propriedades:

    • Nome: type.

    • Valor: O nome do editor no local registrado; por exemplo, image e text.

    • Nome: title.

    • Valor: O título exibido na lista de seleção de componentes dos editores disponíveis. Por exemplo, Image e Text.

Configuração adicional para editores de Rich Text

A configuração para vários editores de Rich Text é um pouco diferente, pois você pode configurar cada instância individual do RTE separadamente. Para obter detalhes, consulte configurar o Editor de Rich Text. Para que vários RTEs criem uma configuração para cada RTE no local. O Adobe recomenda criar o novo nó de configuração em cq:InplaceEditingConfig, já que cada RTE individual pode ter uma configuração diferente. No novo nó, crie cada configuração individual do RTE.

    texttext
        cq:dialog
        cq:editConfig
            cq:inplaceEditing
                cq:childEditors
                    someconfig
                        text1
                            rtePlugins
                        text2
                            rtePlugins
OBSERVAÇÃO

No entanto, para o RTE, a propriedade configPath é suportada quando há apenas uma instância do editor de texto (subárea editável) no componente. Esse uso de configPath é fornecido para oferecer suporte à compatibilidade com versões anteriores das caixas de diálogo da interface do usuário mais antigas do componente.

CUIDADO

Não nomeie o nó de configuração RTE como config. Caso contrário, as configurações do RTE estarão disponíveis somente para os administradores e não para os usuários no grupo content-author.

Amostras de código

Você pode encontrar o código desta página no projeto aem-authoring-hybrideditors no GitHub. Você pode baixar o projeto completo como um arquivo ZIP.

Adicionar um editor no local

Para obter informações gerais sobre como adicionar um editor no local, consulte o documento personalizar criação de página.

Nesta página

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
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