Ich habe ein Thema, das speziell entwickelt und sehr komplex ist. Ich habe unter anderem mehrere Inhaltsbereiche, in denen Benutzer Inhalte für bestimmte Registerkarten angeben können. Ich lade mehrere Instanzen des WordPress-Editors über die wp_editor()Funktion. Es funktioniert perfekt (Dies ist alles auf der Admin-Seite, im Post-Typ "Seite")

Ich habe jedoch einige Verbesserungen vorgenommen, einschließlich der Möglichkeit, Tabs dynamisch hinzuzufügen / zu entfernen (zuvor habe ich 6 Editoren auf die Seite geladen). Benutzer können 1-7 Registerkarten haben.

Wenn Benutzer eine Registerkarte hinzufügen, muss der Seite eine Instanz des Editors hinzugefügt werden. Unabhängig davon, was ich versuche, kann ich es nicht laden und korrekt anzeigen.

Hier sind die 2 Dinge, die ich bisher ausprobiert habe:

1. Erstellen Sie eine PHP-Datei, in der der Admin-Bootstrap enthalten ist, und laden Sie dann den Editor mit wp_editor(). Ich mache dann eine jQuery$.load rufe die Seite mit auf und füge den resultierenden HTML-Code in den Bereich ein, der angezeigt werden soll. Dies funktioniert jedoch nicht wirklich, da die Formatierungsschaltflächen des Editors verschwinden (es ist erwähnenswert, dass beim direkten Aufrufen der Seite der Editor perfekt angezeigt wird und funktioniert).
2. Laden Sie den Editor auf der Seite in ein ausgeblendetes Div, und verschieben Sie ihn mit jquery, sobald ein Tab hinzugefügt wurde. Dadurch wird der Editor im Takt geladen, aber Sie können keine der Editorschaltflächen verwenden (sie werden angezeigt, tun aber nichts) und Sie können den Cursor nicht in den Textbereich setzen (neugierig, jedoch, wenn Sie in den HTML-Modus wechseln) Ermöglicht das Schreiben und einige Interaktionen mit den HTML-Modus-Schaltflächen

Die Frage ist also, hat jemand Glück gehabt, Redakteure über AJAX-Aufrufe hinzuzufügen? Irgendein Rat?

Damit die QuickTags angezeigt werden, müssen Sie sie in Ihrem Ajax Oncomplete-Handler erneut instanziieren.

quicktags({id : 'editorcontentid'});

Mein Ajax Success Handler sieht so aus;

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

Ich habe es geschafft, den Editor zum Laden zu bringen, indem ich zuerst eine statische Funktion aufgerufen habe, die den Editor erstellt und als Variable zwischenspeichert. Ich führe die Editorerstellungsmethode auf init aus. Dies scheint WordPress dazu zu bringen, alle erforderlichen Skripte in die Enque zu bringen.

Es ist wichtig, dass Sie beim Erstellen Ihrer Editorinstanz Tinymce festlegen, damit auch die Tinymce-JS-Datei verwendet wird.

Nachdem Sie damit gekämpft haben, haben Sie in einem Rückruf nach dem Hinzufügen eines neuen Elements die Lösung gefunden, die funktioniert:

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

Es ist seltsam, dass es im Codex keine Dokumentation gibt.

Schließlich funktionierende Lösung:

füge eine Aktion in WordPress hinzu, sagen wir mal My_Action_Name(auch Notiz, Textfeld 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;
});

Führen Sie nun im Dashboard die folgende Funktion aus (Anmerkung, Verwendung von My_TextAreaID_22und 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

Sie müssen den Editor init erneut aufrufen, sobald Sie Ihr Ajax-Textarea hinzugefügt haben. Ich habe es folgendermaßen gemacht:

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

Rufen Sie dann Ihre Funktion nach Ihrer Ajax wie folgt auf:

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

Die die brauchbare Lösung von @toscho auf Github . Dieses schöne Ergebnis baut er auch für eine Frage hier auf, siehe seine Antwort für weitere Details.

Verwenden Sie diesen Code, ich hoffe, es wird helfen:

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

Weitere Details finden Sie hier .

Ich habe es so geschafft:

1. Zuerst müssen Sie wp_editor auf der Hauptseite aufrufen, von wo aus Sie Ajax aufrufen. Aber Sie müssen es in versteckte div wickeln:

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

ID muss rundom und einzigartig sein. Die Einstellungen müssen mit den Einstellungen in Ihrem Ajax-Editor übereinstimmen.

2. Zweitens müssen Sie dies in Ajax-Antwort aufrufen:

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

Dies funktioniert auf Admin-Seiten.

So hängen Sie einen neuen WP-Editor an einen Container von JS AJAX an:

1) Erstellen Sie eine wp_ajax-Funktion in functions.php, um den wp_editor zurückzugeben

2) Erstellen Sie ein jQuery-Skript, um einen neuen Texteditor anzufordern, und hängen Sie ihn für diesen Fall per Knopfdruck an einen Container an

PHP-Datei

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

Aufruf von Enqueue-Skripten:

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