Comment charger wp_editor () via AJAX / jQuery

22

Mon thème est développé sur mesure et très 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 est du côté de l’administrateur, dans le type de post "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, à l'intérieur d'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 de taper et d’interagir avec les boutons du mode HTML)

La question est donc de savoir si quelqu'un a eu de la chance d'ajouter des éditeurs via des appels AJAX. Un conseil?

    
posée Aaron Wagner 10.05.2012 - 17:30
la source

8 réponses

6

Pour que les balises rapides apparaissent, vous devez les ré-instancier dans 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 met en cache en tant que variable. J'exécute la méthode de création d'éditeur sur init. Cela semble obliger WordPress à appliquer 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é.

    
réponse donnée Dale Sattler 04.10.2012 - 05:11
la source
2

Vous devez appeler l'éditeur init une fois que vous avez ajouté votre ajax textarea. Je l'ai fait comme suit:

$.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();
    
réponse donnée shahar 20.05.2012 - 19:55
la source
2

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

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

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

    
réponse donnée Goran Jakovljevic 05.04.2016 - 09:08
la source
2

Enfin, la 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 le tableau de bord, exécutez cette fonction (remarque, utilisez My_TextAreaID_22 et 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
    
réponse donnée T.Todua 20.06.2015 - 21:36
la source
1

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

    
réponse donnée bueltge 17.02.2014 - 09:53
la source
0

Utilisez ce code, j'espère que cela vous aidera:

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

Vous trouverez plus de détails à ce sujet ici .

    
réponse donnée Dileep Kumar Awasthi 15.04.2015 - 01:15
la source
0

Je l'ai géré de cette manière:

  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. Ensuite, 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

    
réponse donnée Tim Matz 11.10.2016 - 12:11
la source
0

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

Appel de scripts 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');
    
réponse donnée Isaac Levi Felix Salinas 08.03.2018 - 22:46
la source

Lire d'autres questions sur les étiquettes