WP-Editor – wp_editor() wird beim Ajax-Aufruf nicht richtig angezeigt

Lesezeit: 3 Minuten

Ich erstelle ein WordPress-Plugin. Es hat eine Funktion, um den Editor anzuzeigen, wenn ein Produkt über AJAX hinzugefügt wird, aber der Editor wird nicht richtig angezeigt.

Der Benutzer kann so viele Produkte hinzufügen, wie er möchte. Denken Sie also daran, dass es mehr als einen wp_editor() geben wird.

Bitte beachten Sie den beigefügten Screenshot:

Geben Sie hier die Bildbeschreibung ein

Ich habe folgenden Code verwendet:

PHP

public function add_product() {

        // Get product id
        $prod_id = filter_input(INPUT_POST, 'pid');

        // WordPress WYSIWYG Editor
        wp_editor("Test Content", "textarea" . $prod_id, array('textarea_name' => 'text'));
        wp_die();
}

JQUERY

$('.add-prod').live('click', function () {

        var prod_id = $('.prod-id').val();
        var data = {
            action: 'add_prod',
            pid: prod_id
        };
        $('#update-msg').show();

        $.post(ajaxurl, data, function (result) {
            $('#the-list').append(result);
            $('#update-msg').hide();
        });

        return false;
});

Ich habe eine Lösung aus dem Internet verwendet, aber sie funktioniert teilweise nicht vollständig. Habe folgenden Code verwendet:

PHP

wp_editor($product->prod_desc, $textarea_id, array('textarea_name' => 'text'));
\_WP_Editors::enqueue_scripts();
print_footer_scripts();
\_WP_Editors::editor_js();

JQUERY

var eid = '#item-list';
switchEditors.go(eid, 'tmce')
quicktags({id: eid});
//init tinymce
tinyMCEPreInit.mceInit[eid]['elements'] = eid;
tinyMCEPreInit.mceInit[eid]['body_class'] = eid;
tinyMCEPreInit.mceInit[eid]['succesful'] = false;
tinymce.init(tinyMCEPreInit.mceInit[eid]);

Und der obige Code tut dies:

Geben Sie hier die Bildbeschreibung ein

  • Alles funktioniert gut mit dem Code, den ich gerade habe. Nur der Editor funktioniert nicht.

    – Omer

    7. Dezember 2015 um 7:24 Uhr

  • Ich habe einen Beitrag zum dynamischen Laden von wp-Editoren erstellt hier.

    – Björn

    20. Dezember 2019 um 0:40 Uhr

  • Ich habe einen Beitrag zum dynamischen Erstellen des WP-Editors erstellt hier.

    – Björn

    20. Dezember 2019 um 0:41 Uhr

Offensichtlich wird wp_editor nicht angezeigt, wenn Sie einen Ajax-Aufruf tätigen, der nur eine Ajax-Antwort zurückgibt, aber keinen wp-Editor, der von Javascript auf dieser Seite erstellt wird. Kurz gesagt, ein Ajax-Aufruf kann eine serverseitige Textantwort erhalten, jedoch keinen Javascript-Editor, der auf der Clientseite erstellt wird und zur Verarbeitung einen Javascript-Prozessor benötigt.

Im Folgenden finden Sie ein Beispiel dafür, was getan werden kann, damit der Editor funktioniert.

  1. Direkt unter der Schaltfläche “Produkt hinzufügen”, von wo aus der Ajax-Aufruf getätigt wird, drucken Sie einen Editor mit PHP-Code und stellen Sie seine Anzeige auf “Keine” ein, damit der Editor nicht auf der Seite angezeigt wird.

z.B

<div class="wp-editor-wrapper" style="display: none;">
     <?php wp_editor("Test Content", "textarea" . $prod_id, array('textarea_name' => 'text')); ?>
</div>
  1. php-Funktion für die Ajax-Antwort sollte nur Textinhalt zurückgeben. Nicht Editor selbst und es sollte so aussehen.

    öffentliche Funktion add_product() {

        // Get product id
        $prod_id = filter_input(INPUT_POST, 'pid');
    
        // if $prod_id is used here, use it to get content
        echo "Test Content";
        wp_die();
    

    }

  2. Wenn eine Antwort von Textinhalten empfangen wird, erstellen Sie mit jQuery einen Klon von „wp-editor-wrapper“ div und fügen Sie ihn anstelle von textarea hinzu und legen Sie seinen Inhalt aus der Ajax-Antwort fest.

  • Scheint eine gute Lösung zu sein … Aber wie setzt man seinen Inhalt aus der Ajax-Antwort?

    – Omer

    21. Dezember 2015 um 18:38 Uhr

  • CKEDITOR.Instanz.[name used in CKEDITOR].setData (ajaxAntwort); Kann in JEDER js-Datei verwendet werden, solange sie kommt, nachdem ckeditor.js geladen wurde.

    – Alpesh Panchal

    22. Dezember 2015 um 6:19 Uhr


Ich denke, ich habe eine elegantere Lösung gefunden, indem ich die window.QTags-Funktion verwendet habe. Wenn Sie versuchen, tinyMCEPreInit von der Debug-Konsole aufzurufen, sollten Sie in der Lage sein, die qtInit-Eigenschaft des Objekts zu erreichen.

console.log(tinyMCEPreInit.qtInit);

Es sollte so etwas zurückgeben

{
   editor_0: {id: "editor_1", buttons: "strong,em,link,block,del,ins,img,ul,ol,li,code,more,close"}
}

Versuchen Sie nach Abschluss Ihres Ajax-Aufrufs, diese Eigenschaft zu kopieren, ersetzen Sie eine ID durch eine neue und rufen Sie die QTags-Funktion auf. Alle Schaltflächen sollten angezeigt werden.

window.QTags({'id': `YOUR_NEW_ID_HERE`, 'buttons': "strong,em,link,block,del,ins,img,ul,ol,li,code,more,close"});

1397000cookie-checkWP-Editor – wp_editor() wird beim Ajax-Aufruf nicht richtig angezeigt

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy