Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
Plugin-Entwicklung
für den TinyMCE
Nico Danneberg [ @nida78 ]
Inhalt
• me, myself & WP
• 5+2 Schritte zum TinyMCE-Plugin
• Quellen
17.10.2017 WP Meetup Potsdam - Plugin-Entwicklung für...
about.me/nida78
Ich…
• 39J-v-2K
• Unternehmer
• Entwickler
• Dozent
• Netzwerker
• Sportler
…und WordPress
• 2004
– eigene...
TinyMCE
• Basis / Grundlagen / Einführung
– Caspars Vortrag beim #wpdm 0415
http://wpdm.de/1086/
17.10.2017 WP Meetup Pots...
Motivation
• Selbstdefinierte CSS-Styles leichter
einbinden
<span class="mystyle">hübscher Text</span>
• Shortcodes (und A...
Schritt 1
eigenes Plugin einhaken
if( is_admin() ) {
add_action( 'admin_head', 'vrt_admin_head' );
// enqueue other script...
Schritt 2
Script & Button anmelden
function vrt_mce_external_plugins( $plugin_array ) {
$plugin_array[ 'vrtmce' ] = plugin...
Schritt 3
Button hinzufügen
( function() {
tinymce.create( 'tinymce.plugins.VrtMCE', {
init : function( editor, url ) {
ed...
Schritt 3a
Grafik des Buttons
• Variante 1: Bild / Icon
– 20 x 20 Pixel, (transparentes) PNG o.ä.
• Variante 2: WordPress ...
Schritt 4
Kommando festlegen
init : function( editor, url ) {
editor.addButton( 'vrtbtn1', {
title : 'VRT Style',
cmd : 'v...
Schritt 5
Benutzereingaben
editor.addCommand( 'vrtbtn1cmd', function () {
editor.windowManager.open( {
title: 'VRT Options...
Schritt 6
Werte aus PHP übergeben
• Keine Lokalisierung wie bei Plugins üblich!
Sondern:
function vrt_admin_head() {
/*** ...
Schritt 7a
Mehrsprachigkeit
• Nicht über po-Dateien, sondern:
/<js-plugin>/vrt-mce-buttons.js
tinymce.PluginManager.requir...
Schritt 7b
Mehrsprachigkeit
1) add_filter( 'mce_external_languages', 'vrt_add_mce_locale' ) );
2) function vrt_add_mce_loc...
Quellen
• https://codex.wordpress.org/Plugin_API/Filter_Reference
/mce_external_plugins
• http://archive.tinymce.com/wiki....
Fragen? Fragen!
privat
• M nico@danneberg.de
• W n1da.net
• T @nida78
dienstlich
• M nico.danneberg@vcat.de
• W vcat.de
• ...
Nächste SlideShare
Wird geladen in …5
×

#wpdm - Plugin-Entwicklung für den TinyMCE

2.246 Aufrufe

Veröffentlicht am

Meine Session zur "Plugin-Entwicklung für den TinyMCE" beim WordPress Meetup Potsdam im Oktober 2017

Veröffentlicht in: Technologie
  • Loggen Sie sich ein, um Kommentare anzuzeigen.

  • Gehören Sie zu den Ersten, denen das gefällt!

#wpdm - Plugin-Entwicklung für den TinyMCE

  1. 1. Plugin-Entwicklung für den TinyMCE Nico Danneberg [ @nida78 ]
  2. 2. Inhalt • me, myself & WP • 5+2 Schritte zum TinyMCE-Plugin • Quellen 17.10.2017 WP Meetup Potsdam - Plugin-Entwicklung für den TinyMCE 2
  3. 3. about.me/nida78 Ich… • 39J-v-2K • Unternehmer • Entwickler • Dozent • Netzwerker • Sportler …und WordPress • 2004 – eigener Blog • 2011 – erstes WP-Projekt bei VCAT • 2012 – #wpdm += @nida78 • 2013 – VCAT EDULABS mit WP-Plugin für Geo-Locations • 2015 – WP Wiki Tooltips: eigenes Plugin im WP-Repository 17.10.2017 WP Meetup Potsdam - Plugin-Entwicklung für den TinyMCE 3
  4. 4. TinyMCE • Basis / Grundlagen / Einführung – Caspars Vortrag beim #wpdm 0415 http://wpdm.de/1086/ 17.10.2017 WP Meetup Potsdam - Plugin-Entwicklung für den TinyMCE 4
  5. 5. Motivation • Selbstdefinierte CSS-Styles leichter einbinden <span class="mystyle">hübscher Text</span> • Shortcodes (und Attribute) einfacher benutzen [reverse bold="true"]gedrehter Text[/reverse] 17.10.2017 WP Meetup Potsdam - Plugin-Entwicklung für den TinyMCE 5
  6. 6. Schritt 1 eigenes Plugin einhaken if( is_admin() ) { add_action( 'admin_head', 'vrt_admin_head' ); // enqueue other scripts and styles } function vrt_admin_head() { if( !current_user_can( 'edit_posts' ) && !current_user_can( 'edit_pages' ) ) { return; } if( get_user_option( 'rich_editing' ) == 'true' ) { add_filter( 'mce_external_plugins', 'vrt_mce_external_plugins' ); add_filter( 'mce_buttons', 'vrt_mce_buttons' ); } } 17.10.2017 WP Meetup Potsdam - Plugin-Entwicklung für den TinyMCE 6
  7. 7. Schritt 2 Script & Button anmelden function vrt_mce_external_plugins( $plugin_array ) { $plugin_array[ 'vrtmce' ] = plugins_url( 'js/vrt-mce-button.js' , __FILE__ ); return $plugin_array; } function vrt_mce_buttons( $buttons ) { array_push( $buttons, 'vrtbtn1' ); return $buttons; } 17.10.2017 WP Meetup Potsdam - Plugin-Entwicklung für den TinyMCE 7
  8. 8. Schritt 3 Button hinzufügen ( function() { tinymce.create( 'tinymce.plugins.VrtMCE', { init : function( editor, url ) { editor.addButton( 'vrtbtn1', { title : 'VRT Style', cmd : 'vrtbtn1cmd', image : url + '/vrtbtn1.jpg' }); }, getInfo : function() { return { longname : 'VRT Buttons', author : 'nida78', authorurl : 'http://www.vcat.de', infourl : 'http://www.vcat.de/edulabs/projekte/wordpress/reverse-text/', version : "0.0.2" }; } }); tinymce.PluginManager.add( 'vrtmce', tinymce.plugins.VrtMCE ); 17.10.2017 WP Meetup Potsdam - Plugin-Entwicklung für den TinyMCE 8
  9. 9. Schritt 3a Grafik des Buttons • Variante 1: Bild / Icon – 20 x 20 Pixel, (transparentes) PNG o.ä. • Variante 2: WordPress Dashicons – https://developer.wordpress.org/resource/dashicons/ – Einbindung über CSS i.mce-i-vrtbtn1:before { font-family: "dashicons"; content: "f116"; } 17.10.2017 WP Meetup Potsdam - Plugin-Entwicklung für den TinyMCE 9
  10. 10. Schritt 4 Kommando festlegen init : function( editor, url ) { editor.addButton( 'vrtbtn1', { title : 'VRT Style', cmd : 'vrtbtn1cmd' }); editor.addCommand( 'vrtbtn1cmd', function() { var sel_text = editor.selection.getContent(); var ret_text = '<span class="vrtclass">'+sel_text+'</span>'; editor.execCommand( 'mceInsertContent', 0, ret_text ); }); }, 17.10.2017 WP Meetup Potsdam - Plugin-Entwicklung für den TinyMCE 10
  11. 11. Schritt 5 Benutzereingaben editor.addCommand( 'vrtbtn1cmd', function () { editor.windowManager.open( { title: 'VRT Options', body: [ { type: 'textbox', name: 'content', label: 'Text', value: editor.selection.getContent(), }, { type: 'checkbox', name: 'wantbold', label: 'Bold?', tooltip: 'Do you like BOLD, too?' } ], onsubmit: function (e) { var ret_text = '[reverse'; ret_text += ( e.data.wantbold ) ? ' bold="true"' : ''; ret_text += ']' + e.data.content + '[/reverse]'; //insert shortcode to TinyMCE editor.execCommand('mceInsertContent', 0, ret_text); 17.10.2017 WP Meetup Potsdam - Plugin-Entwicklung für den TinyMCE 11
  12. 12. Schritt 6 Werte aus PHP übergeben • Keine Lokalisierung wie bei Plugins üblich! Sondern: function vrt_admin_head() { /*** Code von Schritt 1 ***/ ?> <script type='text/javascript'> var vrt_values = { 'key1': '<?php echo $value_1; ?>' }; </script> <?php } 17.10.2017 WP Meetup Potsdam - Plugin-Entwicklung für den TinyMCE 12
  13. 13. Schritt 7a Mehrsprachigkeit • Nicht über po-Dateien, sondern: /<js-plugin>/vrt-mce-buttons.js tinymce.PluginManager.requireLangPack( 'vrtmce' ); /<js-plugin>/langs/de.js tinymce.addI18n( 'de.vrtmce', { popup_title : 'VRT Optionen', want_bold : 'Fett', want_bold_tooltip : 'Soll es auch FETT sein?' }); 17.10.2017 WP Meetup Potsdam - Plugin-Entwicklung für den TinyMCE 13
  14. 14. Schritt 7b Mehrsprachigkeit 1) add_filter( 'mce_external_languages', 'vrt_add_mce_locale' ) ); 2) function vrt_add_mce_locale( $locales ) { $locales[ 'vrtmce' ] = plugin_dir_path( __FILE__ ) . 'vrt-mce-langs.php'; return $locales; } 3) function vrt_mce_translation() { $strings = array( 'popup_title' => __( 'VRT Options', 'vcat-reverse-text' ), 'want_bold' => __( 'Bold', 'vcat-reverse-text' ), 'want_bold_tooltip' => __( 'Do you like it bold?', 'vcat-reverse-text' ), ); $locale = _WP_Editors::$mce_locale; $translated = 'tinyMCE.addI18n("' . $locale . '.vrtmce", ' . json_encode( $strings ) . ");n"; return $translated; } $strings = vrt_mce_translation(); 4) editor.getLang( 'vrtmce.popup_title' ) 17.10.2017 WP Meetup Potsdam - Plugin-Entwicklung für den TinyMCE 14
  15. 15. Quellen • https://codex.wordpress.org/Plugin_API/Filter_Reference /mce_external_plugins • http://archive.tinymce.com/wiki.php/Tutorials:Creating_ a_plugin • http://code.tutsplus.com/tutorials/guide-to-creating- your-own-wordpress-editor-buttons--wp-30182 • https://generatewp.com/take-shortcodes-ultimate-level/ 17.10.2017 WP Meetup Potsdam - Plugin-Entwicklung für den TinyMCE 15
  16. 16. Fragen? Fragen! privat • M nico@danneberg.de • W n1da.net • T @nida78 dienstlich • M nico.danneberg@vcat.de • W vcat.de • T @VCATconsulting 17.10.2017 WP Meetup Potsdam - Plugin-Entwicklung für den TinyMCE 16

×