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

1. Plugin-Entwicklung
für den TinyMCE
Nico Danneberg [ @nida78 ]

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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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