Como carregar o wp_editor () através do AJAX / jQuery

22

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?

Aaron Wagner
fonte
você tentou fazer uma chamada ajax via admin-ajax.php? Se não fazer uma função com o seu código, em seguida, chamá-lo viaadmin-ajax.php
Sisir
Será que esta sugestão ajuda? Nesse caso, não é uma pergunta do WordPress. :)
fuxia
@ Sir Sir, Se estou lendo sua sugestão corretamente, não funcionou. Eu usei isso para chamar o formulário Ajax: $('#sph-tabs-section-tab'+newTab).load('/wp-admin/admin-ajax.php?action=sph_add_editor');e adicionei uma função que retorna wp_editor(). É chamado sem nenhum problema, mas ainda assim retorna o editor sem botões. (exata mesmos resultados que o item 1 no OP)
Aaron Wagner
Uma vez inicializado, o TinyMCE não pode ser movido no DOM. Você deve removê-lo, mover-se no DOM e inicializar novamente. Código semelhante, mas para comentários de front-end aqui no meu blog: techytalk.info/… O formulário de comentários é movido quando o usuário clica em responder / cancelar resposta.

Respostas:

7

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.

Dale Sattler
fonte
4

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.

Goran Jakovljevic
fonte
1
tinymce é um recurso externo, então acho que eles podem achar que os documentos do tinymce o cobrem - tinymce.com/docs -, mas são muito pobres em exemplos ... Além disso, você deve incluir scripts de tincemce para que essa resposta funcione! (maneira mais simples é a de um manequim saída PHP wp_editor()com tinymceconjunto de arg para true:-)
jave.web
obrigado companheiro ... isso funciona para mim também - depois de retornar os dados do ajax, eu apenas inicializo isso ...;)
Sagive SEO
3

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
T.Todua
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 após o seu ajax, assim:

$('#my_new_textarea_container').html(response).tinymce_textareas();
shahar
fonte
2
Por favor, explique como isso funciona? Isso não funciona. Eu tentei.
Ahmed Fouad
Depois de adicionar o conteúdo ajax que contém a área de texto que desejo tinyMCE on ( response), chame a função tinymce_textareas que inicializa tinyMCE nas novas áreas de texto.
21413
1

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.

bueltge
fonte
Isto requer uma biblioteca para uso - T5 ... não é uma solução apenas de WP
cale_b
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 .

Dileep Kumar Awasthi
fonte
Compartilhe uma idéia de como esse código pode ajudar e adicione o link para obter mais detalhes. As respostas somente para links se tornam inválidas se o link estiver quebrado - espero que você entenda. :)
Mayeenul Islam
Esse link está quebrado no momento e eu não tenho nenhum contexto por trás da resposta. (Um dos muitos razão pela qual "apenas um link" respostas são ruins)
Sudar
Isso funciona, mas tem alguns problemas, quando você seleciona texto ou visual que cria áreas de texto duplicados dentro do editor
Johan Pretorius
0

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.

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

Tim Matz
fonte
0

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');
Isaac Levi Felix Salinas
fonte