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

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.

Erros relacionados

- [Como corrigir o WYSIWYG Editor que não carrega no ACF PRO](https://full.services/wp-fixer/corrigir-wysiwyg-editor-acf-pro/)
- [Como corrigir o Image Field no ACF PRO](https://full.services/wp-fixer/corrigir-image-field-acf-pro/)
- [Como corrigir o Color Picker que não aplica a cor no frontend no ACF PRO](https://full.services/wp-fixer/corrigir-color-picker-frontend-acf-pro/)

## 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

1. 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
```

2. 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
```

3. 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
```

4. 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
```

5. 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
```


## Código

```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.

**Fonte:** [Advanced Custom Fields — Wysiwyg Editor (Field Type)](https://www.advancedcustomfields.com/resources/wysiwyg-editor/)