wake-up-neo.net

Wie erstelle ich WP Editor mit Javascript

Ich versuche, eine Art von wiederholten Feldern zu erstellen, und dafür möchte ich einen neuen WP-Editor mit einer eindeutigen ID erstellen.

Also meine Frage gibt es eine Möglichkeit, wp_editor mit irgendwelchen js zu erstellen? Das gleiche wie bei der Verwendung der <?php wp_editor() ?> WordPress-Funktion.

Ich habe versucht mit

tinyMCE .init( { mode : "exact" , elements : "accordion_icon_description_"+response.success.item_count });

aber es druckt einen sehr einfachen Editor, der meiner Meinung nach nicht mit dem Feldeditor für WordPress-Postinhalte identisch ist

postsjavascripteditorpost-content
2
1naveengiri

Dank Jacob Peatties Kommentar kann ich dies nur mit JS beantworten. Eigentlich haben wir etwas Ähnliches gemacht, aber vor 4.8 und es war nicht so einfach, also haben wir am Ende wp_editor() verwendet. Aber jetzt können Sie dies tun mit wp.editor object in JavaScript . Es gibt 3 Hauptfunktionen

  1. wp.editor.initialize = function( id, settings ) {

Wo id ist

Die HTML-ID des Textbereichs, der für den Editor verwendet wird. Muss jQuery-konform sein. Keine Klammern, Sonderzeichen usw.

und settings ist entweder ein Objekt

{
    tinymce: {
        // tinymce settings
    },
    quicktags: {
        buttons: '..'
    }
}

mit diesen TinyMCE Einstellungen . Anstelle eines der 3 Objekte (settings selbst, tinymce oder quicktags) können Sie true verwenden, um die Standardeinstellungen zu verwenden.

  1. wp.editor.remove = function( id ) {

Ist ziemlich selbsterklärend. Entfernen Sie alle Editorinstanzen, die über wp.editor.initialize erstellt wurden.

  1. wp.editor.getContent = function( id ) {

Holen Sie sich den Inhalt eines beliebigen Editors, der über wp.editor.initialize erstellt wurde.

Die Verwendung könnte so aussehen

var countEditors = 0;
$(document).on('click', 'button#addEditor', function() {
    var editorId = 'editor-' + countEditors;
    // add editor in HTML as <textarea> with id editorId
    // give it class wp-editor
    wp.editor.initialize(editorId, true);
    countEditors++;
});
$(document).on('click', 'button.removeEditor', function() {
   // assuming editor is under the same parent
   var editorId = $(this).parent().find('.wp-editor');
   wp.editor.remove(editorId);
});

Da der Inhalt automatisch veröffentlicht wird, wird er in diesem Beispiel nicht benötigt. Sie können es jedoch jederzeit über wp.editor.getContent( editorId ) abrufen.

5
kero

Sie müssen zuerst wp_enqueue_editor(); verwenden, um die Editor-Skripte, Stylesheets und Standardeinstellungen auszugeben. Sie finden diese Dokumentation hier wp_enqueue_editor ()

Sie müssen true wie folgt aus der Funktion entfernen: wp.editor.initialize(editorId);

1
Antonio Novak