WYSIWYG

O Campo WYSIWYG deixa cair o editor completo do TinyMCE, o mesmo editor de rich text que o WordPress envia há anos, no painel de um widget personalizado Os editores obtêm negrito, itálico, listas, links, títulos e o switch de guia visual/texto que já conhecem Seu widget recebe HTML formatado pronto para imprimir Dentro dos Master Addons Construtor de widgets, este é o campo para regiões de conteúdo onde uma planície Área de texto achataria a formatação do texto.

O campo WYSIWYG suporta Condições como qualquer outro controle, e seu conteúdo é renderizado através do Mecanismo de modelo de sintaxe dupla. Os valores WYSIWYG mantêm seu HTML seguro automaticamente, portanto raramente você precisa do |raw filtrar. Ambos os guias explicam os detalhes e limitações.

A ligação é um token Imprimir {{ your_field_name }} no painel HTML e nas renderizações de marcação armazenadas, filtradas wp_kses_post, assim a formatação sobrevive enquanto etiquetas inseguras são despojadas Sem filtros extras, sem escapar da ginástica.

O que o campo WYSIWYG faz #

• Rende o editor de rich text TinyMCE no painel Elementor do widget, com as guias Visual e Text.
• Armazena a saída do editor como uma string HTML.
• Imprime esse HTML por meio de {{ your_field_name }}, passou por wp_kses_post na saída.
• Mantém a formatação intacta: parágrafos, negrito, itálico, listas, links e títulos são renderizados.
• Suporta valores dinâmicos, para que o conteúdo possa vir de tags dinâmicas onde a configuração os fornece.

Primeiro widget? O Visão geral do Widget Builder cobre o básico do editor em que esta página se baseia.

Antes de começar #

• WordPress com Elementor instalado e ativo.
• Complementos Mestres para Elementor instalado e ativo. Novo no plugin? veja o guia instalação.
• Um widget personalizado aberto no editor Widget Builder Nosso exemplo é um widget de cartão de membro da equipe com um campo WYSIWYG nomeado member_bio segurando a biografia formatada de cada um.

Como adicionar um campo WYSIWYG #

Arraste o WYSIWYG campo do painel de campos em uma seção abaixo do Conteúdo tab, a casa natural para conteúdo de formato longo Suas opções abrem à esquerda assim que ele pousar.

Opções de campo WYSIWYG explicadas #

A lista de opções permanece pequena porque o próprio editor carrega a complexidade:

• Etiqueta: o texto mostrado acima o editor em Elementor, por exemplo “Member Bio”.
• Nome: o identificador exclusivo a que seus modelos se referem. Apenas letras, números e sublinhados, por exemplo member_bio.
• Predefinição: o conteúdo inicial, e pode incluir marcação Um parágrafo formatado curto mostra aos editores para que serve a região e prova que a formatação funciona.
• Dinâmico: o campo aceita valores dinâmicos, para que o conteúdo possa ser conectado a tags dinâmicas em vez de digitado manualmente.

Conecte o campo WYSIWYG com seu token #

O campo WYSIWYG é um campo de token. Um token no painel HTML coloca toda a região do conteúdo:

<article class="tm-card">
  <h3 class="tm-name">{{ member_name }}</h3>
  <div class="tm-bio">
    {{ member_bio }}
  </div>
</article>

Na saída, o valor passa wp_kses_post, o filtro WordPress aplica-se ao conteúdo de postagens As tags que o TinyMCE produz, parágrafos, forte e em, listas, links, títulos, imagens, estão todas na lista permitida, então qual formato de editores é o que torna Qualquer coisa insegura que se infiltre pela guia Texto, como a <script>, é despojado.

Cuidado: não adicionar |raw para um token WYSIWYG por hábito O token simples já renderiza a formatação, porque wp_kses_post permite a marcação que o TinyMCE escreve; |raw remove apenas o filtro de segurança sem alterar a aparência de uma biografia normal. Se a saída parecer escapada em vez de renderizada, a causa está em outro lugar, não em um filtro ausente.

Enrole o token em um contêiner com uma classe, como no exemplo, e estilize a região no painel CSS:

.tm-bio p { margin: 0 0 0.75em; }
.tm-bio a { color: inherit; text-decoration: underline; }

Use o controle WYSIWYG no Elementor #

Adicione seu widget personalizado a uma página no Elementor ou recarregue o editor se a página já estiver aberta O campo é renderizado como um editor TinyMCE completo no painel: barra de ferramentas na parte superior, guias Visual e Texto no canto, Adicionar mídia onde a configuração permitir.

Os editores escrevem e formatam exatamente como fariam em um post: selecione o texto, negrito, adicione um link, inicie uma lista As atualizações de visualização à medida que digitam, mostrando o conteúdo estilizado pelo CSS do widget.

Quando uma bio renderiza estranhamente, verifique a guia Texto antes de culpar o widget O conteúdo colado do Word ou do Google Docs geralmente carrega vãos perdidos e estilos embutidos, e todos eles são visíveis lá Limpar a marcação na guia Texto geralmente corrige o layout no local.

Casos de uso comum #

• Bios e perfis em widgets de equipe, autor e palestrante.
• Descrições longas em cartões de serviço, produto e recurso onde um título ou lista pertence ao texto.
• Corpos testemunhais isso precisa de ênfase e quebras de linha preservadas.
• Notas de rodapé e isenções de responsabilidade com links inline para políticas.
• Qualquer região de texto editada pelo cliente onde a formatação é importante e o cliente nunca deve ver HTML.

Dicas para trabalhar com o campo WYSIWYG #

• Imprima o token simples. {{ member_bio }} renderiza a formatação como está; |raw adiciona risco sem adicionar capacidade aqui.
• Estilo através de uma classe wrapper. Alvo .tm-bio p, .tm-bio ul, e amigos no painel CSS em vez de esperar que a saída do editor chegue pré-estilizada.
• Defina um padrão formatado. Uma biografia com um nome em negrito e um link funciona como um exemplo ao vivo do que o campo suporta.
• Um WYSIWYG por região de conteúdo. Dê campos separados para introdução e letras miúdas em vez de pedir aos editores que gerenciem ambos dentro de um editor.
• Escolha o campo mais leve quando puder. Uma única linha não formatada pertence a um campo Texto; alcance o WYSIWYG quando parágrafos, listas ou links forem genuinamente parte do conteúdo.
• Espere kses na saída. Tags personalizadas fora da lista permitida pós-conteúdo não sobreviverão, por design Os trechos brutos coláveis são os Campo código's trabalho.

Perguntas frequentes #

Embrulhando #

O campo WYSIWYG do Widget Builder oferece aos editores a experiência de escrita que eles já conhecem e oferece um único token higienizado para colocar na marcação. As pessoas de conteúdo formatam biografias e descrições visualmente; o widget os renderiza com segurança e os estiliza por meio de seu próprio CSS. Para trechos brutos coláveis, use o Campo código0, e para repetir blocos formatados combinar WYSIWYG com o Campo repetidor. Explore o resto do Widgets e extensões Master Addons, e veja o página preços para o que cada plano inclui.