DocumentaçãoAEMGuia do usuário

Configuração do RTE para o Editor universal configure-rte

Última atualização: 5 de agosto de 2026
  • Aplica-se a:
  • Experience Manager as a Cloud Service

Criado para:

  • Admin
  • Developer

Entenda como você pode configurar o editor de rich text (RTE) no Editor universal.

Visão geral overview

O Editor universal fornece um editor de rich text (RTE) no local e no painel de propriedades para permitir que os autores apliquem alterações de formatação à medida que editam seu texto.

Este RTE pode ser configurado com o uso de filtros de componente. Este documento descreve quais opções de configuração estão disponíveis, juntamente com exemplos.

NOTE
Quando você inicia um projeto do Universal Editor, todos os recursos de rich text compatíveis com o seu back-end (AEM com Edge Delivery ou implementação headless) são automaticamente ativos e disponibilizados na janela do editor modal do RTE.
  • Você pode desativar as opções desnecessárias.
  • Ativar opções que não são compatíveis com seu tipo de projeto não é suportado.

Estrutura de configuração structure

A configuração do RTE consiste em duas partes:

  • toolbar: a configuração da barra de ferramentas controla quais opções de edição estão disponíveis na interface e como elas estão organizadas.
  • actions: a configuração de ações permite personalizar o comportamento e a aparência de ações de edição individuais.

Essas configurações podem ser definidas como parte de um filtro de componente com a propriedade rte.

[
  {
    "id": "richtext",
    "rte": {
      "toolbar": {
        // Toolbar configuration
      },
      "actions": {
        // Action-specific configurations
      }
    },
    "components": [
      "richtext"
    ]
  }
]

Configuração da barra de ferramentas toolbar

A configuração da barra de ferramentas controla quais opções de edição estão disponíveis na interface e como elas estão organizadas. Estas são as seções disponíveis

{
  "toolbar": {
    // Text formatting options
    "format": ["bold", "italic", "underline", "strike", "text_color"],
    // Text alignment options
    "alignment": ["left", "center", "right", "justify"],
    // Text direction options, right-to-left or left-to-right
    "direction": ["rtl", "ltr"],
    // Indentation controls
    "indentation": ["indent", "outdent"],
    // Block-level elements
    "blocks": ["paragraph", "h1", "h2", "h3", "h4", "h5", "h6", "code_block", "blockquote"],
    // List options
    "list": ["bullet_list", "ordered_list"],
    // Content insertion
    "insert": ["link", "unlink", "image", "special_characters"],
    // Superscript/subscript
    "sr_script": ["superscript", "subscript"],
    // Editor utilities
    "editor": ["removeformat", "clean_unsupported_tags", "paste_text", "fullscreen"],
    // Advanced items (e.g. the class picker).
    "advanced": ["classes"],
    // Section ordering (optional)
    "sections": ["format", "alignment", "list"]
  }
}

Configuração de ação action

A configuração de ações permite personalizar o comportamento e a aparência de ações de edição individuais. Estas são as seções disponíveis.

Opções de ação comum common-action-options

A maioria das ações apoia as seguintes opções comuns:

  • shortcut?: cadeia de caracteres - substitui o atalho de teclado padrão para a ação (se houver)
  • label?: cadeia de caracteres - substitui o rótulo usado para a ação na interface
  • hideInline?: booleano - Quando true, oculta esta ação da barra de ferramentas do editor RTE no contexto (em linha)
{
  "actions": {
    "bold": {
      "label": "Bold",
      "shortcut": "Mod-B",
      "hideInline": true
    }
  }
}

Ações de formato format

As ações de formato são usadas para aplicar formatação e oferecer suporte à alternância de tags do HTML para escolher entre variantes semânticas. As seções a seguir estão disponíveis.

{
  "actions": {
    "bold": {
      "tag": "strong",      // Use <strong> instead of <b>
      "shortcut": "Mod-B",  // Custom keyboard shortcut
      "label": "Make Bold"  // Custom button label
    },
    "italic": {
      "tag": "em",          // Use <em> instead of <i>
      "shortcut": "Mod-I",
      "label": "Italicize"
    },
    "strike": {
      "tag": "del"          // Use <del> instead of <s>
    }
  }
}

Ações da lista list

As ações de lista oferecem suporte à quebra automática de conteúdo para controlar a estrutura do HTML. As seções a seguir estão disponíveis.

{
  "actions": {
    "bullet_list": {
      "wrapInParagraphs": true,    // <ul><li><p>content</p></li></ul>
      "shortcut": "Mod-Shift-8",   // Custom shortcut
      "label": "Bullet List"       // Custom label
    },
    "ordered_list": {
      "wrapInParagraphs": false,   // <ol><li>content</li></ol> (default)
      "shortcut": "Mod-Shift-9"
    }
  }
}

Ações de tabela table-actions

As ações de tabela oferecem suporte ao encapsulamento de conteúdo para controlar a estrutura do HTML em células de tabela:

{
  "actions": {
    "table": {
      "wrapInParagraphs": false, // <td>content</td> (default)
      "shortcut": "Mod-Alt-T",   // Custom shortcut
      "label": "Insert Table"    // Custom label
    }
  }
}

Opções de configuração de tabela table-configuration-options

  • wrapInParagraphs: false (padrão) - As células da tabela contêm conteúdo de texto não ajustado
  • wrapInParagraphs: true - Células de tabela quebram conteúdo em marcas de parágrafo

Amostras:

Quando wrapInParagraphs: false:

<!-- Single line -->
<td>Cell content</td>

<!-- Multiple paragraphs get <br> separation -->
<td>Line 1<br />Line 2</td>

Quando wrapInParagraphs: true:

<!-- Single paragraph -->
<td><p>Cell content</p></td>

<!-- Multiple paragraphs preserved -->
<td>
  <p>Line 1</p>
  <p>Line 2</p>
</td>
NOTE
Ao desempacotar parágrafos (wrapInParagraphs: false), o higienizador insere automaticamente <br> tags entre vários parágrafos para preservar as quebras de linha visuais. Isso segue os padrões do HTML e a prática comum nos principais editores de rich text.

Caixas de diálogo Propriedades properties-dialog

O plug-in de tabela envia três caixas de diálogo do editor de propriedades que são abertas no menu Tabela quando esses sinalizadores estão habilitados:

  • Propriedades da Tabela — Edite a largura/altura da tabela delimitadora, o espaçamento da célula, o preenchimento da célula, o alinhamento, a borda (largura/estilo/cor) e a cor do plano de fundo. As alterações de preenchimento de borda e célula se propagam para cada célula na mesma transação, de modo que o resultado visual corresponde ao que um usuário esperaria.
  • Propriedades da Linha — Edite o tipo de linha da linha delimitadora (Cabeçalho/Corpo/Rodapé), alinhamento, altura, borda (largura/estilo/cor) e cor do plano de fundo. O tipo de linha é somente seção (correspondente ao padrão do TinyMCE table_header_type: "section"): uma linha de cabeçalho se move para <thead> na serialização, mas suas células permanecem <td>. Use Propriedades da Célula -> Célula do cabeçalho para <th>. Na serialização, as linhas são agrupadas em seções reais <thead>/<tbody>/<tfoot> (TinyMCE/Word correspondente). Consulte a nota de armazenamento abaixo. As bordas se propagam para as células da linha para que elas sejam renderizadas sob o recolhimento de borda.
  • Propriedades da Célula — Edite o tipo de célula da(s) célula(s) selecionada(s) (célula Célula/Cabeçalho), largura/altura, alinhamento horizontal e vertical, borda (largura/estilo/cor) e cor do plano de fundo. Quando um CellSelection abrange várias células, o patch é aplicado em cada célula selecionada de uma vez. O tipo de célula alterna a célula entre table_cell (<td>) e table_header (<th>).

Todos os três são desativados por padrão (aceitação), correspondendo ao restante da superfície de configuração do RTE, em que os recursos estão desativados até que um consumidor os ative explicitamente. Aceite por consumidor quando quiser que as caixas de diálogo sejam exibidas:

{
  actions: {
    table: {
      showTableProperties: true, // default false: show "Table Properties" menu item
      showRowProperties: true,   // default false: show "Row Properties" menu item
      showCellProperties: true,  // default false: show "Cell Properties" menu item
    }
  }
}

Opções da caixa de diálogo Propriedades properties-dialog-options

|—|—|—|
| Opção | Padrão | Efeito |
| showTableProperties | false | Mostrar o item Propriedades da Tabela na lista suspensa Tabela |
| showRowProperties | false | Mostrar o item Propriedades de Linha no submenu Linha |
| showCellProperties | false | Mostrar o item Propriedades da Célula no submenu Célula |

As caixas de diálogo de ida e volta através de htmlAttrs.style no respectivo nó ProseMirror, ou seja, CSS em linha como TinyMCE/Word emit, não atributos de dados personalizados. A largura da célula também grava o nível de esquema colwidth para que ele sobreviva ao mecanismo de tabela do PM. O tipo de célula é transportado pela marca de nó (<td>/<th>).

O esquema prosemirror-tables é plano (table -> table_row -> cell) sem nós de seção <thead>/<tbody>/<tfoot>, portanto, internamente, a intenção de Cabeçalho/Corpo/Rodapé de uma linha é mantida no <tr> como um marcador data-row-type. Quando o tipo de uma linha é alterado, as linhas são reclassificadas no local na ordem cabeçalho -> corpo -> rodapé dentro da mesma transação, de modo que a tela do editor corresponde à estrutura exportada em tempo real (linhas de cabeçalho disparam para a parte superior, linhas de rodapé afundam para a parte inferior, como TinyMCE). Essa reorganização no editor é ignorada quando qualquer célula passa por várias linhas (rowspan > 1), em que mover uma linha corromperia a grade. Na saída, sanitizeHTML agrupa as linhas em seções <thead>/<tbody>/<tfoot> reais (linhas de cabeçalho primeiro, linhas de rodapé por último) e solta o marcador, produzindo a mesma estrutura de emissão TinyMCE/Word. Na entrada, a seção de fechamento de <tr> é lida de volta no marcador, percursos circulares HTML segmentados.

As ações de link oferecem suporte ao controle de atributo de destino para gerenciar o comportamento do link. As seções a seguir estão disponíveis.

{
  "actions": {
    "link": {
      "hideTarget": false,       // Show target attribute options (default)
      "shortcut": "Mod-K",       // Custom keyboard shortcut
      "label": "Insert Link"     // Custom button label
    },
    "unlink": {
      "shortcut": "Mod-Shift-K", // Custom keyboard shortcut
      "label": "Remove Link"     // Custom button label
    }
  }
}
  • hideTarget: false (padrão) - Incluir atributo de destino em links, permitindo _self, _blank, etc.
  • hideTarget: true - Excluir totalmente o atributo de destino dos links

A ação unlink aparece somente quando o cursor é posicionado dentro de um link existente. Ela remove a formatação do link, preservando o conteúdo do texto.

Ações da imagem image

As ações de imagem oferecem suporte ao empacotamento de elementos de imagem para gerar marcação de imagem responsiva. As seções a seguir estão disponíveis.

{
  "actions": {
    "image": {
      "wrapInPicture": false,     // Use <img> tag (default)
      "shortcut": "Mod-Shift-I",  // Custom keyboard shortcut
      "label": "Insert Image"     // Custom button label
    }
  }
}

Opções de configuração de imagem image-options

  • wrapInPicture: false (padrão) - Gerar elementos <img> simples
  • wrapInPicture: true - Encapsular imagens em <picture> elementos para design responsivo

Tela inteira full-screen

A ação de tela cheia alterna o editor para dentro e para fora do modo de tela cheia:

{
  actions: {
    fullscreen: {
      label: "Fullscreen"; // Custom button label
    }
  }
}

Quando a tela cheia está ativa, o invólucro do editor recebe a classe rte-fullscreen-wrapper. Os aplicativos de consumidor podem direcionar essa classe para aplicar estilos personalizados ou propriedades de CSS (por exemplo, índice z, dimensões, sobreposição). (Não suportado no Editor universal)

Configuração de recuo indentation

O recuo tem uma configuração de nível de recurso que controla o escopo do comportamento de recuo, além de configurações de ação individuais para atalhos e rótulos.

{
  "actions": {
    // Feature-level configuration
    "indentation": {
      "scope": "all"  // Controls what content can be indented (default: "all")
    },

    // Individual action configurations
    "indent": {
      "shortcut": "Tab",           // Custom keyboard shortcut
      "label": "Increase Indent"   // Custom button label
    },
    "outdent": {
      "shortcut": "Shift-Tab",     // Custom keyboard shortcut
      "label": "Decrease Indent"   // Custom button label
    }
  }
}

Opções de Escopo de Recuo indentation-options

  • scope: all (padrão) - O recuo/recuo à esquerda se aplica a todo o conteúdo:

    • Listas: aninhar/aninhar itens de lista
    • Parágrafos e cabeçalhos: aumentar/diminuir o nível de recuo geral

  • scope: lists - O recuo/recuo à esquerda se aplica somente aos itens da lista:

    • Listas: aninhar/aninhar itens de lista
    • Parágrafos e cabeçalhos: Nenhum recuo (botões desativados para esses)
NOTE
O aninhamento de lista com as teclas Tab/Shift+Tab funciona independentemente das configurações gerais de recuo.

Caracteres especiais special-characters

A ação de inserção special_characters abre um popover do seletor de caracteres para inserir caracteres especiais (símbolos, operadores matemáticos, sinais de moeda, pontuação, setas, etc.) na posição do cursor.

{
  "toolbar": {
    "insert": ["link", "unlink", "image", "table", "special_characters"],
    "sections": ["insert"],
  },
  "actions": {
    "special_characters": {
      "label": "Special Characters"
    }
  }
}

Um conjunto padrão de 44 caracteres usados com frequência é incluído pronto para uso. A lista de caracteres pode ser personalizada por meio de duas opções de configuração:

  • appendCharacters - Adicionar caracteres ao conjunto padrão
  • characters - Substituir totalmente o conjunto padrão

Cada entrada de caractere tem character (o caractere Unicode) e title (dica de ferramenta/nome acessível).

Anexar caracteres aos padrões append-special-characters

{
  "actions": {
    "special_characters": {
      "appendCharacters": [
        { "character": "\u2605", "title": "Black star" },
        { "character": "\u2764", "title": "Heavy black heart" },
      ];
    }
  }
}

Substituir os caracteres especiais padrão replace-special-characters

{
  "actions": {
    "special_characters": {
      "characters": [
        { "character": "\u00A9", "title": "Copyright sign" },
        { "character": "\u00AE", "title": "Registered sign" },
        { "character": "\u2122", "title": "Trade mark sign" },
      ];
    }
  }
}

Ambas as opções juntas both-special-character-options

Este exemplo usa characters como base e, em seguida, anexa caracteres adicionais usando appendCharacters.

{
  "actions": {
    "special_characters": {
      "characters": [
        { "character": "\u00A9", "title": "Copyright sign" },
        { "character": "\u00AE", "title": "Registered sign" }
      ],
      "appendCharacters": [
        { "character": "\u2605", "title": "Black star" }
      ]
    }
  }
}

Classes em CSS css-classes

A ação classes adiciona uma lista suspensa que aplica uma classe CSS configurável ao conteúdo RTE. Está listado como um item na seção advanced. O plug-in grava/remove apenas nomes de classe no HTML produzido. O aplicativo do consumidor é proprietário do CSS real de cada classe e é responsável por carregá-lo onde quer que o conteúdo do RTE seja renderizado (editor, pré-visualização, publicação).

A lista suspensa é exibida somente quando pelo menos uma opção está configurada. O plug-in é enviado sem padrões.

{
  toolbar: {
    advanced: ["classes"],
    sections: ["blocks", "format", "advanced"],
  },
  actions: {
    classes: {
      label: "Add Custom Class",
      options: [
        { value: "rte-hero", label: "Hero title" },
        { value: "rte-lede", label: "Lede paragraph" },
        { value: "rte-callout", label: "Callout block" },
        { value: "rte-pill", label: "Pill (inline)" },
      ],
    },
  },
}

Cada entrada tem valor (o nome da classe CSS gravado na HTML) e rótulo (o texto legível mostrado na lista suspensa).

O target segue a regra de wins de mais próximo ao cursor:

  • Seleção vazia dentro de um span gerenciado: A classe é aplicada a essa execução de span, não ao bloco. Escolher uma classe diferente troca a classe do span; Remover classe personalizada limpa-a.
  • Seleção vazia em outro lugar (somente cursor): A classe escolhida é aplicada ao ancestral de nível de bloco mais próximo do cursor (<p>, <h1> etc.). Quando o cursor está dentro de um item de lista ou célula de tabela que envolve um parágrafo, o <li>/<td>/<th> recebe a classe, não o parágrafo interno.
  • Seleção real: o texto selecionado está encapsulado em um <span class="...">. Se a seleção já tiver uma extensão, a classe da extensão existente será atualizada.
  • Remover Classe Personalizada: Remova a classe gerenciada do destino (span run ou block, o que for resolvido como). Se o único atributo restante em um span era a classe gerenciada, o próprio span é desempacotado. A opção Remover Classe Personalizada só aparece quando uma classe gerenciada está ativa no momento.

As classes existentes que não fazem parte da lista de opções configuradas são preservadas intactas. Somente as classes gerenciadas são trocadas entre entrada e saída. As classes definidas pelo consumidor coexistem com segurança com o plug-in.

Reflexão suspensa:

  • Com apenas o cursor posicionado, a lista suspensa reflete a classe gerenciada mais próxima: a extensão no cursor, se houver, caso contrário, o bloco sob o cursor.
  • Com uma seleção, a lista suspensa reflete a classe gerenciada na extensão que envolve a seleção. Somente quando a seleção inteira compartilha a mesma classe. As seleções mistas não mostram nada selecionado.

Tipos de bloco block-types

A seção da barra de ferramentas blocks renderiza uma lista suspensa que alterna o bloco atual entre os tipos de bloco configurados. Os valores com suporte são paragraph, h1-h6, code_block e blockquote.

  • blockquote é um bloco de encapsulamento (seu ProseMirror content é block+), diferente de paragraph/h1-h6/code_block que são blocos de texto. Selecionar Aspas envolve o bloco atual em um <blockquote> A lista suspensa mostra Aspas como selecionados enquanto o cursor está dentro de um. Selecionar qualquer outro tipo de bloco (por exemplo, Parágrafo) enquanto estiver dentro de uma citação retira o bloco da citação primeiro, assim, ele também deixa a citação. Isso espelha a lista suspensa de blocos do TinyMCE.
  • Como é um nó de encapsulamento, um <blockquote> pode conter vários parágrafos, listas ou até mesmo aspas aninhadas. Isso é o que permite que conteúdo criado externamente seja de ida e volta sem perda: TinyMCE (conteúdo herdado) e Word (colar) emitem <blockquote><p>…</p></blockquote> (geralmente com vários parágrafos) e essa estrutura é preservada ao carregar, editar e serializar, em vez de ser nivelada.
  • Como em todos os tipos de bloco, o aplicativo do consumidor é proprietário do CSS que visualmente estiliza <blockquote> onde quer que o conteúdo do RTE seja renderizado.
{
  "toolbar": {
    "blocks": ["paragraph", "h1", "h2", "h3", "code_block", "blockquote"],
    "sections": ["blocks"],
  },
  "actions": {
    "blockquote": {
      "label": "Quote", // Custom dropdown label
    },
  },
}

Colar como texto paste-as-text

A ação do editor paste_text habilita um fluxo de trabalho padrão de colagem como texto simples.

  • Atalho padrão: Mod-Shift-v (Cmd+Shift+V no macOS, Ctrl+Shift+V no Windows/Linux)
  • Comportamento: Cola de texto/sem formatação (a formatação de origem é ignorada)
    • Em listas, novas linhas criam novos itens de lista.
{
  "toolbar": {
    "editor": ["removeformat", "paste_text"]
  },
  "actions": {
    "paste_text": {
      "shortcut": "Mod-Shift-v",
      "label": "Paste as Text"
    }
  }
}

Localizar e substituir find-replace

A ação do editor find_and_replace usa prosemirror-search (realces correspondentes) mais um plug-in de comando digitado por FIND_AND_REPLACE_PLUGIN_KEY.

  • Integração: adicione createFindAndReplacePlugin() aos plug-ins do ProseMirror do editor quando toolbar.editor incluir find_and_replace.
  • API: Use FIND_AND_REPLACE_PLUGIN_KEY.getState(state) para acessar find, replaceNext, replaceAll e getMatchCount.
  • Estilos: certifique-se de que seu aplicativo carregue CSS para .ProseMirror-search-match e .ProseMirror-active-search-match (do estilo prosemirror-search/search.css ou seu próprio equivalente).
{
  "toolbar": {
    "editor": ["find_and_replace"],
    "sections": ["editor"],
  },
  "actions": {
    "find_and_replace": {
      "label": "Find and replace",
    },
  },
}

Outras ações other

Todas as outras ações oferecem suporte à personalização básica. As seções a seguir estão disponíveis.

{
  "actions": {
    "h1": {
      "shortcut": "Mod-Alt-1",
      "label": "Large Heading"
    },
    "paragraph": {
      "shortcut": "Mod-Alt-0",
      "label": "Normal Text"
    },
    "link": {
      "shortcut": "Mod-K",
      "label": "Insert Link",
      "hideTarget": false    // Show target attribute options (default: false)
    }
  }
}

Exemplo completo example

Veja a seguir um exemplo de uma configuração completa.

[
  {
    "id": "richtext",
    "rte": {
      // Configure which tools appear in toolbar
      "toolbar": {
        "format": [
          "bold",
          "italic",
          "text_color"
        ],
        "blocks": [
          "paragraph",
          "h1",
          "h2"
        ],
        "list": [
          "bullet_list",
          "ordered_list"
        ],
        "insert": [
          "link",
          "unlink",
          "image",
          "special_characters"
        ],
        "editor": [
          "removeformat",
          "paste_text"
        ],
        "sections": [
          "format",
          "blocks",
          "list",
          "insert"
        ]
      },
      // Customize individual action behavior
      "actions": {
        // Format actions with HTML tag choices
        "bold": {
          "tag": "strong",
          "shortcut": "Mod-B",
          "label": "Bold"
        },
        "italic": {
          "tag": "em",
          "shortcut": "Mod-I"
        },
        // List actions with content wrapping
        "bullet_list": {
          "wrapInParagraphs": true,
          "label": "Bullet List"
        },
        "ordered_list": {
          "wrapInParagraphs": false
        },
        // Link actions with target control
        "link": {
          "hideTarget": false,
          "shortcut": "Mod-K",
          "label": "Add Link"
        },
        "unlink": {
          "label": "Remove Link"
        },
        // Image actions with picture wrapping
        "image": {
          "wrapInPicture": false, // Use <img> tag instead of <picture>
          "shortcut": "Mod-Shift-I",
          "label": "Insert Image",
        },
        // Special characters with custom additions
        "special_characters": {
          "label": "Special Characters",
          "appendCharacters": [{ "character": "\u2605", "title": "Black star" }],
        },
        // Other actions with basic customization
        "paste_text": {
          "shortcut": "Mod-Shift-v",
          "label": "Paste as Text",
        },
        "h1": {
          "shortcut": "Mod-Alt-1",
          "label": "Main Heading"
        }
      }
    }
  }
]

Detalhes da opção de ação action-details

Várias opções têm detalhes adicionais que são importantes para ter em mente.

wrapInParagraphs wrapInParagraphs

A opção wrapInParagraphs para listas controla a estrutura do HTML.

wrapInParagraphs: false (default) wrapInParagraphs-false

<ul>
  <li>Simple text content</li>
  <li>Another item</li>
</ul>

wrapInParagraphs: true wrapInParagraphs-true

<ul>
  <li><p>Text wrapped in paragraphs</p></li>
  <li><p>Supports rich formatting within items</p></li>
</ul>

Use o wrapInParagraphs: true quando precisar:

  • Formatação avançada nos itens da lista
  • Vários parágrafos por item de lista
  • Estilo consistente em nível de bloco

wrapInPicture

A opção wrapInPicture para imagens controla a estrutura HTML gerada para o conteúdo da imagem.

wrapInPicture: falso (padrão) wrapinpicture-false

<img src="image.jpg" alt="Description" />

wrapInPicture: verdadeiro wrapinpicture-true

<picture>
  <img src="image.jpg" alt="Description" />
</picture>

Use o wrapInPicture: true quando precisar:

  • Suporte de imagem responsiva com <source> elementos.
  • Recursos de direção de arte.
  • À prova de obsolescência para recursos de imagem avançados.
  • Estrutura de elemento de imagem consistente.
NOTE
Quando o wrapInPicture: true está habilitado, as imagens podem ser aprimoradas com elementos <source> adicionais para diferentes consultas de mídia e formatos, tornando-as mais flexíveis para oferecer design responsivo.

A opção hideTarget para links controla se o atributo target está incluído em links gerados e se a caixa de diálogo para criação de links inclui um campo para seleção de destino.

hideTarget: false (default) hideTarget-false

<a href="https://example.com" target="_self">Link text</a>
<a href="https://example.com" target="_blank">External link</a>

hideTarget: true hideTarget-true

<a href="https://example.com">Link text</a>

A opção disableForImages para links controla se os usuários podem criar links em imagens e elementos de imagem. Isso se aplica aos elementos <img> embutidos e aos elementos <picture> de nível de bloco.

disableForImages: false (default) disableforimages-false

Os usuários podem selecionar imagens e envolvê-las em links.

<!-- Inline image with link -->
<a href="https://example.com">
  <img src="image.jpg" alt="Description" />
</a>

<!-- Block-level picture with link -->
<a href="https://example.com">
  <picture>
    <img src="image.jpg" alt="Description" />
  </picture>
</a>

disableForImages: true disableforimages-true

O botão de link é desativado quando uma imagem ou imagem é selecionada. Os usuários só podem criar links em conteúdo de texto.

<!-- Images remain standalone without links -->
<img src="image.jpg" alt="Description" />

<picture>
  <img src="image.jpg" alt="Description" />
</picture>

<!-- Links work normally on text -->
<a href="https://example.com">Link text</a>

Use disableForImages: true quando quiser:

  • Mantenha a consistência visual evitando imagens vinculadas.
  • Simplifique a estrutura do conteúdo separando imagens da navegação.
  • Imponha políticas de conteúdo que restrinjam a vinculação de imagens.
  • Reduza a complexidade de acessibilidade em seu conteúdo.
NOTE
Essa configuração afeta apenas a capacidade de criar novos links em imagens. Ela não remove links existentes de imagens no conteúdo.

Opções de tag tag

As ações de formato permitem alternar entre variantes do HTML.

Ação
Tag padrão
Tags alternativas
Caso de uso
bold
<strong>
<b>
Ênfase semântica vs. visual
italic
<em>
<i>
Estilo semântico vs. visual
strike
<del>
<s>
Exclusão visual vs. semântica

Escolha as marcas semânticas (<strong>, <em>, <del>) para melhor acessibilidade e SEO.

Cor do texto color

A opção de formato text_color adiciona recursos de coloração de texto ao editor.

<!-- With color applied -->
<span style="color: #ff0000">Colored text</span>

<!-- Color removed -->
Plain text

O plug-in também analisa elementos <font color="..."> herdados para compatibilidade com versões anteriores.

Atalhos de teclado keyboard-shortcuts

Os atalhos usam o formato Mod-Key(s) onde:

  • Mod = Cmd no Mac, Ctrl no Windows/Linux
  • Exemplos: Mod-B, Mod-Shift-8, Mod-Alt-1

HTML não compatível unsupported-html

Por padrão, tags HTML desconhecidas são removidas quando analisadas pelo editor. Para preservá-los, opt-in por meio da opção de configuração unsupportedHtml:

const rteConfig = {
  unsupportedHtml: true, // preserve unknown HTML tags (default: false)
};
Valor
Comportamento
false (default)
Tags desconhecidas do HTML são descartadas durante a análise.
true
Tags desconhecidas do HTML são colocadas em um nó de bloco não compatível personalizado para que o conteúdo possa ser enviado com segurança.

unsupportedHtmlOptions.structuralTags (opcional) unsupportedhtmloptions

Use unsupportedHtmlOptions.structuralTags para controlar quais marcas estruturais adicionais são tratadas como HTML com suporte.

const rteConfig = {
  unsupportedHtml: true,
  unsupportedHtmlOptions: {
    structuralTags: ["div", "section"], // preserve configured tags as supported
  },
};
Valor
Comportamento
Omitido/[]
Nenhuma tag estrutural adicional está na lista de permissões.
["div"]
<div> é tratado como HTML com suporte e não é encapsulado como sem suporte.
["div", "section"]
<div> e <section> são tratados como HTML com suporte e não são encapsulados como sem suporte.
NOTE
unsupportedHtmlOptions afeta o comportamento somente quando unsupportedHtml está habilitado.

Quando habilitado, o editor renderiza nós sem suporte com marcas de wrapper (unsupported-block/unsupported-inline) e classes de wrapper. Os aplicativos do consumidor devem fornecer o estilo dessa classe (por exemplo, borda, preenchimento, plano de fundo). O rótulo da tag dentro do bloco usa rte-unsupported-label, que também pode ser personalizado.

  • rte-unsupported-block
  • rte-unsupported-inline
  • rte-unsupported-label

Os aplicativos do consumidor devem fornecer estilo para essas classes (por exemplo, borda, espaçamento, plano de fundo e alinhamento em linha).

Quando unsupportedHtml está habilitado, o consumidor deve adicionar o plug-in de nós sem suporte (por exemplo, createUnsupportedNodesPlugin()) para que a cópia de um bloco sem suporte ou nó embutido coloque seu texto interno na área de transferência (somente texto sem formatação) e os usuários possam colar o conteúdo em outro lugar.

recommendation-more-help
experience-manager-cloud-service-help-main-toc