SlideShare ist ein Scribd-Unternehmen logo
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 den TinyMCE 2
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
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
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
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
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
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
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
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
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
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
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
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
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
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

Weitere ähnliche Inhalte

Was ist angesagt?

HTML5 und CSS3 - was jetzt schon möglich ist
HTML5 und CSS3 - was jetzt schon möglich istHTML5 und CSS3 - was jetzt schon möglich ist
HTML5 und CSS3 - was jetzt schon möglich ist
Renate Hermanns
 
Neos CMS - Das CMS der nächsten Generation - IPC 2015
Neos CMS - Das CMS der nächsten Generation - IPC 2015Neos CMS - Das CMS der nächsten Generation - IPC 2015
Neos CMS - Das CMS der nächsten Generation - IPC 2015
die.agilen GmbH
 
Wir brauchen einen neuen Workflow
Wir brauchen einen neuen WorkflowWir brauchen einen neuen Workflow
Wir brauchen einen neuen Workflow
Jens Grochtdreis
 
Multi Touch.Prio.Conference 2009
Multi Touch.Prio.Conference 2009Multi Touch.Prio.Conference 2009
Multi Touch.Prio.Conference 2009Gregor Biswanger
 
Drupal und twig
Drupal und twigDrupal und twig
Drupal und twig
Steffen Rühlmann
 
BASTA Spring 2016 - Moderne Versionsverwaltung mit Git, und der neue Build-Se...
BASTA Spring 2016 - Moderne Versionsverwaltung mit Git, und der neue Build-Se...BASTA Spring 2016 - Moderne Versionsverwaltung mit Git, und der neue Build-Se...
BASTA Spring 2016 - Moderne Versionsverwaltung mit Git, und der neue Build-Se...
Marc Müller
 
Hypervideo, HTML5, Popcorn: Wie Videos Web-Bürger erster Klasse werden
Hypervideo, HTML5, Popcorn: Wie Videos Web-Bürger erster Klasse werdenHypervideo, HTML5, Popcorn: Wie Videos Web-Bürger erster Klasse werden
Hypervideo, HTML5, Popcorn: Wie Videos Web-Bürger erster Klasse werden
Julius Tröger
 
TechDays 2016 - Der DevOps Kreislauf – Moderne Source Code Verwaltung und Pac...
TechDays 2016 - Der DevOps Kreislauf – Moderne Source Code Verwaltung und Pac...TechDays 2016 - Der DevOps Kreislauf – Moderne Source Code Verwaltung und Pac...
TechDays 2016 - Der DevOps Kreislauf – Moderne Source Code Verwaltung und Pac...
Marc Müller
 
Ueberlegungen Projektmanagement Web Applications
Ueberlegungen Projektmanagement Web ApplicationsUeberlegungen Projektmanagement Web Applications
Ueberlegungen Projektmanagement Web ApplicationsGünther Haslbeck
 
Am Ende ist doch alles HTML - 2012 - Webmontag Edition
Am Ende ist doch alles HTML - 2012 - Webmontag EditionAm Ende ist doch alles HTML - 2012 - Webmontag Edition
Am Ende ist doch alles HTML - 2012 - Webmontag Edition
Jens Grochtdreis
 
Native Cross-Platform-Apps mit Titanium Mobile und Alloy
Native Cross-Platform-Apps mit Titanium Mobile und AlloyNative Cross-Platform-Apps mit Titanium Mobile und Alloy
Native Cross-Platform-Apps mit Titanium Mobile und Alloy
Mayflower GmbH
 
BASTA Spring 2018 - DevOps mit TFS: Releasepipelines und Continuous Delivery
BASTA Spring 2018 - DevOps mit TFS: Releasepipelines und Continuous DeliveryBASTA Spring 2018 - DevOps mit TFS: Releasepipelines und Continuous Delivery
BASTA Spring 2018 - DevOps mit TFS: Releasepipelines und Continuous Delivery
Marc Müller
 
Automatisierung mit grunt
Automatisierung mit gruntAutomatisierung mit grunt
Automatisierung mit grunt
Christian Keuerleber
 
XPages Full HD
XPages Full HDXPages Full HD
XPages Full HD
Christian Güdemann
 
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-Apps
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-AppsAber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-Apps
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-Apps
Gregor Biswanger
 
WordPress Professional III
WordPress Professional IIIWordPress Professional III
WordPress Professional III
Sebastian Blum
 
Popcorn Maker
Popcorn MakerPopcorn Maker
Popcorn Maker
Renate Hermanns
 

Was ist angesagt? (17)

HTML5 und CSS3 - was jetzt schon möglich ist
HTML5 und CSS3 - was jetzt schon möglich istHTML5 und CSS3 - was jetzt schon möglich ist
HTML5 und CSS3 - was jetzt schon möglich ist
 
Neos CMS - Das CMS der nächsten Generation - IPC 2015
Neos CMS - Das CMS der nächsten Generation - IPC 2015Neos CMS - Das CMS der nächsten Generation - IPC 2015
Neos CMS - Das CMS der nächsten Generation - IPC 2015
 
Wir brauchen einen neuen Workflow
Wir brauchen einen neuen WorkflowWir brauchen einen neuen Workflow
Wir brauchen einen neuen Workflow
 
Multi Touch.Prio.Conference 2009
Multi Touch.Prio.Conference 2009Multi Touch.Prio.Conference 2009
Multi Touch.Prio.Conference 2009
 
Drupal und twig
Drupal und twigDrupal und twig
Drupal und twig
 
BASTA Spring 2016 - Moderne Versionsverwaltung mit Git, und der neue Build-Se...
BASTA Spring 2016 - Moderne Versionsverwaltung mit Git, und der neue Build-Se...BASTA Spring 2016 - Moderne Versionsverwaltung mit Git, und der neue Build-Se...
BASTA Spring 2016 - Moderne Versionsverwaltung mit Git, und der neue Build-Se...
 
Hypervideo, HTML5, Popcorn: Wie Videos Web-Bürger erster Klasse werden
Hypervideo, HTML5, Popcorn: Wie Videos Web-Bürger erster Klasse werdenHypervideo, HTML5, Popcorn: Wie Videos Web-Bürger erster Klasse werden
Hypervideo, HTML5, Popcorn: Wie Videos Web-Bürger erster Klasse werden
 
TechDays 2016 - Der DevOps Kreislauf – Moderne Source Code Verwaltung und Pac...
TechDays 2016 - Der DevOps Kreislauf – Moderne Source Code Verwaltung und Pac...TechDays 2016 - Der DevOps Kreislauf – Moderne Source Code Verwaltung und Pac...
TechDays 2016 - Der DevOps Kreislauf – Moderne Source Code Verwaltung und Pac...
 
Ueberlegungen Projektmanagement Web Applications
Ueberlegungen Projektmanagement Web ApplicationsUeberlegungen Projektmanagement Web Applications
Ueberlegungen Projektmanagement Web Applications
 
Am Ende ist doch alles HTML - 2012 - Webmontag Edition
Am Ende ist doch alles HTML - 2012 - Webmontag EditionAm Ende ist doch alles HTML - 2012 - Webmontag Edition
Am Ende ist doch alles HTML - 2012 - Webmontag Edition
 
Native Cross-Platform-Apps mit Titanium Mobile und Alloy
Native Cross-Platform-Apps mit Titanium Mobile und AlloyNative Cross-Platform-Apps mit Titanium Mobile und Alloy
Native Cross-Platform-Apps mit Titanium Mobile und Alloy
 
BASTA Spring 2018 - DevOps mit TFS: Releasepipelines und Continuous Delivery
BASTA Spring 2018 - DevOps mit TFS: Releasepipelines und Continuous DeliveryBASTA Spring 2018 - DevOps mit TFS: Releasepipelines und Continuous Delivery
BASTA Spring 2018 - DevOps mit TFS: Releasepipelines und Continuous Delivery
 
Automatisierung mit grunt
Automatisierung mit gruntAutomatisierung mit grunt
Automatisierung mit grunt
 
XPages Full HD
XPages Full HDXPages Full HD
XPages Full HD
 
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-Apps
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-AppsAber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-Apps
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-Apps
 
WordPress Professional III
WordPress Professional IIIWordPress Professional III
WordPress Professional III
 
Popcorn Maker
Popcorn MakerPopcorn Maker
Popcorn Maker
 

Ähnlich wie #wpdm - Plugin-Entwicklung für den TinyMCE

Was ist neu in .NET 4.5?
Was ist neu in .NET 4.5?Was ist neu in .NET 4.5?
Was ist neu in .NET 4.5?
Digicomp Academy AG
 
Lokale TYPO3 Entwicklungsumgebung mit DDEV
Lokale TYPO3 Entwicklungsumgebung mit DDEVLokale TYPO3 Entwicklungsumgebung mit DDEV
Lokale TYPO3 Entwicklungsumgebung mit DDEV
Peter Kraume
 
German: Softwareprodukte aus einem Source Code mit Javascript
German: Softwareprodukte aus einem Source Code mit JavascriptGerman: Softwareprodukte aus einem Source Code mit Javascript
German: Softwareprodukte aus einem Source Code mit Javascript
Ralf Schwoebel
 
VCAT EDULABS @ WP Camp 2013: Plugin-Entwicklung mit eigenen Tabellen, Backend...
VCAT EDULABS @ WP Camp 2013: Plugin-Entwicklung mit eigenen Tabellen, Backend...VCAT EDULABS @ WP Camp 2013: Plugin-Entwicklung mit eigenen Tabellen, Backend...
VCAT EDULABS @ WP Camp 2013: Plugin-Entwicklung mit eigenen Tabellen, Backend...
VCAT Consulting GmbH
 
HTML5 und node.js Grundlagen
HTML5 und node.js GrundlagenHTML5 und node.js Grundlagen
HTML5 und node.js GrundlagenMayflower GmbH
 
WordPress Editoren erweitern
WordPress Editoren erweiternWordPress Editoren erweitern
WordPress Editoren erweitern
frankstaude
 
C/ C++ for Notes & Domino Developers
C/ C++ for Notes & Domino DevelopersC/ C++ for Notes & Domino Developers
C/ C++ for Notes & Domino Developers
Ulrich Krause
 
DDEV - Eine lokale Entwicklungsumgebung
DDEV - Eine lokale EntwicklungsumgebungDDEV - Eine lokale Entwicklungsumgebung
DDEV - Eine lokale Entwicklungsumgebung
Frank Schmittlein
 
GitLab: CI-Pipelines | PHP Usergroup Hamburg 20.03.2018
GitLab: CI-Pipelines | PHP Usergroup Hamburg 20.03.2018GitLab: CI-Pipelines | PHP Usergroup Hamburg 20.03.2018
GitLab: CI-Pipelines | PHP Usergroup Hamburg 20.03.2018
Christian Mücke
 
magnolia mit thymeleaf - ein agiler prozess-beschleuniger
magnolia mit thymeleaf - ein agiler prozess-beschleunigermagnolia mit thymeleaf - ein agiler prozess-beschleuniger
magnolia mit thymeleaf - ein agiler prozess-beschleuniger
Thomas Kratz
 
Web460 ppt-de-jul-wi-web-all-2020
Web460 ppt-de-jul-wi-web-all-2020Web460 ppt-de-jul-wi-web-all-2020
Web460 ppt-de-jul-wi-web-all-2020
HansruediDbeli1
 
Automatisierte Entwickler VMs -- "works on my machine" zählt nicht mehr ;-)
Automatisierte Entwickler VMs -- "works on my machine" zählt nicht mehr ;-)Automatisierte Entwickler VMs -- "works on my machine" zählt nicht mehr ;-)
Automatisierte Entwickler VMs -- "works on my machine" zählt nicht mehr ;-)
Torben Knerr
 
Fachreferat: Visual Studio 2012, Windows 8 und .NET 4.5
Fachreferat: Visual Studio 2012, Windows 8 und .NET 4.5Fachreferat: Visual Studio 2012, Windows 8 und .NET 4.5
Fachreferat: Visual Studio 2012, Windows 8 und .NET 4.5
Digicomp Academy AG
 
Roslyn DDC Kompakt 2014
Roslyn DDC Kompakt 2014Roslyn DDC Kompakt 2014
Roslyn DDC Kompakt 2014
Christian Giesswein
 
Grundlagen puppet
Grundlagen puppetGrundlagen puppet
Grundlagen puppetinovex GmbH
 
PHP-Module in statischen Seiten - Architektur-Ansätze
PHP-Module in statischen Seiten - Architektur-AnsätzePHP-Module in statischen Seiten - Architektur-Ansätze
PHP-Module in statischen Seiten - Architektur-Ansätze
Ralf Lütke
 
SEO Day 2016: Perfekte Ladezeiten und SEO-Hosting für Speed-Freaks
SEO Day 2016: Perfekte Ladezeiten und SEO-Hosting für Speed-FreaksSEO Day 2016: Perfekte Ladezeiten und SEO-Hosting für Speed-Freaks
SEO Day 2016: Perfekte Ladezeiten und SEO-Hosting für Speed-Freaks
SEARCH ONE
 
SharePointCommunity.ch SharePoint Lösungen für die Zukunft
SharePointCommunity.ch SharePoint Lösungen für die ZukunftSharePointCommunity.ch SharePoint Lösungen für die Zukunft
SharePointCommunity.ch SharePoint Lösungen für die Zukunft
David Schneider
 
Einführung in Windows Presentation Foundation
Einführung in Windows Presentation FoundationEinführung in Windows Presentation Foundation
Einführung in Windows Presentation Foundation
chmoser79
 
Ajax in domino web-anwendungen - der nächste schritt
Ajax in domino web-anwendungen - der nächste schrittAjax in domino web-anwendungen - der nächste schritt
Ajax in domino web-anwendungen - der nächste schrittdominion
 

Ähnlich wie #wpdm - Plugin-Entwicklung für den TinyMCE (20)

Was ist neu in .NET 4.5?
Was ist neu in .NET 4.5?Was ist neu in .NET 4.5?
Was ist neu in .NET 4.5?
 
Lokale TYPO3 Entwicklungsumgebung mit DDEV
Lokale TYPO3 Entwicklungsumgebung mit DDEVLokale TYPO3 Entwicklungsumgebung mit DDEV
Lokale TYPO3 Entwicklungsumgebung mit DDEV
 
German: Softwareprodukte aus einem Source Code mit Javascript
German: Softwareprodukte aus einem Source Code mit JavascriptGerman: Softwareprodukte aus einem Source Code mit Javascript
German: Softwareprodukte aus einem Source Code mit Javascript
 
VCAT EDULABS @ WP Camp 2013: Plugin-Entwicklung mit eigenen Tabellen, Backend...
VCAT EDULABS @ WP Camp 2013: Plugin-Entwicklung mit eigenen Tabellen, Backend...VCAT EDULABS @ WP Camp 2013: Plugin-Entwicklung mit eigenen Tabellen, Backend...
VCAT EDULABS @ WP Camp 2013: Plugin-Entwicklung mit eigenen Tabellen, Backend...
 
HTML5 und node.js Grundlagen
HTML5 und node.js GrundlagenHTML5 und node.js Grundlagen
HTML5 und node.js Grundlagen
 
WordPress Editoren erweitern
WordPress Editoren erweiternWordPress Editoren erweitern
WordPress Editoren erweitern
 
C/ C++ for Notes & Domino Developers
C/ C++ for Notes & Domino DevelopersC/ C++ for Notes & Domino Developers
C/ C++ for Notes & Domino Developers
 
DDEV - Eine lokale Entwicklungsumgebung
DDEV - Eine lokale EntwicklungsumgebungDDEV - Eine lokale Entwicklungsumgebung
DDEV - Eine lokale Entwicklungsumgebung
 
GitLab: CI-Pipelines | PHP Usergroup Hamburg 20.03.2018
GitLab: CI-Pipelines | PHP Usergroup Hamburg 20.03.2018GitLab: CI-Pipelines | PHP Usergroup Hamburg 20.03.2018
GitLab: CI-Pipelines | PHP Usergroup Hamburg 20.03.2018
 
magnolia mit thymeleaf - ein agiler prozess-beschleuniger
magnolia mit thymeleaf - ein agiler prozess-beschleunigermagnolia mit thymeleaf - ein agiler prozess-beschleuniger
magnolia mit thymeleaf - ein agiler prozess-beschleuniger
 
Web460 ppt-de-jul-wi-web-all-2020
Web460 ppt-de-jul-wi-web-all-2020Web460 ppt-de-jul-wi-web-all-2020
Web460 ppt-de-jul-wi-web-all-2020
 
Automatisierte Entwickler VMs -- "works on my machine" zählt nicht mehr ;-)
Automatisierte Entwickler VMs -- "works on my machine" zählt nicht mehr ;-)Automatisierte Entwickler VMs -- "works on my machine" zählt nicht mehr ;-)
Automatisierte Entwickler VMs -- "works on my machine" zählt nicht mehr ;-)
 
Fachreferat: Visual Studio 2012, Windows 8 und .NET 4.5
Fachreferat: Visual Studio 2012, Windows 8 und .NET 4.5Fachreferat: Visual Studio 2012, Windows 8 und .NET 4.5
Fachreferat: Visual Studio 2012, Windows 8 und .NET 4.5
 
Roslyn DDC Kompakt 2014
Roslyn DDC Kompakt 2014Roslyn DDC Kompakt 2014
Roslyn DDC Kompakt 2014
 
Grundlagen puppet
Grundlagen puppetGrundlagen puppet
Grundlagen puppet
 
PHP-Module in statischen Seiten - Architektur-Ansätze
PHP-Module in statischen Seiten - Architektur-AnsätzePHP-Module in statischen Seiten - Architektur-Ansätze
PHP-Module in statischen Seiten - Architektur-Ansätze
 
SEO Day 2016: Perfekte Ladezeiten und SEO-Hosting für Speed-Freaks
SEO Day 2016: Perfekte Ladezeiten und SEO-Hosting für Speed-FreaksSEO Day 2016: Perfekte Ladezeiten und SEO-Hosting für Speed-Freaks
SEO Day 2016: Perfekte Ladezeiten und SEO-Hosting für Speed-Freaks
 
SharePointCommunity.ch SharePoint Lösungen für die Zukunft
SharePointCommunity.ch SharePoint Lösungen für die ZukunftSharePointCommunity.ch SharePoint Lösungen für die Zukunft
SharePointCommunity.ch SharePoint Lösungen für die Zukunft
 
Einführung in Windows Presentation Foundation
Einführung in Windows Presentation FoundationEinführung in Windows Presentation Foundation
Einführung in Windows Presentation Foundation
 
Ajax in domino web-anwendungen - der nächste schritt
Ajax in domino web-anwendungen - der nächste schrittAjax in domino web-anwendungen - der nächste schritt
Ajax in domino web-anwendungen - der nächste schritt
 

#wpdm - Plugin-Entwicklung für den TinyMCE

  • 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