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?

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

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.

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

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

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.

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 .

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.

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

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