web-dev-qa-db-de.com

Styling von Shortcodes im visuellen Editor

Weiß jemand, wie man den visuellen Editor so gestaltet, dass er bei Verwendung bestimmter Shortcodes durch ein Bild innerhalb des visuellen Editors ersetzt wird?

Ich habe festgestellt, dass viele Benutzer den Shortcode-Text falsch geschrieben oder versehentlich gelöscht haben, wenn sie den visuellen Editor verwenden. Daher möchte ich, dass Shortcodes im visuellen Editor durch Schrittmacherbilder ersetzt werden. Der HTML-Editor würde die Codes trotzdem anzeigen.

5

Ich habe keine funktionierende Lösung zur Hand, aber ich würde analysieren, wie dies für den Separator getan wird. Im HTML-Editor gibt es <!-- more -->, im visuellen Editor wird stattdessen ein Bild angezeigt.

Dies geschieht durch Erweiterung des tinyMCE-Editors - der Basis des visuellen Editors in WordPress - um ein Plugin. Um mehr über Tinymce-Plugins zu erfahren, finden Sie weitere Beispiele und Dokumentationen im Moxiecode-Wiki: Erstellen eines Plugins für TinyMCE (3.x) .

Sie finden Beispielcode in der folgenden Datei:

wp-includes/js/tinymce/plugins/wordpress/editor_plugin.dev.js

Dies funktioniert im Wesentlichen, indem Inhalte (z. B. der Shortcode [mycode]) durch vordefiniertes HTML ersetzt werden, das das Bild enthält. Bevor der Inhalt veröffentlicht wird, wird er erneut durch den ursprünglichen HTML-Code ersetzt. Sie können dabei reguläre Ausdrücke verwenden. Der weitere Link zeigt dies recht gut.

3
hakre