Eu tenho um tema que é personalizado desenvolvido e realmente complexo. Uma das coisas que tenho são várias áreas de conteúdo nas quais os usuários podem especificar conteúdo para guias específicas. Carrego várias instâncias do editor do WordPress por meio da wp_editor()função Funciona perfeitamente. (Tudo isso no lado do administrador, no tipo de postagem "Página")

No entanto, comecei a fazer algumas melhorias, incluindo a capacidade de adicionar / remover guias dinamicamente (antes, eu carregava 6 editores na página). Os usuários podem ter de 1 a 7 guias.

Quando os usuários adicionam uma guia, ele precisa adicionar uma instância do editor à página. No entanto, não importa o que eu tente, não consigo carregar e exibir corretamente.

Aqui estão as duas coisas que eu tentei até agora:

1. Crie um arquivo php com a inicialização do administrador incluída e carregue o editor com wp_editor(). Em seguida, faço um jQuery $.loadpara chamar a página e incluir o HTML resultante na área que ele precisa exibir. No entanto, isso realmente não funciona, pois os botões de formatação dos editores desaparecem (vale a pena notar que, ao puxar a página diretamente para cima, o editor é exibido e funciona perfeitamente)
2. Carregou o editor na página, dentro de uma div oculta e, depois que uma guia é adicionada, use o jquery para movê-lo no lugar. Isso carrega o editor intacto, mas você não pode usar nenhum dos botões do editor (eles são exibidos, mas não faz nada) e não pode colocar o cursor na área de texto (curioso, porém, que mudar para o modo HTML permite digitação e alguma interação com os botões do modo HTML)

Portanto, a pergunta é: alguém teve sorte em adicionar editores através de chamadas AJAX? Algum conselho?

Para que as tags rápidas apareçam, é necessário instanciá-las novamente no seu manipulador ajax em um completo.

quicktags({id : 'editorcontentid'});

Meu manipulador de sucesso do ajax se parece com isso;

success: function(data, textStatus, XMLHttpRequest){
            //append editor to dom
            $('#container').append($(data).html());
            //init quicktags
            quicktags({id : 'editorcontentid'});
            //init tinymce
            tinymce.init(tinyMCEPreInit.mceInit['editorcontentid']);
        }

Consegui fazer o editor carregar primeiro chamando uma função estática que cria o editor e o armazena em cache como variável. Eu executo o método de criação do editor no init. Isso parece levar o wordpress a enfileirar todos os scripts necessários.

É importante que, quando você criar sua instância do editor, defina-a para usar tinymce, para que o arquivo tinymce js também seja enquadrado.

Depois de lutar com ele, encontrou a solução que funciona, em um retorno de chamada depois de adicionar um novo elemento:

tinymce.execCommand( 'mceAddEditor', true, element.id );

É estranho que não haja documentação dentro do codex.

Finalmente, solução de trabalho:

adicione ação no wordpress, digamos My_Action_Name(observe também, textarea ID My_TextAreaID_22):

add_action('wp_ajax_My_Action_Name', function(){
    wp_editor( $_POST['default_text'], 'My_TextAreaID_22',      $settings = array( 'tinymce'=>true, 'textarea_name'=>'name77', 'wpautop' =>false,   'media_buttons' => true ,   'teeny' => false, 'quicktags'=>true, )   );    exit;
});

agora, no painel, execute esta função (observe, usando of My_TextAreaID_22e My_Action_Name):

function start_Ajax_request() { 
    My_New_Global_Settings =  tinyMCEPreInit.mceInit.content;       // Get default Wordpress SETTINGS  ( I cant confirm, but if you will need to change target ID, then add this line:  My_New_Global_Settings.selector = "My_TextAreaID_22";   )
    jQuery.post(ajaxurl,
        { action: "My_Action_Name",     default_text: "Hello World"}, 
        function(response,status){ 
            tinymce.init(My_New_Global_Settings); 
            tinyMCE.execCommand('mceAddEditor', false, "My_TextAreaID_22"); 
            quicktags({id : "My_TextAreaID_22"});
            // tinyMCE.execCommand( 'mceAddEditor', true, element.id );
        }
    );

}   
start_Ajax_request();     // < ---- EXECUTE

Você precisa chamar o editor init novamente depois de adicionar sua área de texto ajax, eu fiz assim:

$.fn.tinymce_textareas = function(){
  tinyMCE.init({
    skin : "wp_theme"
    // other options here
  });
};

Em seguida, chame sua função após o seu ajax, assim:

$('#my_new_textarea_container').html(response).tinymce_textareas();

A solução utilizável do @toscho no github . Ele construiu esse bom resultado também para uma pergunta aqui, veja sua resposta para mais detalhes.

Use este código, espero que ajude:

wp_editor( '', 'custom_editor_id' );
\_WP_Editors::enqueue_scripts();
print_footer_scripts();
\_WP_Editors::editor_js();

Mais detalhes podem ser encontrados aqui .

Eu consegui desta maneira:

1. Primeiro, você precisa ligar para wp_editor na página principal, de onde você chama ajax. Mas você deve envolvê-lo em div oculto:

    <div style="display:none">
    <?php
    wp_editor( '', 'unique_id', array(
        'media_buttons' => false,
        'textarea_rows' => 10,
        'teeny' => true,
    ) );
    ?>
    </div>

O ID deve ser redundante e exclusivo. As configurações devem ser as mesmas do seu editor ajax.

2. Segundo, você precisa chamar isso em resposta ajax:

wp_editor( '', '[set id as you need]', array(the same settings as in the main page) ); _WP_Editors::editor_js(); //this print editor init code

Isso funcionará nas páginas de administração.

Para anexar um novo editor wp a um contêiner por JS AJAX:

1) Crie uma função wp_ajax em functions.php para retornar o wp_editor

2) Crie um script jQuery para solicitar um novo editor de texto e anexá-lo a um contêiner, neste caso, ao pressionar um botão

Arquivo PHP

function yourprefix_get_text_editor() {
    $content = ""; // Empty because is a new editor
    $editor_id = $_POST["text_editor_id"]; // Random ID from AJAX JS call
    $textarea_name = $_POST["textarea_name"]; // Name from JS file
    $settings = array(
        'textarea_name' => $textarea_name
    );
    wp_editor($content, $editor_id, $settings);
    wp_die(); // Mandatory wp_die
}
add_action('wp_ajax_yourprefix_get_text_editor', 'yourprefix_get_text_editor');

Script JS (jsfile.js)

jQuery(function($) {
$("someelement").click(function(e) { // To Add an Editor from a button click
    var target = themeajax.ajax_url; // Passed from wp_localize_script
    var editor_id = "editorid"; // Generate this dynamically
    var textarea_name = "textareaname" // Generate this as you need
    var data = {
        'action': 'yourprefix_get_text_editor',
        'text_editor_id': editor_id,
        'textarea_name': textarea_name
    }
    $.post(target, data, function(response) {
        container.append(response); // Use your logic to get the container where you want to append the editor
        tinymce.execCommand('mceAddEditor', false, editor_id);
        quicktags({id : editor_id});
    });
}
});

Os scripts de enfileiramento chamam:

function yourprefix_admin_scripts($hook) {
    wp_enqueue_script('your-slug', get_stylesheet_directory_uri() . '/path/to/jsfile.js', array('jquery'), null, true);
    wp_localize_script('your-slug', 'themeajax', array(
        'ajax_url' => admin_url('admin-ajax.php')
    ));
}
add_action('admin_enqueue_scripts', 'yourprefix_admin_scripts');