Show Menu
TÓPICOS×

Configuração de vários editores no local

É possível configurar seu componente para que ele tenha vários editores no local na interface habilitada para toque.
Quando configurado, você pode selecionar o conteúdo apropriado e abrir o editor apropriado. Por exemplo:

Configuração de vários editores

Para habilitar vários editores no local, a estrutura de um tipo de cq:InplaceEditingConfig nó foi aprimorada com a definição do tipo de cq:ChildEditorConfig nó.
Por exemplo:
   /**
       * 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)

Para configurar vários editores:
  1. No nó cq:inplaceEditing (do tipo cq:InplaceEditingConfig ), defina a propriedade:
    • Nome: editorType
    • Tipo: String
    • Valor: hybrid
  2. Neste nó, crie um novo nó:
    • Nome: cq:ChildEditors
    • Tipo: nt:unstructured
  3. No cq:childEditors nó, crie um novo nó para cada editor local:
    • Nome: o nome de cada nó deve ser o nome da propriedade que ele representa (assim como os destinos de soltar). Por exemplo, image , text .
    • Tipo: cq: ChildEditorConfig
    Há uma correlação entre os destinos de soltar definidos e os editores filhos. O nome do cq:ChildEditorConfig nó será considerado como a ID de destino de soltar, para uso como parâmetro para o editor filho selecionado. Se a subárea editável não tiver um destino de soltar (por exemplo, como com 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 ) define as propriedades:
    • Nome: type
    • Valor: Nome do editor no local registrado; por exemplo, image , text
    • Nome: title
    • Valor: o título que você deseja exibir na lista de seleção de componentes (de editores disponíveis); por exemplo, Image , 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 mais detalhes, consulte Configuração do Editor de Rich Text.
Para ter vários RTEs, você precisa de uma configuração para cada RTE no local:
  • Em cq:InplaceEditingConfig definir um config nó.
    • No config nó, defina cada configuração individual do RTE.
    texttext
        cq:dialog
        cq:editConfig
            cq:inplaceEditing
                cq:childEditors
                    config
                        text1
                            rtePlugins
                        text2
                            rtePlugins

A prática recomendada é definir o config nó em cq:InplaceEditingConfig que cada RTE individual pode ter uma configuração diferente.
No entanto, para o RTE, a configPath propriedade é suportada quando há apenas uma instância do editor de texto (subárea editável) no componente. Esse uso do é fornecido para oferecer suporte à compatibilidade com versões anteriores das caixas de diálogo mais antigas do componente. configPath

Amostras de código

CÓDIGO NO GITHUB
Você pode encontrar o código desta página no GitHub

Adicionar um editor local

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