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. Í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 fluxo de trabalho a seguir ilustra uma ordem recomendada de conclusão das tarefas de configuração do RTE no Experience Manager.

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

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

Entenda a interface habilitada para toque e a interface clássica

A interface habilitada para toque é a interface padrão para AEM. O Adobe introduziu a interface do usuário para toque com design responsivo para criação de ambientes, 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.

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

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

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

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

Vários modos de edição

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 dos componentes habilitados para RTE em diferentes modos de edição variam com base nas configurações do RTE.

Modo de edição Área de edição Recursos recomendados a serem ativados Interface do usuário de toque Interface do usuário clássica
Inline Edição no local para edições rápidas e secundárias; Formatar sem abrir uma caixa de diálogo Recursos mínimos do RTE S S
RTE tela cheia Cobre a página inteira Todos os recursos RTE necessários S N
Caixa de diálogo Caixa de diálogo sobre o conteúdo da página, mas não cobre a página inteira Todos os recursos do RTE necessários na interface clássica; habilite criteriosamente os recursos na interface do usuário de toque S S
Tela cheia da caixa de diálogo Igual ao modo de tela cheia; contém campos da caixa de diálogo ao lado do RTE Todos os recursos RTE necessários S N
Observação

O recurso de edição de origem não está disponível no modo de edição em linha na interface habilitada para toque. Não é possível arrastar imagens no modo de tela cheia. Todos os outros recursos funcionam em todos os modos.

Edição em linha

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

Edição em linha com barra de ferramentas básica na interface habilitada para toque

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

Na interface clássica, um clique lento em duplo 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 de formatação RTE disponíveis 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ê só poderá fazer edições de texto básicas.

Edição em de tela cheia

AEM componentes podem ser abertos na visualização de 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, já que ela oferta mais opções de edição. Para abri-lo, clique em rte_fullscreen, 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 RTE detalhada e as opções e os componentes que estão disponíveis no modo de diálogo. É aplicável somente para uma caixa de diálogo que contém o RTE junto com outros componentes.

A barra de ferramentas RTE detalhada ao editar no modo de tela cheia na interface habilitada para toque

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

Edição de diálogo

Quando um componente é clicado em duplo 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.

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

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

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

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

Sobre plug-ins RTE e os recursos associados

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

  • Uma features propriedade:

    • Isso é usado para ativar ou desativar a funcionalidade básica desse plug-in.
    • Isso pode ser configurado usando um procedimento padronizado.
  • Quando apropriado, mais propriedades e opções que exigem configuração especializada.

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

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

  • IDs de plug-in com um link para a documentação da API. A ID é usada como o nome do nó ao ativar um plug-in.
  • Valores permitidos para a features propriedade.
  • Uma descrição da funcionalidade fornecida pelo plug-in.
ID do plug-in feições Descrição
editar copiar colar - padrão colar - texto simples colar-pasta-pasta-wordhtml Corte, copie e, os três modosde colagem.
findreplace localizar substituição Localize e substitua.
format negrito itálico sublinhado Formataçãode texto básica.
imagem imagem Suporte básico a imagens (arraste do conteúdo ou do Localizador de conteúdo). Dependendo do navegador, o suporte tem comportamentos diferentes para autores
teclas Para definir esse valor, consulte o tamanho daguia.
justify justificativa justificativa justificativa Alinhamento de parágrafo.
links modiylink desvincular âncora Hiperlinks e âncoras.
listas recuo não ordenado recuado pedido Este plug-in controla tanto o recuo quanto o lista; incluindo listas aninhadas.
miscelânea sourceedit de especialistas Ferramentas diversas permitem que os autores digitem caracteres especiais ou editem a fonte HTML. Além disso, você pode adicionar uma gama completa de caracteres especiais se desejar definir sua própria lista.
Paraformat paraformat Os formatos de parágrafo padrão são Parágrafo, Cabeçalho 1, Cabeçalho 2 e Cabeçalho 3 (<p>, <h1>, <h2>e <h3>). É possível adicionar mais formatos de parágrafo ou estender a lista.
verificação ortográfica checktext Verificador ortográficocom reconhecimento de idioma.
estilos estilos Suporte para estilização usando uma classe CSS. Adicione novos estilos de texto se desejar adicionar (ou estender) seu próprio intervalo de estilos para uso com texto.
subsobrescrito sobrescrito subscrito Extensões para os formatos básicos, adicionando sub e super scripts.
tabela tabela removível inserir removerow inserir coluna removecolumn cellprops mergecells splitcell seletoroselecionar colunas Consulte configurar estilosde tabela, se desejar adicionar seus próprios estilos para tabelas inteiras ou células individuais.
desfazer desfazer refazer Tamanho do histórico das operações desfazer e refazer .
Observação

O plug-in de tela cheia não é suportado no modo de diálogo. Use a configuração dialogFullScreen para configurar a barra de ferramentas para o modo de tela cheia.

Entenda os caminhos e locais de configuração

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

Modo de edição Localização para a interface de toque Localização para a interface clássica
Inline cq:editConfig/cq:inplaceEditing cq:editConfig/cq:inplaceEditing
Tela cheia cq:editConfig/cq:inplaceEditing Não aplicável
Caixa de diálogo cq:dialog dialog
Caixa de diálogo Tela cheia cq:dialog Não aplicável
Observação

Não nomeie o nó cq:inplaceEditing como config. No cq:inplaceEditing nó, defina as seguintes propriedades:

  • Nome: configPath
  • Tipo: String
  • Valor: caminho do nó que contém a configuração real

Não nomeie o nó de configuração RTE como config. Caso contrário, as configurações do RTE terão efeito apenas para os administradores e não para os usuários do grupo content-author.

Configure as seguintes propriedades que se aplicam no modo de edição de Diálogo somente na interface de usuário de toque:

  • useFixedInlineToolbar: Defina essa propriedade Booliana definida no nó RTE (um com sling:resourceType= cq/gui/components/authoring/dialog/richtext) como True, para que a barra de ferramentas RTE seja corrigida em vez de flutuante.

    Quando essa propriedade é verdadeira, a edição de Richtext é, por padrão, iniciada no evento "base-contentloaded".

    Para evitar isso, defina a propriedade customStart como Truee dispare o evento 'start de taxa' para a edição do RTE de start. Quando essa propriedade for 'true', o comportamento padrão, start de taxa ao clicar, não funcionará.

  • customStart: Defina essa propriedade Booliana definida no nó RTE como True, para controlar quando start o RTE acionando o evento rte-start.

  • rte-start: Acionar esse evento no RTE, quando contenteditable-div a edição do ERT do start for ativada. Isso funciona somente se customStart tiver sido definido como verdadeiro.

Quando o RTE é usado na caixa de diálogo habilitada para toque, a definição da propriedade useFixedInlineToolbar como true é obrigatória para evitar problemas.

Personalização no local da edição

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

  • editElementQuery - Definida em cq:InplaceEditingConfig, essa propriedade é usada para especificar um seletor do elemento HTML no qual a edição em linha do Componente de texto será iniciada. Se não for especificado, a edição em linha será iniciada diretamente no HTML do componente de texto.
  • textPropertyName - Definida em cq:InplaceEditingConfig, essa propriedade é usada para especificar o nome da propriedade que será salva no nó de conteúdo no qual o valor HTML do componente de texto será mantido após a edição em linha.

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

Ativar funcionalidades do RTE ativando 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 RTE, consulte como ativar e configurar os plug-insRTE.

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

Obter arquivo

Observação

O componente de texto Componentes principais permite que os editores de modelo configurem muitos plug-ins RTE na interface do usuário como políticas de conteúdo, eliminando a necessidade de configuração técnica. As políticas de conteúdo podem funcionar com configurações da interface do usuário do RTE, conforme descrito. Para obter mais informações, consulte as configurações da interface do usuário do RTE e as políticasde conteúdo, Criar modelosde página e a documentação do desenvolvedor dos Componentesprincipais.

Observação

Para fins de referência, os componentes de Texto padrão (fornecidos como parte de uma instalação padrão) podem ser encontrados em:

  • /libs/wcm/foundation/components/text
  • /libs/foundation/components/text

Para criar seu próprio componente de texto, copie o componente acima em vez de editar esses componentes.

Configurar a barra de ferramentas RTE

AEM permite que você configure a interface para o Editor de RichText de forma diferente para os diferentes modos de edição. As configurações padrão são fornecidas abaixo. É possível substituir esses padrões com base em seus requisitos.

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

  • Em uma caixa de diálogo flutuante, ative apenas os plug-ins que não têm um pop-up, pois a caixa de diálogo flutuante é menor em tamanho.
  • Na caixa de diálogo de tela cheia, ative todos os plug-ins necessários, mesmo os plug-ins com pop-up maior, como o Paste plug-in. Use a dialogFullScreen configuração descrita abaixo.
<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 de interface são usadas para o modo em linha e para 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), ele será especificado como PluginName#FeatureName (por exemplo, links#modifylink). Se o botão for um pop-up (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 das opções que estão sendo usadas. Cada nó filho sob o popovers nó é nomeado após o plug-in (por exemplo, format). Ela tem uma propriedade items que contém uma lista de recursos do plug-in (por exemplo, format#bold).

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

Os administradores podem controlar as opções de RTE usando políticas de conteúdo, digamos, 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 para jusante das configurações da interface do usuário para as políticas de conteúdo.

  • As configurações da interface do usuário definem quais opções estão disponíveis para as políticas de conteúdo.
  • Se a configuração da interface do usuário do RTE tiver sido removida ou não ativar um item, a política de conteúdo não poderá configurá-lo.
  • Um autor tem acesso apenas à funcionalidade que é disponibilizada pelas configurações da interface do usuário e pelas políticas de conteúdo.

Como exemplo, você pode ver a documentação do Componente principal detexto.

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

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

  1. Crie um nó com o nome icons em uiSettings/cui.

  2. Crie nós para ícones individuais abaixo dele.

  3. Em cada um dos nós de ícone individuais, especifique um ícone Coral e um comando para mapear para o ícone.

Abaixo está um trecho de amostra para mapear o comando 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 o Editor de Rich Text CoralUI 2

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 RTE CoralUI 3. Para alternar para o RTE CoralUI 2, execute as seguintes etapas.

Observação

O Adobe não recomenda a troca como uma prática recomendada. Alternar para RTE CoralUI 2 como último recurso. Os plug-ins personalizados para o RTE CoralUI 2 funcionam com o RTE CoralUI 3 se os plug-ins não dependerem dos internos do RTE, como classes. Se você estiver usando plug-ins personalizados para o RTE CoralUI 3, use a rte.coralui3 biblioteca.

  1. Sobreponha o nó /libs/cq/gui/components/authoring/editors/clientlibs/core em /apps, e faça o seguinte:

    • Replace rte.coralui3 with rte.coralui2 for the dependencies property.
    • Replace cq.authoring.editor.core.inlineediting.rte.coralui3 with cq.authoring.editor.core.inlineediting.rte.coralui2 for the embed property.
    • Replace cq.authoring.rte.coralui3 with cq.authoring.rte.coralui2 for the embed property.
  2. Sobreponha os nós /libs/cq/gui/components/authoring/dialog/richtext/clientlibs/rte/coralui3 e /libs/cq/gui/components/authoring/dialog/richtext/clientlibs/rte/coralui2 em /apps.

    Remova a categoria cq.authoring.dialog de /apps/cq/gui/components/authoring/dialog/richtext/clientlibs/rte/coralui3 e adicione-a a /apps/cq/gui/components/authoring/dialog/richtext/clientlibs/rte/coralui2.

  3. Altere qualquer outra dependência que esteja sendo incluída na página de rte.coralui3 para rte.coralui2. Por exemplo, depois de sobrepor o nó /libs/mcm/campaign/components/touch-ui/clientlibs/rte em /apps, altere qualquer dependência dele de rte.coralui3 para rte.coralui2.

  4. Sobreponha o nó cq/ui/widgets em /apps. Substitua a dependência cq.rte no nó /apps/cq/ui/widgets por cq.coralui2.rte.

Observação

O RTE CoralUI 2 usa modelos handlebars para caixas de diálogo de plug-in. Portanto, a clientlib do RTE CoralUI 2 tinha uma dependência na clientlib handlebars. O RTE CoralUI 3 não usa modelos handlebars e não tem nenhuma dependência associada. Se os plug-ins personalizados usam modelos handlebars, inclua a clientlib handlebars na sua página da Web.

Informações adicionais

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

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

  • O componente CQ.form.RichText fornece um campo de formulário para editar informações de texto estilizado (rich text). Para saber todos os parâmetros disponíveis para o formulário Rich Text, consulte as Opções de configuração.

  • O componente RichText fornece uma ampla variedade de funcionalidades usando plug-ins listados em CQ.form.rte.plugins.Plugin. Para cada plug-in:

    • Consulte os Recursos para obter detalhes sobre a funcionalidade que pode ser ativada (ou desativada).
    • Consulte as Opções de configuração para ver todos os parâmetros disponíveis para obter uma configuração detalhada do plug-in adequado.
  • Mais informações sobre Regras HTML para links também estão disponíveis.

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

Limitações conhecidas

AEM capacidade RTE tem as seguintes limitações:

  • Os recursos do RTE são suportados apenas nas caixas de diálogo AEM componente. O RTE não é compatível com assistentes ou formulários básicos, como Propriedades da página e Andaime na interface habilitada para toque.

  • AEM não funciona em dispositivos híbridos.

  • Não nomeie o nó de configuração RTE config. Caso contrário, a configuração do RTE entrará em vigor somente para os administradores e não para os usuários do grupo content-author.

  • O RTE não oferece suporte a quadros incorporados ou iframe para incorporar conteúdo.

Nesta página