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.
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
• ...
Upcoming SlideShare
Loading in …5
×

#wpdm - Plugin-Entwicklung für den TinyMCE

475 views

Published on

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

Published in: Technology
  • Be the first to comment

  • Be the first to like this

#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

×