ACF WYSIWYG não carrega: como corrigir o editor

Tipo Page Builders

Nome do erro Editor WYSIWYG não carrega no ACF PRO EN: ACF WYSIWYG editor not loading

Severidade Atenção

Descrição O ACF WYSIWYG não carrega quando o TinyMCE não é inicializado no campo: o editor aparece em branco ou sem barra de ferramentas, geralmente em campos adicionados dinamicamente dentro de Repeater e Flexible Content ou com a opção Delay initialization ativa.

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

O campo WYSIWYG do ACF PRO recria o editor de conteúdo do WordPress (o TinyMCE, o mesmo de Posts e Páginas) dentro de um grupo de campos. Segundo a documentação oficial, ele oferece os modos Visual e Texto (configuraveis em Tabs), a barra Full ou Basic (em Toolbar), os botões de upload de mídia (Show Media Upload Buttons) e a opção Delay initialization, que adia o carregamento do editor até o campo ser clicado para acelerar a página. Quando algo nessa cadeia falha, o editor não carrega: a área do campo fica em branco, sem a barra de ferramentas, ou exibe apenas a caixa de texto puro sem o modo Visual.

O problema concentra-se nos campos WYSIWYG adicionados depois que a página já carregou, dentro de um Repeater ou de um Flexible Content. O TinyMCE precisa ser inicializado via JavaScript no momento em que a linha e criada; se esse gatilho falha por um erro de JavaScript de outro plugin, por scripts do admin não enfileirados ou pela opção Delay initialization mal interpretada, a nova instancia do editor nasce vazia. Em telas no frontend (formulários com acf_form), o editor também depende de carregar os scripts do admin do WordPress, que normalmente não estão presentes fora do painel.

Como identificar

Ao adicionar uma nova linha em um Repeater ou Flexible Content, o campo WYSIWYG aparece como uma caixa em branco, sem a barra de ferramentas e sem o conteúdo digitado.
O editor mostra apenas o modo Texto (HTML puro) e o botão ‘Visual’ não alterna para o editor formatado.
No console do navegador surge um erro de JavaScript como ‘tinymce is not defined’ ou ‘wpActiveEditor’ ao abrir ou expandir o campo.
O campo WYSIWYG carrega normalmente na primeira linha do Repeater, mas falha em todas as linhas adicionadas depois sem recarregar a página.
Em um formulário de frontend criado com acf_form, o WYSIWYG aparece sem barra de ferramentas e os botões de upload de mídia não funcionam.

Antes de começar: Antes de desativar plugins, trocar o tema ou alterar a configuração de cache em producao, faça um backup do site (arquivos e banco de dados) ou teste primeiro em um ambiente de staging, para reverter caso o editor ou outra área quebre.

Como prevenir

Evite ativar a opção ‘Delay initialization?’ em campos WYSIWYG dentro de Repeater e Flexible Content, onde a reinicializacao do editor em linhas dinâmicas e mais sensivel.
Mantenha o ACF PRO e o WordPress sempre atualizados para que as correcoes de inicializacao do TinyMCE em campos dinâmicos cheguem ao seu site.
Ao usar plugins de cache, exclua os scripts do editor (tinymce) e do ACF da minificacao e do defer para preservar a ordem de carregamento.
Em formulários de frontend com acf_form, padronize a chamada de acf_form_head e de wp_enqueue_editor no template para garantir os scripts do editor.

Causa

O campo WYSIWYG esta dentro de um Repeater ou Flexible Content e a nova linha foi adicionada via AJAX depois do carregamento da página: o TinyMCE não e reinicializado na linha recem-criada e o editor nasce em branco.
A opção 'Delay initialization?' do campo esta ativa, adiando o carregamento do TinyMCE até o clique; quando outro script intercepta esse clique, a inicializacao nunca dispara e o editor fica vazio.
Um erro de JavaScript de outro plugin ou do tema interrompe a fila de scripts do admin antes do ACF chamar acf.do_action('append'), impedindo a inicializacao do editor nas linhas dinâmicas.
O WYSIWYG esta em um formulário de frontend gerado por acf_form e os scripts do editor do WordPress (wp_enqueue_editor) não foram enfileirados naquela página, entao o TinyMCE nunca e carregado fora do painel.
Um plugin de cache ou de otimização concatenou ou adiou (defer) os scripts do TinyMCE e do ACF, quebrando a ordem de carregamento necessaria para o editor inicializar.

Como resolver

Confirme se o problema e so nas linhas dinâmicas: Edite um post com o grupo de campos e observe: se a primeira linha do Repeater carrega o editor mas as linhas adicionadas depois ficam em branco, o problema e a reinicializacao do TinyMCE nas linhas novas, não o campo em si. Esse teste isola a causa antes de mexer em código.
```
Painel WP -> edite um post com o grupo de campos ACF
Adicione uma nova linha no Repeater e clique no campo WYSIWYG
Abra o console do navegador (F12 -> Console) e verifique se aparece 'tinymce is not defined'
```
Desative a opção Delay initialization do campo: Na documentação oficial, a opção 'Delay initialization?' adia o carregamento do editor até o clique. Se ela estiver ativa e o editor não reagir ao clique, desligue-a para que o TinyMCE carregue junto com a página e elimine a dependencia do gatilho de clique.
```
Painel WP -> ACF -> Grupos de Campos -> abra o grupo
Abra o campo WYSIWYG e localize a opção 'Delay initialization?'
Desmarque a opção e salve o grupo de campos
```
Isole o conflito de JavaScript no editor: Um erro de JavaScript de outro plugin ou tema interrompe a fila de scripts do admin antes do ACF reinicializar o editor. Desative os demais plugins um a um e troque para um tema padrão, recarregando o editor a cada teste para achar o culpado, e reative depois de identifica-lo.
```
Painel WP -> Plugins -> desative os demais plugins um a um
Painel WP -> Aparencia -> Temas -> ative um tema padrão (ex.: Twenty Twenty-Four)
Adicione uma linha no Repeater e confira o console a cada teste
```
Limpe o cache e desligue a otimização de scripts: Plugins de cache que concatenam ou adiam (defer) JavaScript podem quebrar a ordem de carregamento do TinyMCE e do ACF. Limpe o cache e exclua os scripts do editor e do ACF da minificacao e do defer para restaurar a inicializacao.
```
Painel WP -> plugin de cache -> Limpar todo o cache
Exclua da minificacao/defer os handles do TinyMCE e do ACF (tinymce, acf-input)
Recarregue o editor e teste novamente
```
Carregue os scripts do editor em formulários de frontend: Se o WYSIWYG esta em um formulário gerado por acf_form, os scripts do editor do WordPress precisam ser enfileirados na página antes do formulário. Chame wp_enqueue_editor e acf_form_head no template para que o TinyMCE carregue fora do painel.
```
No template, antes do get_header(): acf_form_head();
Garanta a chamada de wp_enqueue_editor() na página do formulário
Recarregue a página do frontend e confira a barra de ferramentas do WYSIWYG
```

JavaScript

// Reinicializa o editor WYSIWYG do ACF em linhas/blocos adicionados depois do load.
( function( $ ) {
    if ( typeof acf === 'undefined' ) {
        return;
    }
    acf.add_action( 'append', function( $el ) {
        $el.find( '.acf-field-wysiwyg .wp-editor-area' ).each( function() {
            var id = $( this ).attr( 'id' );
            if ( id && typeof tinymce !== 'undefined' && ! tinymce.get( id ) ) {
                tinymce.execCommand( 'mceAddEditor', false, id );
            }
        } );
    } );
} )( jQuery );

Perguntas frequentes

Por que o WYSIWYG do ACF aparece em branco no Repeater

Porque o campo foi adicionado por AJAX depois que a página carregou e o TinyMCE não foi reinicializado na linha nova. O editor da primeira linha funciona, mas as linhas adicionadas depois nascem vazias até a página ser recarregada ou o editor ser reinicializado por JavaScript.

A opção Delay initialization atrapalha o WYSIWYG

Pode atrapalhar. Segundo a documentação do ACF, ela adia o carregamento do editor até o campo ser clicado para acelerar a página. Se outro script intercepta esse clique, a inicializacao nunca dispara e o campo fica em branco. Desligar a opção faz o TinyMCE carregar junto com a página.

Como faço o WYSIWYG funcionar em um formulário de frontend com acf_form

O editor depende dos scripts do admin do WordPress, que não estão presentes no frontend por padrão. Chame acf_form_head no topo do template e garanta wp_enqueue_editor na página, para que o TinyMCE e os botões de upload de mídia carreguem fora do painel.

O que significa o erro tinymce is not defined no console

Significa que o objeto JavaScript do TinyMCE não foi carregado ou foi quebrado antes do ACF inicializar o campo. Costuma indicar conflito com outro plugin, scripts concatenados por cache ou o editor não enfileirado em uma página de frontend.

Por que o WYSIWYG mostra so o modo Texto sem o Visual

O modo Visual depende do TinyMCE inicializado. Se ele não carrega, sobra apenas a caixa de texto puro. Verifique a configuração de Tabs do campo (Visual e Text), desligue Delay initialization e procure conflitos de JavaScript que impecam a inicializacao.

Um plugin de cache pode quebrar o editor WYSIWYG do ACF

Sim. Cache que minifica, concatena ou adia (defer) o JavaScript pode alterar a ordem de carregamento do TinyMCE e do ACF e impedir a inicializacao. Exclua os scripts do editor e do ACF da otimização e limpe o cache para restaurar o campo.

Posso mudar a barra de ferramentas do WYSIWYG

Sim. No campo, a opção Toolbar permite escolher entre Full (a barra completa do editor do WordPress, com duas linhas de botões) e Basic (uma linha reduzida), conforme a documentação do ACF. Se a barra não aparece, o problema e a inicializacao do editor, não a escolha da toolbar.

Atenção

Como corrigir o widget Post Grid que não exibe posts no Essential Addons

O widget Post Grid do Essential Addons mostra a grade vazia quando a Query do widget aponta para uma fonte sem conteúdo: um Source de termo sem posts publicados, um Custom Post Type não suportado, um filtro de categoria que não casa ou um Offset maior que o total de posts.

Atenção

Como corrigir o JetPopup que não abre no mobile no WordPress

O JetPopup que não abre no mobile geralmente acontece quando o gatilho do popup depende de um evento que não existe no toque, quando a opção de visibilidade esconde o popup em telas pequenas, ou quando um plugin de cache adia o JavaScript do JetPopup no celular.

Atenção

Como corrigir WPBakery com shortcodes quebrados

WPBakery com shortcodes quebrados mostra códigos crus como [vc_row] e [vc_column] no lugar do layout montado, porque o plugin que interpreta esses shortcodes não esta ativo ou registrado. A causa quase sempre e o WPBakery (Visual Composer) desativado, embutido num tema que sumiu, ou páginas migradas para um site sem o plugin.

Atenção

Como corrigir custom fields do JetEngine que não exibem em cursos do Tutor LMS no WordPress

O custom field do JetEngine não exibe em cursos do Tutor LMS quando a Meta Box não esta atribuida ao post type courses ou quando o Dynamic Field aponta para um object context diferente do curso, deixando o meta field vazio na página renderizada pelo Tutor.

Crítico

Como corrigir erro 500 ao editar com Elementor

O erro 500 ao editar com Elementor é um Internal Server Error que derruba o editor ao abrir ou salvar a página, geralmente com tela branca ou aviso de erro. A causa quase sempre é memória PHP esgotada, um limite de servidor estourado (max_input_vars/tempo) ou um conflito de plugin que dispara um erro fatal no PHP.

Grave

Como corrigir o erro de conexão entre JetEngine e Elementor

A conexão JetEngine Elementor falha quando os widgets do JetEngine, como o Listing Grid, e as Dynamic Tags não aparecem no editor do Elementor. A causa quase sempre e o módulo Elementor Views desativado no painel do JetEngine, versões incompativeis entre os plugins, ou o JavaScript do editor quebrado por cache.

Setores

Extensões

Integrações

Como corrigir o WYSIWYG Editor que não carrega no ACF PRO

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

Como identificar

Como prevenir

Causa

Como resolver

Perguntas frequentes

Itens relacionados

Como corrigir o widget Post Grid que não exibe posts no Essential Addons

Como corrigir o JetPopup que não abre no mobile no WordPress

Como corrigir WPBakery com shortcodes quebrados

Como corrigir custom fields do JetEngine que não exibem em cursos do Tutor LMS no WordPress

Como corrigir erro 500 ao editar com Elementor

Como corrigir o erro de conexão entre JetEngine e Elementor

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