Lösung zum Rendern von Shortcodes im Admin-Editor

Ich habe diese Frage vor etwa einem Jahr gestellt und hoffe, dass es eine einfache Lösung gibt, mit der ich mein Ziel erreichen kann. Also hier geht es:

Ich benutze oft Shortcodes im Admin-Editor, aber wenn ich sie dem Client übergebe, verstehen sie oft nicht, wie sie funktionieren.

Was ich suche, ist eine Lösung, die einfach automatisch die zugehörige Ausgabe von Shortcodes im Admin-WYSIWYG-Editor rendert.

Aus einer visuellen Perspektive möchte ich, dass dies ähnlich angezeigt wird, wenn die Zeile "more" angezeigt wird oder wenn ein Bild im Editor angezeigt wird. Damit meine ich, dass der Benutzer die Ausgabe sehen, sie aber nur löschen, aber den Inhalt des gerenderten Shortcodes nicht bearbeiten kann.

Es ist eigentlich gar nicht so schlecht, das zu tun, wonach du fragst. Dies sollte ungefähr eine Stunde dauern, um Ihre erste und 10 Minuten, um nachfolgende zu tun.

Als letztes erstellen Sie ein TinyMCE-Plugin. Hier ist, womit du dich ausrüsten solltest:

1. Allgemeine Anleitung zum Erstellen eines Tinymce-Plugins
2. Beispielcode aus WordPress Core
3. Eine allgemeine Anleitung zum Hinzufügen eines TinyMCE-Plugins zu WordPress. Ich fand dieses , das angemessen scheint.

Sie haben jetzt alle Werkzeuge, um es zu erledigen! Von alledem ist der Code, der für Sie am interessantesten ist, dieser Block im WP-Beispielcode:

4   function replaceGalleryShortcodes( content ) {
5       return content.replace( /\[gallery([^\]]*)\]/g, function( match ) {
6           return html( 'wp-gallery', match );
7       });
8   }
9
10  function html( cls, data ) {
11      data = window.encodeURIComponent( data );
12      return '<img src="' + tinymce.Env.transparentSrc + '" class="wp-media mceItem ' + cls + '" ' +
13          'data-wp-media="' + data + '" data-mce-resize="false" data-mce-placeholder="1" alt="" />';
14  }

Hier wird der Shortcode für eine Galerie durch ein imgTag ersetzt. Das imgTag hat die Klasse wp-gallery, die von dem hier zu findenden CSS formatiert wird .

Edit 2016-04-06: Aktualisierte Inhalte und Links für TinyMCE 4 und WordPress 4.4

Dies ist keine vollständige Antwort, nur eine Designrichtung. Ich denke, der beste Ansatz ist ungefähr so:

Im Admin Beitrag bearbeiten

Rippen Sie alle Shortcodes aus dem gespeicherten Beitrag und rendern Sie ihn, abgesehen vom Editor, in einer Metabox . Stellen Sie sicher, dass sie in derselben Reihenfolge angezeigt werden, in der die Shortcodes im winzigen Editor vorkommen.

In tinyMCE Javascript API

Erstellen Sie eine jQuery-Funktion. Wenn der Benutzer auf einen Shortcode klickt, wird der HTML-Code aus der Metabox in den Editor übertragen. Und umgekehrt. Die Bestellung selbst sollte als Assoziation in Ordnung sein, aber ich bin mir nicht sicher, ob ich Shortcodes beifüge. Es gibt jedoch viele Möglichkeiten, eine schöne ID-Verbindung zu gestalten. Die Aktualisierung von Shortcodes kann mit Ajax im laufenden Betrieb erfolgen.

Speichern Sie niemals den gerenderten Shortcode-Status

Bevor Sie die Editoren wechseln, Entwürfe speichern, automatische Entwürfe erstellen und veröffentlichen, rufen Sie die API auf, um die Wiederherstellung auszulösen, damit der gerenderte Shortcode-Status nie gespeichert wird.

Dies ist möglich, aber Sie müssen mit der tinyMCE-API vertraut sein, um zu verstehen, wo und wann Sie auf den Inhalt des Editors zugreifen können, und sich in Javascript-Aktionen einbinden können, bevor Sie "speichern" und mehr.

Es können sich mehrere tinyMCE-Editoren auf demselben Bearbeitungspost befinden.

Der Restore-Teil kann anhand des [gallery]Shortcodes untersucht werden. Das Anklicken [MY_SHORTCODE]muss jedoch durch einige jQuery-Tricks erfolgen.

Greifen Sie im Skript admin_footer auf den Inhalt zu, mit dem der Cursor aktiv ist:

var $editor_content = $(tinymce.activeEditor.getBody());

ist ein Hinweis, wie man anfängt.

Ich suchte nach einer Möglichkeit, Shortcodes grafisch anzuzeigen und zu optimieren. Und jetzt habe ich endlich ein Tutorial gefunden, das genau das macht: https://generatewp.com/take-shortcodes-ultimate-level/

Ich füge die Beschreibung hinzu, damit Suchmaschinen sie abholen:

Wir werden ein einfaches Plugin mit einem Shortcode erstellen und dann eine TinyMCE-Editor-Schaltfläche hinzufügen, um diesen Shortcode durch ein Popup einzufügen, das alle Benutzereingaben für die Shortcode-Attribute sammelt. Dann werden wir den Shortcode im TinyMCE-Editor durch ein Platzhalterbild ersetzen, ähnlich wie die native Galerie von WordPress (die eigentlich ein Shortcode ist, falls Sie es nicht wussten), und zum Schluss werden wir die Bearbeitung zulassen des Shortcodes und seiner Attribute durch Doppelklick auf das Platzhalterbild.