Comment charger wp_editor () via AJAX / jQuery

22

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

Cependant, j'ai commencé à apporter quelques améliorations, notamment la possibilité d'ajouter / 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 n'arrive 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 avec le bootstrap d'administration inclus, puis chargez l'éditeur avec wp_editor(). Je fais ensuite un jQuery $.loadpour appeler la page et inclure le code HTML résultant dans la zone qu'il doit afficher. Cela ne fonctionne pas vraiment, cependant, car les boutons de formatage des éditeurs disparaissent (il convient de noter que, en tirant la page directement, l'éditeur s'affiche et fonctionne parfaitement)
  2. A chargé l'éditeur sur la page, à l'intérieur d'un div caché, puis une fois un onglet ajouté, utilisez jquery pour le déplacer en place. Cela charge l'éditeur dans le 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, cependant, que le passage en mode HTML permet de taper et d'interagir avec les boutons du mode HTML)

La question est donc: est-ce que quelqu'un a eu de la chance d'ajouter des éditeurs via les appels AJAX? Aucun conseil?

Aaron Wagner
la source
avez-vous essayé de faire un appel ajax via admin-ajax.php? Si vous ne faites pas de fonction avec votre code, appelez-le viaadmin-ajax.php
Sisir
Est -ce que cette suggestion d' aide? Si c'est le cas, ce n'est pas une question WordPress. :)
fuxia
@Sisir, Si je lis correctement votre suggestion, cela n'a pas fonctionné. J'ai utilisé cela pour appeler le formulaire Ajax: $('#sph-tabs-section-tab'+newTab).load('/wp-admin/admin-ajax.php?action=sph_add_editor');puis ajouté une fonction qui retourne wp_editor(). Il est appelé sans problème, mais il ne renvoie que l'éditeur sans boutons. (mêmes résultats que l'article 1 du PO)
Aaron Wagner
Une fois initialisé, TinyMCE ne peut pas être déplacé dans DOM. Vous devez le supprimer, déplacer dans DOM et initialiser à nouveau. Code similaire mais pour les commentaires frontaux ici sur mon blog: techytalk.info/… Le formulaire de commentaires est déplacé lorsque l'utilisateur clique sur Répondre / Annuler la réponse.

Réponses:

7

Pour faire apparaître les quicktags, vous devez les réinstancier dans votre gestionnaire ajax oncomplete.

quicktags({id : 'editorcontentid'});

Mon gestionnaire de réussite 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 à charger l'éditeur à charger en appelant d'abord une fonction statique qui crée l'éditeur et le met en cache en tant que variable. J'exécute la méthode de création d'éditeur sur init. Cela semble permettre à wordpress d'exécuter tous les scripts requis.

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

Dale Sattler
la source
4

Après avoir rencontré des difficultés, 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.

Goran Jakovljevic
la source
1
tinymce est une ressource externe, donc je pense qu'ils pourraient penser que les propres documents de tinymce le couvrent - tinymce.com/docs - mais assez pauvres en exemples ... Vous devez également inclure des scripts tincemce pour que cette réponse fonctionne! (le moyen le plus simple est de produire un PHP factice wp_editor()avec tinymcearg défini sur true:-)
jave.web
merci mate ... cela fonctionne aussi pour moi - après avoir renvoyé les données d'ajax, je viens de l'initialiser ...;)
Sagive SEO
3

Enfin, solution de travail:

ajouter une action dans wordpress, disons My_Action_Name(notez également, ID de zone de texte 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, utilisation de My_TextAreaID_22et 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
la source
2

Vous devez appeler à nouveau l'éditeur init une fois que vous avez ajouté votre zone de texte ajax, je l'ai fait comme ceci:

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

Appelez ensuite votre fonction après votre ajax, comme ceci:

$('#my_new_textarea_container').html(response).tinymce_textareas();
shahar
la source
2
Veuillez expliquer comment cela fonctionne? Cela ne fonctionne pas. Je l'ai essayé.
Ahmed Fouad le
Après avoir ajouté le contenu ajax qui contient la zone de texte sur laquelle je veux tinyMCE ( response), appelez la fonction tinymce_textareas qui initialise tinyMCE sur les nouvelles zones de texte.
shahar
1

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

bueltge
la source
Cela nécessite une bibliothèque pour l'utilisation - T5 ... pas une solution uniquement WP
cale_b
0

Utilisez ce code, j'espère qu'il 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 .

Dileep Kumar Awasthi
la source
Veuillez partager un résumé de la façon dont ce code peut vous aider, puis ajoutez le lien pour plus de détails. Les réponses de lien uniquement deviennent invalides si le lien est rompu - j'espère que vous comprenez. :)
Mayeenul Islam
Ce lien est rompu en ce moment et je n'ai aucun contexte derrière la réponse. (L'une des nombreuses raisons pour lesquelles les réponses "juste un lien" sont mauvaises)
Sudar
Cela fonctionne mais a quelques problèmes, lorsque vous sélectionnez du texte ou du visuel, cela crée des zones de texte en double dans l'éditeur
Johan Pretorius
0

Je l'ai géré 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 une div cachée:

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

L'ID doit être unique et unique. Les paramètres doivent être les mêmes que 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

Tim Matz
la source
0

Cela fonctionnera sur les pages d'administration.

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

1) Créez une fonction wp_ajax dans functions.php pour retourner 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');

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

Les scripts de mise en file d'attente appellent:

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
la source