WordPress 4.8: Verwenden mehrerer WYSIWYG-Editoren mit Medien innerhalb von Widgets Wie?

Mit WP 4.8, das die Widgets-API erweitert, verwendet das einfache Text-Widget TinyMCE. Der Vorteil ist, dass TinyMCE-Skripte bereits in Ajax-Anfragen in die Warteschlange gestellt werden.

Für einen Client benötige ich jedoch ein Widget, das mehrere Editoren enthält . Dieses Widget wird nicht nur auf der Widgets-Seite, sondern auch in der Plugin- Seite von SiteOrigin verwendet .

Mit dem neuen WordPress funktioniert folgendes in der Widget form () function:

public function form( $instance ) { // ... foreach(cisI8Suffixes(true) as $suf) { ?><div class="cis_editor_bwrap" >
containerInputHTML($instance); $this->linkWrapperInputHTML($instance); }

Es funktioniert jedoch nur, solange ich nur ein Widget habe, da die IDs dupliziert werden, sobald ein zweites Widget erstellt wird. Ich brauche entweder eine Zufallszahl oder die Widget-ID (Anmerkung: str_replace wird benötigt, da wp_editor das Minuszeichen in ids nicht akzeptiert).

Folgendes scheitert leider:

 public function form( $instance ) { // ... foreach(cisI8Suffixes(true) as $suf) { ?><div class="cis_editor_bwrap" >get_field_id('text'.$suf)) ); ?>
<?php } }

Irgendwie instanziiert WordPress TinyMCE nicht korrekt, wenn eine Zufallszahl oder die Widget-ID innerhalb der Editor-ID liegt. Fehlermeldung ist wie folgt:

 wp-tinymce.php?c=1&ver=4603-20170530:15 Uncaught TypeError: Cannot read property 'onpageload' of undefined at h (wp-tinymce.php?c=1&ver=4603-20170530:15) at m (wp-tinymce.php?c=1&ver=4603-20170530:15) at hlbind (wp-tinymce.php?c=1&ver=4603-20170530:3) at o.bind (wp-tinymce.php?c=1&ver=4603-20170530:5) at Object.init (wp-tinymce.php?c=1&ver=4603-20170530:15) at e (editor.min.js?ver=4.8:1) at HTMLDocument. (editor.min.js?ver=4.8:1) at a (wp-tinymce.php?c=1&ver=4603-20170530:3) at HTMLDocument.p (wp-tinymce.php?c=1&ver=4603-20170530:3) 

Dies ist der HTML-Code, der von wp_editor ausgegeben wird, wenn die Möglichkeit 2 verwendet wird:

 

Also meine Frage ist, wie kann ich das lösen?

Ich habe die zwei Ideen:

  1. Registrieren Sie die ID des dynamischen Editors nach dem Erstellen / Laden des Widgets und sorgen Sie dafür, dass es funktioniert. WIE?

  2. Verwenden Sie wp_editor () überhaupt nicht, sondern benutzen Sie textareas und wenden Sie TinyMCE dynamisch auf diese an. Probleme: Datei-Upload wird fehlen. Wie kann man TinyMCE-Skripte bei jedem neuen Widget / Widget laden?

Ich habe bisher viel versucht, aber kein Glück.

Solutions Collecting From Web of "WordPress 4.8: Verwenden mehrerer WYSIWYG-Editoren mit Medien innerhalb von Widgets Wie?"

Es ist schwer zu sagen, ohne den ganzen Code zu sehen.

Ja, wenn Sie nicht auf die Instanz verweisen – dann ist es keine eindeutige ID. So etwas würde funktionieren – Sie würden einfach auf die classneigenschaft $ id verweisen:

  for ( $i = 0; $i < = count( $suffixes ); $i++) { wp_editor( 'your content', "{$this->id}_$i" ); } 

Die js im core für das Text-Widget erstellen eine zufällige ID für die Editor-Instanzen, bevor sie die Instanziierung behandelt. Sie könnten diese also in PHP übersetzen, wenn Sie dem folgen möchten:

  $el = 'el' . preg_replace( '/\D/', '', ( rand()/getrandmax() ) ) . '_'; 

Da Sie lokal entwickeln – sollten Sie SCRIPT_DEBUG in Ihrer wp-config.php aktivieren: define (‘SCRIPT_DEBUG’, true); um Ihnen zu helfen, Ihre Probleme mit Javascript zu beheben. Dies würde dazu führen, dass der Fehler aus den verkleinerten Dateien etwas aussagekräftiger wird. Der Fehler wird von der Methode switchEditor in editor.min.js verursacht. Es gibt eine spezielle Handhabung des tinymce-Text-Widgets im Customizer – und das ist nicht so einfach wie das Aufrufen von wp_editor – obwohl es wahrscheinlich möglich wäre. Sie könnten versuchen, den process wp_skip_init zu aktivieren und möglicherweise Ihren eigenen Initialisierungscode hinzuzufügen:

  add_filter( 'wp_editor_settings', 'ciseditor_wp_editor_settings', 5, 2 ); function ciseditor_wp_editor_settings( $settings, $id ) { // look for your prefixed id and return the id associated with it. if ( $ed = strstr( $id, 'foo_widget' ) ) { $settings['tinymce'] = array( 'wp_skip_init' => true, 'wp_autoresize_on' => false, // turn off the auto resize height of editor. ); $settings['editor_height'] = 300; // set the height } return $settings; } 

Ich bin mir ziemlich sicher, dass das nicht der richtige Weg sein wird. Ich würde empfehlen, wp-admin / js / text-widgets.js zu betrachten, um zu sehen, wie Core das Text-Widget und die Switch-Editor-functionalität implementiert – und die Daten für den Customizer korrekt behandelt. Sie sollten auch auf wp-includes / widgets / class-wp-widget-text.php verweisen, da Sie im Wesentlichen dasselbe machen wollen, das bereits existiert.

Wenn man diesen Fehler in tinymce hat, bedeutet das, dass die Instanz nicht entfernt und korrekt hinzugefügt wird. Daher macht es Sinn, dass der switchEditor von WordPress in diesem Zusammenhang Fehler verursacht. Es gibt eine Menge Dokumentation in der text-widgets.js darüber, wie ynymce und dynamische DOM-Komponenten interagieren, die berücksichtigt werden müssen, sonst kommt es zu Problemen.

Eine schnelle Lösung könnte darin bestehen, Quicktags für Ihre Editor-Instanzen zu deaktivieren, was im wp_editor_settings-Filter möglich ist, oder Sie können sie auch im Einstellungs-Array übergeben, wenn Sie die Editoren erstellen, dh:

 wp_editor( 'your content', "{$this->id}_$i", array( 'quicktags' => false ) ); 

Ich habe ynymce-Instanzen in einem Projekt einmal in WordPress dynamisch erstellt, und ich erinnere mich, dass ich mir den Editor-Code im core angeschaut habe, um zu sehen, welche Argumente und Skripte alles funktionierten, so dass auch das immer möglich ist. Wenn Sie diesen Weg gehen – die meisten Dinge übersetzen über 1: 1 in Bezug auf die PHP-Abstraktion zu js für die Params. Ich denke, für die Schaltfläche “Add Media” habe ich meine eigene Sache erstellt, aber es gibt die Aktion “media_buttons”, so dass Sie in der Lage sein sollten, einfach das hinzuzufügen, wo es angezeigt werden soll.

Überlegen Sie auch, warum Sie mehrere Editoren in einem Widget benötigen. Eine andere Möglichkeit, dies zu umgehen, wäre, die Instanzen in einem Akkordeon-Stil innerhalb des Widgets selbst zu entfernen und sie neu zu erstellen, wenn Akkordeons erweitert werden, sodass immer nur ein Widget angezeigt wird. Ich denke allerdings, dass ein Editor in einem Widget für die meisten Anwendungsfälle geeignet ist und dem Endbenutzer die Flexibilität gibt, Inhalte dort zu platzieren, wo sie am geeignetsten für den eigenen Gebrauch sind.

Wenn ich mich richtig erinnere, muss die ID, die an wp_editor , bereits existieren.

Vielleicht tut es dir anderswo in deinem Code, aber sieht es nicht so aus, als was ich sehen kann? Ich denke, es müsste so spezifiziert werden:

 public function form( $instance ) { // ... foreach(cisI8Suffixes(true) as $suf) { $id = str_replace("-","_",$this->get_field_id('text'.$suf)); ?>
>< ?php wp_editor(cisI8Extract($instance, 'text', $suf), $id); ?>
< ?php } }