web-dev-qa-db-fra.com

Comment charger wp_editor () via AJAX/jQuery

J'ai un thème développé sur mesure et vraiment complexe. L'une des choses que j'ai est plusieurs zones de contenu où les utilisateurs peuvent spécifier le contenu pour des onglets spécifiques. Je charge plusieurs instances de l'éditeur WordPress via la fonction wp_editor(). Ça fonctionne parfaitement. (Tout cela se trouve du côté administrateur, dans le type de message "Page")

Cependant, j'ai commencé à apporter quelques améliorations, notamment la possibilité d'ajouter/de supprimer des onglets de manière dynamique (auparavant, j'avais chargé 6 éditeurs sur la page). Les utilisateurs peuvent avoir 1-7 onglets.

Lorsque les utilisateurs ajoutent un onglet, il doit ajouter une instance de l'éditeur à la page. Cependant, peu importe ce que j'essaie, je ne parviens pas à le charger et à l'afficher correctement.

Voici les 2 choses que j'ai essayées jusqu'à présent:

  1. Créez un fichier php contenant le bootstrap admin, puis chargez l'éditeur avec wp_editor(). Je fais ensuite un jQuery $.load pour appeler la page et inclure le code HTML résultant dans la zone à afficher. Cependant, cela ne fonctionne pas vraiment, car les boutons de formatage des éditeurs disparaissent (il est à noter que, en remontant directement la page, l'éditeur s'affiche et fonctionne parfaitement)
  2. Chargez l'éditeur sur la page, dans un div masqué, puis une fois qu'un onglet est ajouté, utilisez jquery pour le déplacer. Ceci charge l'éditeur avec tact, mais vous ne pouvez utiliser aucun des boutons de l'éditeur (ils s'affichent, mais ne font rien) et vous ne pouvez pas placer votre curseur dans la zone de texte (curieux, toutefois, de passer en mode HTML permet la frappe et une certaine interaction avec les boutons de mode HTML)

La question est donc la suivante: quelqu'un at-il eu de la chance en ajoutant des éditeurs via AJAX appels? Aucun conseil?

ajaxwp-editor
22
Aaron Wagner

Pour que les quicktags apparaissent, vous devez les ré-instancier avec votre gestionnaire ajax oncomplete.

quicktags({id : 'editorcontentid'});

Mon gestionnaire de succès ajax ressemble à ceci;

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

J'ai réussi à faire charger l'éditeur en appelant d'abord une fonction statique qui crée l'éditeur et le cache en tant que variable. J'exécute la méthode de création d'éditeur sur init. Cela semble obliger WordPress à encaper tous les scripts requis.

Il est important que, lorsque vous créez votre instance d'éditeur, vous utilisiez tinymce pour que le fichier tinymce js soit également interrogé.

6
Dale Sattler

Après avoir lutté avec, trouvé la solution qui fonctionne, dans un rappel après avoir ajouté un nouvel élément:

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

C'est étrange qu'il n'y ait aucune documentation à l'intérieur du codex.

3
Goran Jakovljevic

Enfin, solution de travail:

ajouter une action dans wordpress, disons My_Action_Name (notez également, ID textarea 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;
});

maintenant, dans Dashboard, exécutez cette fonction (remarque, en utilisant deMy_TextAreaID_22etMy_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
2
T.Todua

Vous devez rappeler l'éditeur init une fois que vous avez ajouté votre ajax textarea, je l'ai fait comme ceci:

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

Ensuite, appelez votre fonction après votre ajax, comme ceci:

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

La solution utilisable de @toscho sur github . Il construit ce résultat de Nice aussi pour une question ici, voir sa réponse pour plus de détails.

1
bueltge

Cela fonctionnera sur les pages d'administration.

Pour ajouter un nouvel éditeur wp à un conteneur de JS AJAX:

1) Créez une fonction wp_ajax dans functions.php pour renvoyer le wp_editor

2) Créez un script jQuery pour demander un nouvel éditeur de texte et ajoutez-le à un conteneur, dans ce cas, lorsque vous appuyez sur un bouton

Fichier 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});
    });
}
});

Scripts de mise en file d'attente:

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

Je l'ai réussi de cette façon:

  1. Vous devez d’abord appeler wp_editor sur la page principale, d'où vous appelez ajax. Mais vous devez l'envelopper dans div caché:

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

L'identifiant doit être unique et unique. Les paramètres doivent être identiques à ceux de votre éditeur ajax.

  1. Deuxièmement, vous devez appeler ceci en réponse 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

0
Tim Matz

Utilisez ce code, espérons que cela vous aidera:

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

Plus de détails peuvent être trouvés ici .

0
Dileep Kumar Awasthi