Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Loading in …3
×
1 of 16

#wpdm - Plugin-Entwicklung für den TinyMCE

0

Share

Download to read offline

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

Related Books

Free with a 30 day trial from Scribd

See all

#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

×