ACF WYSIWYG editor não carrega: como corrigir

Tipo Page Builders

Nome do erro WYSIWYG Field do ACF PRO não carrega o editor EN: ACF PRO WYSIWYG field editor not loading

Severidade Atenção

Descrição O ACF WYSIWYG editor não carrega quando o TinyMCE do WordPress não inicializa no campo: a opção Delay initialization espera um clique, uma linha nova de Repeater ou Flexible Content é inserida sem reanexar o editor, ou um erro de JavaScript trava a Block API antes do ACF montar o campo.

O que é WYSIWYG Field do ACF PRO que não carrega?

O WYSIWYG Field do ACF PRO entrega um editor de conteúdo do WordPress dentro de um grupo de campos, o mesmo editor TinyMCE visto em Posts e Páginas, com os modos Visual e Texto, a barra de ferramentas Full ou Basic e os botões de upload de mídia. Segundo a documentação oficial do ACF, o valor salvo passa pelo filtro acf_the_content, que aplica a formatação de HTML como o the_content faz, mas sem o risco de recursão. Quando o campo funciona, você vê a área de edição rica com a barra de botões; quando ele falha, no lugar do editor aparece uma caixa de texto crua, em branco ou só com o HTML sem formatação.

O problema acontece porque o editor TinyMCE depende de JavaScript para ser montado na hora certa. A configuração Delay initialization do próprio campo adia a montagem até o clique. Em campos dentro de Repeater ou Flexible Content, cada linha nova é adicionada por AJAX e o editor precisa ser reanexado pela ação append da API JavaScript do ACF. Se esse ciclo é interrompido, por um conflito de script, uma versão defasada do ACF ou a opção de adiar ligada, o editor simplesmente não aparece para o usuário.

Como identificar

No lugar do editor rico aparece apenas uma caixa de texto vazia, ou um textarea cru sem a barra de ferramentas, ao abrir o campo WYSIWYG no editor de post.
A barra de botões (negrito, itálico, links, mídia) some e o campo fica como uma área de texto simples, sem os modos Visual e Texto.
Dentro de um Repeater ou Flexible Content, ao clicar em ‘Adicionar linha’ a nova linha mostra o WYSIWYG em branco enquanto a primeira linha carregou normalmente.
O console do navegador (F12) exibe erros de JavaScript como ‘tinymce is not defined’ ou ‘Cannot read properties of undefined’ logo ao abrir a tela de edição.
O campo só renderiza o editor depois que você clica sobre ele, em vez de já aparecer pronto ao carregar a página.

Antes de começar: Antes de atualizar plugins, alternar tema ou adicionar código de admin em produção, faça um backup completo do site (arquivos e banco de dados) ou teste primeiro em um ambiente de staging, para reverter caso o editor continue quebrado.

Como prevenir

Mantenha o ACF PRO e o WordPress sempre na versão estável mais recente, validando antes em staging para acompanhar mudanças do editor TinyMCE.
Use ‘Delay initialization?’ apenas em telas com muitos campos WYSIWYG e por motivo de performance, sabendo que ela deixa o editor em branco até o clique.
Ao colocar WYSIWYG dentro de Repeater ou Flexible Content, padronize o uso da ação ‘append’ da API JavaScript do ACF para reanexar o editor nas linhas novas.
Documente as configurações de Tabs e Toolbar dos campos WYSIWYG para que um ajuste não deixe o campo em ‘Text Only’ sem querer.

Causa

A opção 'Delay initialization?' do campo está ligada: segundo a doc do ACF ela adia a montagem do editor até o campo ser clicado, então o WYSIWYG aparece vazio até o usuário interagir com ele.
O campo WYSIWYG está dentro de um Repeater ou Flexible Content e a linha nova é adicionada por AJAX sem reanexar o editor, porque a ação 'append' da API JavaScript do ACF não foi disparada para reinicializar o TinyMCE na nova linha.
Um conflito de JavaScript com outro plugin ou tema interrompe o carregamento antes do ACF rodar, deixando 'tinymce is not defined' no console e impedindo a montagem do editor.
A configuração 'Tabs' do campo está em 'Text Only', o que esconde o modo Visual e exibe só a caixa de texto pura, sem a barra de ferramentas rica que o usuário espera.
A versão do ACF PRO está defasada e não acompanha mudanças do editor do WordPress, fazendo o script de inicialização do TinyMCE falhar no campo.

Como resolver

Desligue a opção Delay initialization do campo: Abra o grupo de campos em ACF e edite o campo WYSIWYG. Localize a configuração 'Delay initialization?' e desligue-a. Com ela ligada, a doc do ACF confirma que o editor só é montado quando o campo é clicado, então o WYSIWYG aparece em branco ao carregar a tela.
```
Painel WP -> ACF -> Grupos de Campos -> abra o grupo
Edite o campo do tipo WYSIWYG Editor
Em 'Delay initialization?' selecione Não (desligado) e salve o grupo
```
Confirme as configurações Tabs e Toolbar do campo: No mesmo campo, verifique a configuração 'Tabs'. Se estiver em 'Text Only', o modo Visual fica oculto e o usuário vê só a caixa de texto. Selecione 'Visual & Text' e escolha uma 'Toolbar' (Full ou Basic) para restaurar a barra de ferramentas rica.
```
Painel WP -> ACF -> Grupos de Campos -> edite o campo WYSIWYG
Em 'Tabs' selecione 'Visual & Text'
Em 'Toolbar' selecione 'Full' (editor completo) e salve
```
Atualize o ACF PRO e o WordPress: Garanta o ACF PRO e o WordPress nas versões estáveis mais recentes. O WYSIWYG monta o editor TinyMCE do núcleo do WordPress, então um ACF defasado pode falhar ao inicializar o editor após uma atualização do WordPress.
```
Painel WP -> Plugins -> verifique a versão do Advanced Custom Fields PRO e atualize
Painel WP -> Painel -> Atualizações -> atualize o WordPress
```
Isole o conflito de JavaScript no console: Abra a tela de edição com o console do navegador aberto. Se aparecer um erro como 'tinymce is not defined', desative os demais plugins um a um e troque para um tema padrão, recarregando a cada teste, até identificar o que interrompe o carregamento antes do ACF inicializar o editor.
```
Abra o post em edição e pressione F12 -> aba Console
Painel WP -> Plugins -> desative os demais plugins um a um
Painel WP -> Aparência -> Temas -> ative um tema padrão (ex.: Twenty Twenty-Four) e recarregue a cada teste
```
Reanexe o editor em linhas de Repeater ou Flexible Content: Se o WYSIWYG só falha nas linhas adicionadas por AJAX dentro de um Repeater ou Flexible Content, use a ação 'append' da API JavaScript do ACF para reinicializar o editor na linha nova, conforme o exemplo de código abaixo. A ação dispara quando novo HTML entra na página.
```
Adicione o script com acf.addAction('append', ...) ao admin (ver bloco de código)
Recarregue a tela de edição e clique em 'Adicionar linha' para validar
```

PHP

<?php
add_action( 'acf/input/admin_footer', 'full_reinit_acf_wysiwyg_on_append' );
function full_reinit_acf_wysiwyg_on_append() {
    ?>
    <script>
    // Reanexa o editor TinyMCE quando uma linha nova de
    // Repeater ou Flexible Content e adicionada via AJAX.
    ( function() {
        if ( typeof acf === 'undefined' ) {
            return;
        }
        acf.addAction( 'append', function( $el ) {
            $el.find( '.acf-field-wysiwyg' ).each( function() {
                var field = acf.getField( jQuery( this ) );
                if ( field && typeof field.initializeEditor === 'function' ) {
                    field.initializeEditor();
                }
            } );
        } );
    } )();
    </script>
    <?php
}

Perguntas frequentes

Por que o WYSIWYG do ACF PRO aparece em branco ao carregar a tela

Quase sempre a opção 'Delay initialization?' do campo está ligada. A documentação do ACF diz que ela adia a montagem do editor até o campo ser clicado. Edite o campo em ACF -> Grupos de Campos e desligue essa opção para o editor já aparecer pronto.

Por que o WYSIWYG não carrega só nas linhas novas de um Repeater

Cada linha nova de Repeater ou Flexible Content entra na página por AJAX e o editor precisa ser reanexado. Use a ação 'append' da API JavaScript do ACF, que dispara quando novo HTML é adicionado, para reinicializar o TinyMCE na linha recém-criada.

O que significa o erro tinymce is not defined no console

Indica que o script do editor TinyMCE do WordPress não foi carregado antes do ACF tentar montar o campo, geralmente por conflito de JavaScript de outro plugin ou tema. Desative os demais plugins um a um e troque para um tema padrão para achar o culpado.

Como mostrar de novo a barra de ferramentas do WYSIWYG

Verifique a configuração 'Tabs' do campo. Se estiver em 'Text Only' a barra rica fica oculta. Selecione 'Visual & Text' e escolha uma 'Toolbar' Full ou Basic para restaurar os botões de formatação e upload de mídia.

Desligar Delay initialization deixa a tela mais lenta

Pode deixar, em telas com muitos campos WYSIWYG, porque todos os editores são montados de uma vez no carregamento. A opção existe justamente para melhorar o tempo de carga; use-a só quando houver muitos campos e a lentidão for real.

Preciso de código para corrigir o WYSIWYG que não carrega

Na maioria dos casos não. Desligar 'Delay initialization?' e ajustar 'Tabs' e 'Toolbar' resolve pelo painel. Código com a ação 'append' só é necessário quando o campo está dentro de Repeater ou Flexible Content e falha nas linhas adicionadas por AJAX.

O valor do WYSIWYG vem com HTML formatado no frontend

Sim. Segundo a doc do ACF, ao carregar o valor do campo ele passa pelo filtro acf_the_content, que aplica a formatação de HTML como o the_content faz. Exibir o campo com the_field já entrega o conteúdo formatado no tema.

Atualizar o WordPress quebrou o editor WYSIWYG do ACF, o que fazer

O WYSIWYG monta o editor TinyMCE do núcleo do WordPress, então uma versão defasada do ACF pode falhar após uma atualização. Atualize o ACF PRO para a versão estável mais recente e recarregue a tela de edição para o editor voltar a montar.

Grave

Como corrigir a incompatibilidade do JetEngine com o WooCommerce 9.x

A incompatibilidade do JetEngine com o WooCommerce 9 surge quando o WooCommerce ativa o HPOS (custom order tables) e o JetEngine instalado não declarou compatibilidade com o recurso, o que trava o botao de ativar o armazenamento de pedidos.

Grave

Como corrigir Custom Fields que não aparecem no frontend no ACF PRO

Custom fields do ACF PRO que não aparecem no frontend acontecem quando get_field() ou the_field() retorna vazio porque o field group não cobre o post atual, o post_id passado está errado ou o return format não bate com o que o template tenta imprimir.

Informativo

Como corrigir o Select Field que não funciona no ACF PRO

O ACF Select Field não funciona quando as choices estão no formato errado, quando o Return Format devolve um tipo diferente do que o template espera, ou quando a opção Stylized UI (Select2) deixa de carregar por conflito de scripts no editor.

Atenção

Como corrigir o Mini Cart que não exibe corretamente no Astra Pro com WooCommerce

O Astra mini cart do WooCommerce que não aparece deixa o icone ausente no header, abre um dropdown vazio ou exibe a janela transparente. A causa quase sempre e o elemento Cart não adicionado no Header Builder, o script wc-cart-fragments bloqueado pelo cache, ou o filtro de fundo do outline cart desligado após migrar do header antigo.

Atenção

Como corrigir o layout quebrado entre Astra Pro e Crocoblock JetEngine no WordPress

O layout quebrado entre Astra Pro e Crocoblock JetEngine ocorre quando a largura de conteúdo e o sidebar definidos pelo Astra entram em conflito com a estrutura que o JetEngine usa para renderizar Listing Grids e templates dinâmicos, fazendo o conteúdo estourar ou encolher na página.

Atenção

Como corrigir o layout quebrado de páginas de curso do Tutor LMS com Astra Pro no WordPress

O layout quebrado de páginas de curso do Tutor LMS com Astra Pro acontece quando a página de curso herda o container, a sidebar ou os elementos globais do Astra em vez de usar uma largura total sem barra lateral, deixando o conteúdo do curso estreito, espremido ou desalinhado.

Setores

Extensões

Integrações

Como corrigir o WYSIWYG Field do ACF PRO quando o editor não carrega no WordPress

O que é WYSIWYG Field do ACF PRO que não carrega?

Como identificar

Como prevenir

Causa

Como resolver

Perguntas frequentes

Itens relacionados

Como corrigir a incompatibilidade do JetEngine com o WooCommerce 9.x

Como corrigir Custom Fields que não aparecem no frontend no ACF PRO

Como corrigir o Select Field que não funciona no ACF PRO

Como corrigir o Mini Cart que não exibe corretamente no Astra Pro com WooCommerce

Como corrigir o layout quebrado entre Astra Pro e Crocoblock JetEngine no WordPress

Como corrigir o layout quebrado de páginas de curso do Tutor LMS com Astra Pro no WordPress

Setores

Extensões

Integrações

Extensões

Hero Sections

Seções de CTA

Login

Blog

Cabeçalhos

Seções de FAQ

Cadastro

Blog individual

Rodapés

Seções de contato

Seções de preços

Faixas

Portfólio

Seções de equipe

Números

Logotipos