Ich bin mit dem Erstellen selbstschließender Shortcodes vertraut wie:
// shortcode
function wpse_shortcode_example( $wpse_atts ) {
// Attributes
$wpse_atts = shortcode_atts(
array(
'foo' => 'bar',
'width' => '100%',
'height' => 'auto',
),
$wpse_atts,
'wpse'
);
// Return
return '<embed
src="' . $wpse_atts['src'] . '"
width="' . $wpse_atts['width'] . '"
height="' . $wpse_atts['height'] . '";
}
add_shortcode( 'wpse', 'wpse_shortcode_example' );
aber ich möchte anfangen, diese dem TinyMCE hinzuzufügen. Ich habe mehrere Suchvorgänge durchgeführt, aber alle Suchergebnisse sind entweder veraltet oder verwenden einen Ansatz, der nicht mehr empfohlen wird:
- Wie füge ich dem TinyMCE-Editor eine Shortcode-Schaltfläche hinzu? : ausgezeichneter Ausgangspunkt, aber die Frage wurde im Jahr 2012 erstellt.
- WordPress Shortcodes: Eine vollständige Anleitung : Guter Artikel, aber ab 2012 und es verwendet
query_posts()
, könnte aber optimiert werden - Leitfaden zum Erstellen eigener WordPress-Editor-Schaltflächen : ist ein schöner Artikel, der noch vor einiger Zeit, 2013, erstellt wurde. Er behandelt jedoch nicht die Grundlagen oder Grundlagen für die Verwendung von TinyMCE.
Ich weiß, dass sich der Entwickler noch in einem frühen Stadium befindet, aber das Plugin-Handbuch spricht nur kurz über TinyMCE Enhanced Shortcodes und Shortcode API und add_shortcode()
erwähnt TinyMCE nicht.
Das führt mich also zu meiner Frage. Wie wird ein selbstschließender Shortcode im TinyMCE-Editor in eine anklickbare Schaltfläche umgewandelt?
plugin-development
shortcode
tinymce
DᴀʀᴛʜVᴀᴅᴇʀ
quelle
quelle
Antworten:
Wir beginnen mit dem Hinzufügen des benutzerdefinierten TinyMCE-Buttons:
Dann deklarieren und registrieren wir den neuen Button:
Schließlich entscheiden wir, welche Schaltflächen (weitere Informationen zu Schaltflächen finden Sie unter Inhaltsformatierung ) angezeigt werden sollen. Wenn Sie an UX denken, würden Sie natürlich nur einige davon anzeigen, zum Beispiel:
Wie Sie in der
add_tinymce_plugin_custom_em
Funktion sehen können, deklarieren wir eine Javascript-Datei daringet_template_directory_uri() .'/plug/custom-em/custom-em.js'
Erstellen Sie also die
custom-em.js
Datei, und Sie haben zwei Möglichkeiten, dies zu tun.Sie können entweder das folgende Shortcode-Format verwenden
[shortcode foo="" bar=""]
oder[shortcode][/shortcode]
.Beginnen wir mit dem
[shortcode foo="" bar=""]
Format:Wie Sie sehen können, verwenden wir ein Bild als Schaltflächensymbol. Sie können dies in Text umwandeln, wie im folgenden Beispiel dargestellt.
Im Folgenden ist das, was wir auf unsere eigene Plattform verwenden, ist es um die Auswahl hüllt in:
<em class="whatever">hello world</em>
:Bitte veröffentlichen Sie die Ergebnisse und führen Sie Änderungen durch. TinyMCE ist eine Seuche und erfordert Kopfschmerzen, kann aber auf kollaborative Weise gelöst werden.
quelle