Configurar o editor de rich text configure-the-rich-text-editor

O Editor de Rich Text (RTE) fornece aos autores uma ampla variedade de funcionalidades para editar seu conteúdo de texto. Os ícones, caixas de seleção, barra de ferramentas e menus são fornecidos para uma experiência de edição de texto WYSIWYG.

Para saber como usar os recursos do RTE para criação, consulte Usar o editor de rich text para criação. O RTE pode ser configurado para ativar, desativar e estender os recursos disponíveis nos componentes de criação. O workflow a seguir ilustra uma ordem recomendada de conclusão das tarefas de configuração do RTE no Experience Manager.

Figura: Fluxo de trabalho típico para configurar o Editor de Rich Text

Entender a interface habilitada para toque e a interface clássica understand-touch-enabled-ui-and-classic-ui

A interface de usuário habilitada para toque é a interface de usuário padrão para AEM. O Adobe apresentou a interface do usuário de toque com design responsivo para o ambiente de criação, na versão 5.6. A interface do usuário de toque foi projetada para dispositivos de toque e desktop. A interface do usuário é consideravelmente diferente da interface clássica original.

Figura: Barra de ferramentas do Editor de Rich Text na interface habilitada para toque

Figura: Barra de ferramentas do Editor de Rich Text na interface clássica

Vários modos de edição editingmodes

Os autores podem criar e editar conteúdo textual no AEM usando os diferentes modos de componentes. As opções da barra de ferramentas para criação e formatação de conteúdo e a experiência do usuário de componentes habilitados para RTE em diferentes modos de edição variam com base nas configurações de RTE.

Edição em linha inline-editing

Quando aberto (com um toque/clique duplo lento), o conteúdo pode ser editado na página. Uma barra de ferramentas compacta com opções básicas é apresentada.

Figura: Edição em linha com a barra de ferramentas básica na interface do usuário habilitada para toque

Na interface clássica, um clique duplo lento no componente permite a edição em linha e um contorno laranja destaca o conteúdo. Se o Localizador de conteúdo estiver aberto, uma barra de ferramentas com as opções disponíveis de formatação do RTE será exibida na parte superior da janela. Se o Localizador de conteúdo não estiver aberto, as opções de formatação não serão exibidas e você poderá fazer apenas edições básicas de texto.

Edição em de tela cheia full-screen-editing

AEM componentes podem ser abertos na visualização em tela cheia, que oculta o conteúdo da página e ocupa a tela disponível. Considere a edição em tela cheia de uma versão detalhada da edição em linha, pois oferece as opções de edição mais abrangentes. Ele pode ser aberto clicando em , na barra de ferramentas compacta, ao usar o modo de edição em linha.

O modo de tela cheia da caixa de diálogo fornece uma barra de ferramentas de RTE detalhada e as opções e os componentes disponíveis no modo de diálogo. É aplicável somente para uma caixa de diálogo que contém o RTE juntamente com outros componentes.

Figura: A barra de ferramentas do RTE detalhada ao editar no modo de tela cheia na interface do usuário habilitada para toque

Edição de caixa de diálogo dialog-editing

Quando um componente é clicado duas vezes na interface clássica, uma caixa de diálogo é aberta para edição do conteúdo. A caixa de diálogo é aberta na parte superior da página existente. Em alguns cenários específicos, a caixa de diálogo é aberta como uma janela pop-up. Por exemplo, quando um componente de Texto faz parte de uma coluna em um layout de página de várias colunas e a área disponível para a caixa de diálogo é menor.

Figura: Modo de edição de caixa de diálogo na interface habilitada para toque

Figura: Caixa de diálogo na interface clássica que contém a barra de ferramentas detalhada para edição

Sobre plug-ins do RTE e os recursos associados aboutplugins

A funcionalidade é disponibilizada por meio de uma série de plug-ins, cada um com:

Os recursos básicos do RTE são ativados ou desativados pelo valor do features em um nó específico do plug-in adequado.

A tabela a seguir lista os plug-ins atuais, mostrando:

Entender os caminhos e os locais de configuração understand-the-configuration-paths-and-locations

O modo de edição do RTE (e a interface do usuário) que você fornece para seus autores e decide o local para os detalhes de configuração quando ativação dos plug-ins do RTE:

Configure as seguintes propriedades que se aplicam somente ao modo de edição da caixa de diálogo na interface de toque:

Quando o RTE é usado na caixa de diálogo habilitada para toque, defina a propriedade useFixedInlineToolbar como true é obrigatório para evitar problemas.

Personalização na edição do local customizing-in-place-editing

Você pode definir em qual seletor de HTML o editor de texto é iniciado configurando as seguintes propriedades:

A propriedade correspondente para o modo de diálogo é name.

Ative as funcionalidades do RTE ativando plug-ins enable-rte-functionalities-by-activating-plug-ins

As funcionalidades do RTE são disponibilizadas por meio de uma série de plug-ins, cada um com a propriedade features . Você pode configurar a propriedade features para ativar ou desativar os vários recursos de cada plug-in.

Para obter configurações detalhadas dos plug-ins do RTE, consulte como ativar e configurar os plug-ins do RTE.

Baixe essa configuração de amostra para entender como configurar o RTE. Neste pacote, todos os recursos estão ativados.

Obter arquivo

Configurar a barra de ferramentas do RTE dialogfullscreen

AEM permite configurar a interface do usuário para o Editor de RichText de forma diferente para os diferentes modos de edição. As configurações padrão são fornecidas abaixo. Você pode substituir esses padrões com base em seus requisitos.

Para obter a melhor experiência de criação:

<uiSettings jcr:primaryType="nt:unstructured">
  <cui jcr:primaryType="nt:unstructured">
    <inline
      jcr:primaryType="nt:unstructured"
      toolbar="[format#bold,format#italic,format#underline,#justify,#lists,links#modifylink,links#unlink,#paraformat]">
      <popovers jcr:primaryType="nt:unstructured">
        <justify
          jcr:primaryType="nt:unstructured"
          items="[justify#justifyleft,justify#justifycenter,justify#justifyright]"
          ref="justify"/>
        <lists
          jcr:primaryType="nt:unstructured"
          items="[lists#unordered,lists#ordered,lists#outdent,lists#indent]"
          ref="lists"/>
        <paraformat
          jcr:primaryType="nt:unstructured"
          items="paraformat:getFormats:paraformat-pulldown"
          ref="paraformat"/>
      </popovers>
    </inline>
    <dialogFullScreen
      jcr:primaryType="nt:unstructured"
      toolbar="[format#bold,format#italic,format#underline,justify#justifyleft,justify#justifycenter,justify#justifyright,lists#unordered,lists#ordered,lists#outdent,lists#indent,links#modifylink,links#unlink,table#createoredit,#paraformat,image#imageProps]">
      <popovers jcr:primaryType="nt:unstructured">
        <paraformat
          jcr:primaryType="nt:unstructured"
          items="paraformat:getFormats:paraformat-pulldown"
          ref="paraformat"/>
      </popovers>
    </dialogFullScreen>
    <tableEditOptions
      jcr:primaryType="nt:unstructured"
      toolbar="[table#insertcolumn-before,table#insertcolumn-after,table#removecolumn,-,table#insertrow-before,table#insertrow-after,table#removerow,-,table#mergecells-right,table#mergecells-down,table#mergecells,table#splitcell-horizontal,table#splitcell-vertical,-,table#selectrow,table#selectcolumn,-,table#ensureparagraph,-,table#modifytableandcell,table#removetable,-,undo#undo,undo#redo,-,table#exitTableEditing,-]">
    </tableEditOptions>
  </cui>
</uiSettings>

Diferentes configurações da interface do usuário são usadas para o modo em linha e o modo de tela cheia. A propriedade da barra de ferramentas é usada para especificar os botões da barra de ferramentas. Por exemplo, se o botão for um recurso (por exemplo, Bold), é especificado como PluginName#FeatureName (por exemplo, links#modifylink). Se o botão for um portátil (contendo alguns recursos de um plug-in), ele será especificado como #PluginName (por exemplo, #format). Separadores ( | ) entre um grupo de botões pode ser especificado com '-'.

O nó pop-up no modo em linha ou em tela cheia contém uma lista dos recursos que estão sendo usados. Cada nó filho sob o popovers o nó é nomeado após o plug-in (por exemplo, format). Tem uma propriedade items contendo uma lista de recursos do plug-in (por exemplo, format#bold).

Configurações da interface do usuário do RTE e políticas de conteúdo rtecontentpolicies

Os administradores podem controlar as opções de RTE usando políticas de conteúdo, em vez de fazer a configuração conforme descrito acima. As políticas de conteúdo definem as propriedades de design de um componente, quando usadas como parte de um modelo editável. Por exemplo, se um componente de texto que usa o RTE for usado com um modelo editável, a política de conteúdo poderá definir que a opção em negrito esteja disponível e algumas opções de formatação de parágrafo estarão disponíveis. As políticas de conteúdo são reutilizáveis e podem ser aplicadas em vários modelos.

AEM 6.4 do Service Pack 3 em diante, as opções disponíveis no RTE fluem downstream das configurações da interface do usuário para as políticas de conteúdo.

Como exemplo, você pode ver a variável Documentação do componente principal de texto.

Personalizar mapeamento entre ícones e comandos da barra de ferramentas iconstoolbar

Você pode personalizar o mapeamento entre os ícones Corais exibidos na barra de ferramentas do RTE e os comandos disponíveis. Não é possível usar outros ícones além dos ícones Coral.

Abaixo está um trecho de amostra para mapear o comando em negrito para o ícone Coral chamado textItalic.

<text jcr:primaryType="nt:unstructured" sling:resourceType="cq/gui/components/authoring/dialog/richtext" name="./text" useFixedInlineToolbar="{Boolean}true">
    <rtePlugins jcr:primaryType="nt:unstructured">
        <format jcr:primaryType="nt:unstructured" features="bold,italic"/>
    </rtePlugins>
    <uiSettings jcr:primaryType="nt:unstructured">
        <cui jcr:primaryType="nt:unstructured">
            <inline jcr:primaryType="nt:unstructured"
                toolbar="[format#bold,format#italic,format#underline,links#modifylink,links#unlink]">
            </inline>
            <icons jcr:primaryType="nt:unstructured">
                <bold jcr:primaryType="nt:unstructured"
                    command="format#bold"
                    icon="textItalic"/>
            </icons>
        </cui>
    </uiSettings>
</text>

Alternar para Editor de Rich Text da CoralUI 2 switch-to-coralui-rich-text-editor

Em uma página, você pode incluir a clientlib do RTE CoralUI 2 ou a clientlib do RTE CoralUI 3. Por padrão, o Editor de Rich Text inclui a clientlib do RTE CoralUI 3. Para alternar para o RTE CoralUI 2, execute as seguintes etapas.

Informações adicionais further-information

Para obter mais informações sobre como configurar o RTE, consulte o API do widget AEM referência.

Especificamente, para ver os plug-ins e as opções relacionadas disponíveis:

As opções acima podem ser usadas para estender e personalizar seu próprio RTE. Por exemplo, para listar as âncoras disponíveis na página ao criar um link, você pode fornecer sua própria implementação da variável LinkPlugin.

Limitações conhecidas known-limitations

AEM recurso RTE tem as seguintes limitações: