Das Dokument beschreibt die Entwicklung eines Plugins für den TinyMCE-Editor in WordPress, präsentiert von Nico Danneberg während eines Meetups. Es skizziert die Schritte zur Implementierung von Funktionen wie das Hinzufügen von Buttons, das Definieren von Kommandos und die Unterstützung für Mehrsprachigkeit. Zudem werden Beispiele für den Code und nützliche Ressourcen zur Plugin-Entwicklung bereitgestellt.

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