Lösung zum Rendern von Shortcodes im Admin-Editor

19

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.

NetConstructor.com
quelle
Haben Sie diesen Artikel ( wp.tutsplus.com/tutorials/theme-development/… ) gelesen ? Überprüfen Sie den TinyMCE-Teil.
cr0z3r
1
Ich habe das gelesen, aber soweit ich das beurteilen kann, handelt es sich nur um das Erstellen / Registrieren von Funktionscodes und das Erstellen von Schaltflächen für den Editor zum schnellen Einfügen von Funktionscodes ... Aber keine Informationen zum Rendern dieser Funktionscodes mit den von mir beschriebenen Gegenstücken für HTML-Blöcke.
NetConstructor.com
Meinen Sie damit, dass Sie eine visuelle Hilfe einbinden möchten, die für den von Ihnen eingebundenen Shortcode repräsentativ ist und den Shortcode nicht durch den echten HTML-Code ersetzt? dh der Galerie-Platzhalter, der eigentlich nicht der Galerie-Code ist, sondern ein visueller Platzhalter, der den Benutzer lediglich wissen lässt: "Hey, hier gibt es eine Galerie"?
Matthew Boynes
Genau! Und ich möchte, dass es ein bisschen flexibel ist, damit ich es auf Shortcode-Basis anpassen kann (ähnlich wie Sie es in der Galerie gesagt haben oder wenn ein Bild enthalten ist)
NetConstructor.com

Antworten:

19

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

Matthew Boynes
quelle
interessant! Lassen Sie mich Sie fragen ... Was halten Sie davon, wenn der tatsächliche Inhalt aller Shortcodes automatisch in den zugehörigen Inhalt konvertiert wird?
NetConstructor.com
Das würde alles vom Inhalt abhängen. Denken Sie zunächst daran, dass HTML-Code entfernt wird, Probleme beim Rendern in TinyMCE hat usw. Zweitens: Ihr Shortcode rendert einen Block komplexen HTML-Codes. Wenn Ihr Benutzer ihn bearbeitet, kann er ihn versehentlich beschädigen. Drittens, wenn Ihr Shortcode über Optionen verfügt, können diese Optionen nur bearbeitet werden, wenn Sie den gesamten HTML-Block löschen und den Shortcode wiederholen. Wenn Ihr Code so komplex ist, dass Sie einen Shortcode benötigen, ist der Platzhalter wahrscheinlich die beste Wahl.
Matthew Boynes
Hast du jemals eine Lösung dafür von jemand anderem gesehen?
NetConstructor.com
0

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.

Jonas Lundman
quelle
0

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/

Bildschirmfoto

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.

Marc Chéhab
quelle