Como carregar wp_editor () através de AJAX / jQuery

22

Eu tenho um tema personalizado desenvolvido e muito complexo. Uma das coisas que eu tenho é várias áreas de conteúdo onde os usuários podem especificar o conteúdo para guias específicas. Eu carrego várias instâncias do editor do WordPress através da função wp_editor() . Funciona perfeitamente. (Isso é tudo do 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, carreguei 6 editores na página). Os usuários podem ter 1-7 guias.

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

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

  1. Crie um arquivo php que tenha o bootstrap admin incluído e, em seguida, carregue o editor com wp_editor() . Eu então faço um jQuery $.load para chamar a página e incluo o HTML resultante na área que ele precisa exibir. Isso realmente não funciona, no entanto, à medida que os botões de formatação dos editores desaparecem (é interessante notar que, ao puxar a página para cima diretamente, o editor exibe e funciona perfeitamente)
  2. Carregou o editor na página, dentro de um div oculto e, depois que uma guia for adicionada, use jquery para movê-lo para o lugar. Isso carrega o editor intacto, mas você não pode usar nenhum dos botões do editor (eles exibem, mas não fazem nada), e você não pode colocar o cursor na área de texto (curioso, no entanto, que mudar para o modo HTML permite digitar e alguma interação com os botões do modo HTML)

Então a questão é: alguém teve alguma sorte em adicionar editores através de chamadas AJAX? Algum conselho?

    
por Aaron Wagner 10.05.2012 / 17:30
fonte

8 respostas

6

Para que as tags rápidas apareçam, você precisa instanciá-las em seu manipulador ajax oncomplete.

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']);
        }

Eu consegui fazer o editor carregar primeiro chamando uma função estática que cria o editor e armazena em cache como variável. Eu corro o método de criação de editor no init. Isso parece ter wordpress para enque todos os scripts necessários.

É importante que, quando você cria sua instância do editor, que você a configure para usar o tinymce, assim o arquivo tinymce js também é incluído.

    
por Dale Sattler 04.10.2012 / 05:11
fonte
2

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 depois do seu ajax, assim:

$('#my_new_textarea_container').html(response).tinymce_textareas();
    
por shahar 20.05.2012 / 19:55
fonte
2

Depois de lutar com ele, encontrei 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 exista documentação dentro do códice.

    
por Goran Jakovljevic 05.04.2016 / 09:08
fonte
2

Finalmente, solução de trabalho:

adicione uma 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 Dashboard, execute essa função (observe o uso de My_TextAreaID_22 e 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
    
por T.Todua 20.06.2015 / 21:36
fonte
1

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

    
por bueltge 17.02.2014 / 09:53
fonte
0

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 .

    
por Dileep Kumar Awasthi 15.04.2015 / 01:15
fonte
0

Eu consegui assim:

  1. Primeiro você precisa chamar o 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 diferente e único. As configurações devem ser as mesmas que as configurações no seu editor de ajax.

  1. Segundo, você precisa chamar isso de 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

    
por Tim Matz 11.10.2016 / 12:11
fonte
0

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

Para adicionar 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 anexe-o a um container, 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');

JS Script (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});
    });
}
});

Chamar scripts de enfileiramento:

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');
    
por Isaac Levi Felix Salinas 08.03.2018 / 22:46
fonte