Configurar o editor de rich text

Last updated:

Como desenvolvedor, em alguns casos, os editores da WYSIWYG fornecem funcionalidades que, quando usadas incorretamente, podem atrapalhar o objetivo de uma marca unificada e causar problemas de design e fluxo de conteúdo. O editor de rich text nos módulos personalizados agora permite que os desenvolvedores removam componentes da barra de ferramentas de configuração por meio da propriedade enabled_features contida no arquivo fields.json.

Observação: o seguinte se aplica a módulos personalizados que utilizam o campo de rich text apenas para desenvolvimento local. O uso deste recurso não desativará a funcionalidade das opções removidas do editor de rich text, apenas a exibição das opções. Isso é devido a questões de compatibilidade com versões anteriores e, portanto, o conteúdo existente não é afetado. 

Como usar enabled_features

No arquivo fields.json que inclui o objeto de campo de rich text, você pode habilitar certos recursos adicionando as opções de barra de ferramentas válidas em um array na propriedade enabled_features, conforme ilustrado abaixo:

JSON
// Rich text field with only Bold, Link, and Image available in the Toolbar
{
  "name" : "description",
  "label" : "Description",
  "required" : false,
  "locked" : false,
  "type" : "richtext",
  "default" : null,
  "enabled_features" : ["bold","link","image"]
}

O editor de conteúdo veria o editor de rich text somente com as opções incluídas habilitadas, conforme ilustrado na imagem abaixo:

Observação: alguns recursos, como o botão "Limpar estilos", que permite reverter para o estilo padrão do editor, sempre estão habilitados e não podem ser removidos. Se a propriedade enabled_features for omitida, todos os recursos serão exibidos.

Um exemplo de uma barra de ferramentas RTE com recursos habilitados.

Listagens de recursos

Veja abaixo uma lista de recursos que podem ser habilitados individualmente ao usar a propriedade enabled_features.

Grupos de controles

Use this table to describe parameters / fields
OpçãoDescription
colors

Controles de cor do texto e do fundo.

fonts

Família de fontes e controles de tamanho de fonte.

indents

Controles externos e de recuo.

lists

Controles de listas numeradas e com marcadores.

standard_emphasis

Controles de negrito, itálico e sublinhado.

advanced_emphasis

Controles de formato riscado, sobrescrito, subscrito e código.

glyphs

Controles de emojis, caracteres especiais e ícones. Não compatível com módulos de e-mail. Para adicionar o seletor de emojis aos módulos de e-mail, use emoji.

Formatação de texto

Use this table to describe parameters / fields
OpçãoDescription
block

Mostra o menu suspenso do seletor de estilo.

font_family

Mostra o menu suspenso do alternador de fonte.

font_size

Mostra o menu suspenso do tamanho da fonte.

bold

Mostra o botão de negrito.

italic

Mostra o botão de itálico.

underline

Mostra o botão de sublinhado.

text_color

Mostra o botão de cor do texto.

background_color

Mostra o botão de cor do fundo.

alignment

Mostra o botão de alinhamento.

bulleted_list

Mostra o botão de lista com marcadores.

numbered_list

Mostra o botão de listas numeradas.

lineheight

Mostra o botão de altura da linha.

outdent

Mostra o botão de recuo à esquerda.

indent

Mostra o botão de recuo.

strikethrough

Mostra o botão de riscado.

superscript

Mostra o botão de sobrescrito.

subscript

Mostra o botão de subscrito.

code_format

Mostra o botão de formato de código.

Botões Inserir

Use this table to describe parameters / fields
OpçãoDescription
link

Mostra o botão de link.

image

Mostra o botão de imagem. Não compatível com módulos de e-mail.

emoji

Mostra o botão de emojis.

personalize

Mostra o item de personalização da barra de ferramentas.

cta

Mostra o item do menu Call to action no menu Inserir.

embed

Mostra o item de menu Incorporar no menu Inserir.

video

Mostra o item de menu Vídeo no menu Inserir.

table

Mostra o item de menu Tabela no menu Inserir.

charmap

Mostra o item de menu Caracteres especiais no menu Inserir.

anchor

Mostra o item de menu Âncora no menu Inserir.

hr

Mostra o item de menu Linha horizontal no menu Inserir.

nonbreaking_space

Mostra o item de menu Espaço não separável no menu Inserir.

icon

Mostra o item de menu Ícones no menu Inserir.

Opções avançadas

Use this table to describe parameters / fields
OpçãoDescription
source_code

Mostra o item de menu Código-fonte no menu Avançado.

visual_blocks

Mostra o item de menu Mostrar blocos no menu Avançado.


Este artigo foi útil?
Este formulário deve ser usado apenas para fazer comentários sobre esses artigos. Saiba como obter ajuda para usar a HubSpot..