WP-Syntax Editor Integration Plugin – WP-Syntax im WordPress Editor nutzen
Posted By Markus Effinger On 30. Dezember 2009 @ 11:11 In Wordpress | 12 Comments
Um komfortabel mit WP-Syntax im WordPress-Editor zu arbeiten, habe ich ein Plugin geschrieben, welches jeweils einen Button im visuellen Editor (TinyMCE) und im HTML-Editor hinzufügt. Zuvor hatte ich immer die quicktag.php editiert [1], was aber auf Dauer sehr mühsam war, da man dies bei jedem WordPress Update machen musste. Das Plugin ist ab sofort auf wordpress.org unter http://wordpress.org/extend/plugins/wp-syntax-integration/ [2] verfügbar.
Nutzen kann man das Plugin im visuellen Modus folgendermaßen:
- Den zu hervorhebenden Code schreiben bzw. einfügen
- Den Code markieren
[3] - Auf den Button “Enclose with pre-block of WP-Syntax” klicken (im Screenshot rot markiert)
[4] - Programmiersprache eingeben. Falls Zeilennummerierung gewünscht ist, durch ein Komma getrennt, die erste Zeilennummer ergänzen
[5] - OK klicken und fertig!
Wichtig: Bei der Eingabe im visuellen Modus werden HTML-Tags entfernt, die von TinyMCE nicht erlaubt werden. Dieses Verhalten lässt sich umgehen, wenn man HTML-Tags nicht im visuellen Modus sondern im HTML-Modus eingibt.
Das Plugin lässt sich auch im HTML-Modus nutzen. Die Vorgehensweise ist prinzipiell gleich:
- Den zu hervorhebenden Code schreiben bzw. einfügen
- Den Code markieren
[3] - Auf den Button “pre (WP-Syntax)” klicken (im Screenshot rot markiert)
[6] - Programmiersprache eingeben. Falls Zeilennummerierung gewünscht ist, durch ein Komma getrennt, die erste Zeilennummer ergänzen
[5] - OK klicken und fertig!
Ein herzliches Dankeschön an die Programmierer der folgenden Extensions bzw. deren Erläuterungen, die mir sehr weitergeholfen haben:
- How to write a TinyMCE plugin for WordPress [7]
- TinyMCE Valid Elements [8]
- TinyMCE Commands [9]
- Using WP-Syntax and the visual editor [10]
- Adding Quicktags to WordPress [11]
- David’s Ultra Quicktags [12]
- The right way to add custom quicktags [13]
- Unraveling Quicktags for WordPress Plugins [14]
- Escape HTML characters in JavaScript [15]
Article printed from Abraxas: http://www.effinger.org/blog
URL to article: http://www.effinger.org/blog/2009/12/30/wp-syntax-editor-integration-plugin-wp-syntax-im-wordpress-editor-nutzen/
URLs in this post:
[1] die quicktag.php editiert: http://www.effinger.org/blog/2008/12/06/wordpress-syntax-highlighting-mit-wp-syntax/
[2] http://wordpress.org/extend/plugins/wp-syntax-integration/: http://wordpress.org/extend/plugins/wp-syntax-integration/
[3] Image: http://www.effinger.org/blog/wp-content/uploads/2009/12/SS-20091229161027.png
[4] Image: http://www.effinger.org/blog/wp-content/uploads/2009/12/button_red.png
[5] Image: http://www.effinger.org/blog/wp-content/uploads/2009/12/Die_Seite_mit_der_Adresse_httpwww.effinger.org_meldet-20091229161212.png
[6] Image: http://www.effinger.org/blog/wp-content/uploads/2009/12/button_red_html.png
[7] How to write a TinyMCE plugin for WordPress: http://ctx2002.wordpress.com/2008/07/28/how-to-write-a-tinymce-plugin-for-wordpress/
[8] TinyMCE Valid Elements: http://www.engfers.com/plugins/tinymce-valid-elements/
[9] TinyMCE Commands: http://wiki.moxiecode.com/index.php/TinyMCE:Commands
[10] Using WP-Syntax and the visual editor: http://36flavours.com/2009/09/using-wp-syntax-and-the-visual-editor/
[11] Adding Quicktags to WordPress: http://granades.com/2007/02/14/adding-quicktags-to-wordpress/
[12] David’s Ultra Quicktags: http://wordpress.org/extend/plugins/davids-ultra-quicktags/
[13] The right way to add custom quicktags: http://scribu.net/wordpress/right-way-to-add-custom-quicktags.html
[14] Unraveling Quicktags for WordPress Plugins: http://website-in-a-weekend.net/extending-wordpress/diy-wordpress-unraveling-quicktags-wordpress-plugins/
[15] Escape HTML characters in JavaScript: http://bytes.com/topic/javascript/answers/163382-need-escape-html-chracters-js#post630671
Click here to print.