Laden von wp_editor () über AJAX / jQuery

22

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?

Aaron Wagner
quelle
Haben Sie versucht, einen Ajax-Anruf über zu tätigen admin-ajax.php? Wenn Sie mit Ihrem Code keine Funktion ausführen, rufen Sie ihn überadmin-ajax.php
Sisir
Hilft dieser Vorschlag ? Wenn ja, ist es keine WordPress-Frage. :)
fuxia
@ Sir, wenn ich Ihren Vorschlag richtig lese, dann hat es nicht funktioniert. Ich habe dies verwendet, um das Ajax-Formular aufzurufen: $('#sph-tabs-section-tab'+newTab).load('/wp-admin/admin-ajax.php?action=sph_add_editor');und habe dann eine Funktion hinzugefügt, die zurückgibt wp_editor(). Es wird problemlos aufgerufen, gibt aber nur den Editor ohne Schaltflächen zurück. (Genau die gleichen Ergebnisse wie Punkt 1 im OP)
Aaron Wagner
Einmal initialisiert, kann TinyMCE nicht mehr in DOM verschoben werden. Sie müssen es entfernen, in DOM verschieben und erneut initialisieren. Ein ähnlicher Code, aber für Frontend-Kommentare hier in meinem Blog: techytalk.info/… Das Kommentarformular wird verschoben, wenn der Benutzer auf "Antworten" klickt oder die Antwort abbricht .

Antworten:

7

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.

Dale Sattler
quelle
4

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.

Goran Jakovljevic
quelle
1
tinymce ist eine externe Ressource, daher denke ich, dass sie Tinymces eigene Dokumente behandeln - tinymce.com/docs - aber es gibt nur wenige Beispiele ... Außerdem müssen Sie tincemce-Skripte einbinden, damit diese Antwort funktioniert! (simpliest Weg ist , um einen Dummy - Ausgang PHP wp_editor()mit tinymceArg- Satz true:-)
jave.web
danke kumpel ... das funktioniert auch bei mir - nachdem ich die daten von ajax zurückgegeben habe, initialisiere ich das einfach ...;)
Sagive SEO
3

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
T.Todua
quelle
2

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();
Shahar
quelle
2
Bitte erläutern Sie, wie das funktioniert. Das funktioniert nicht. Ich versuchte es.
Ahmed Fouad
Rufen Sie nach dem Hinzufügen des Ajax-Inhalts, der den Textbereich enthält, für den tinyMCE aktiviert werden soll ( response), die Funktion tinymce_textareas auf, mit der tinyMCE für die neuen Textbereiche initialisiert wird.
Shahar
1

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.

bueltge
quelle
Dies erfordert eine Bibliothek zur Verwendung - T5 ... keine
reine
0

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 .

Dileep Kumar Awasthi
quelle
Teilen Sie uns bitte mit, wie dieser Code helfen kann, und fügen Sie dann den Link für weitere Details hinzu. Nur-Link-Antworten werden ungültig, wenn der Link nicht funktioniert - ich hoffe, Sie verstehen. :)
Mayeenul Islam
Dieser Link ist momentan defekt und ich habe keinen Kontext hinter der Antwort. (Einer der vielen Gründe, warum "nur ein Link" Antworten schlecht sind)
Sudar
Dies funktioniert, hat aber einige Probleme, wenn Sie Text oder Bild auswählen, werden doppelte Textbereiche im Editor erstellt
Johan Pretorius
0

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.

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

Tim Matz
quelle
0

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