Tworzenie wtyczek dla TinyMCE 4.*

Tomasz Dziuda !

WordUp Wrocław @ V.2014

Co warto wiedzieć o TinyMCE?

• W WordPressie 3.9 zawarto TinyMCE 4.*

• W WordPressie 3.9 zawarto TinyMCE 4.*

• TinyMCE posiada tryb “teeny”

• W WordPressie 3.9 zawarto TinyMCE 4.*

• TinyMCE posiada tryb “teeny”

• Łatwo go rozbudować o własne przyciski

• W WordPressie 3.9 zawarto TinyMCE 4.*

• TinyMCE posiada tryb “teeny”

• Łatwo go rozbudować o własne przyciski

• WordPress posiada sporo filtrów dedykowanych TinyMCE

• W WordPressie 3.9 zawarto TinyMCE 4.*

• TinyMCE posiada tryb “teeny”

• Łatwo go rozbudować o własne przyciski

• WordPress posiada sporo filtrów dedykowanych TinyMCE

• Dokumentacja TinyMCE ssie ;)

Podstawowe filtry

mce_buttons[_2,_3,_4]

( http://codex.wordpress.org/Plugin_API/Filter_Reference/mce_buttons,_mce_buttons_2,_mce_buttons_3,_mce_buttons_4 )

teeny_mce_buttons

mce_external_languages

mce_external_plugins

mce_css

( http://codex.wordpress.org/Plugin_API/Filter_Reference/mce_css )

tiny_mce_before_init

( http://codex.wordpress.org/Plugin_API/Filter_Reference/tiny_mce_before_init )

Dodajemy przycisk do edytora

add_action( 'admin_head', ‘wordup_add_button' );

*.php

function wordup_add_button() { !!!!!!!!!!!!!!}

*.php

function wordup_add_button() { global $typenow; !!!!!!!!!!!!}

*.php

function wordup_add_button() { global $typenow; if ( !current_user_can('edit_posts') && !current_user_can(‘edit_pages’) ) return; !!!!!!!}

*.php

function wordup_add_button() { global $typenow; if ( !current_user_can('edit_posts') && !current_user_can(‘edit_pages’) ) return; if(!in_array($typenow, array('post', 'page'))) return; !!!!}

*.php

function wordup_add_button() { global $typenow; if ( !current_user_can('edit_posts') && !current_user_can(‘edit_pages’) ) return; if(!in_array($typenow, array('post', 'page'))) return; if (get_user_option('rich_editing') == 'true') { add_filter(‘mce_external_plugins’, ‘wordup_add_plugin’); add_filter('mce_buttons', 'wordup_register_button'); } }

*.php

function wordup_add_plugin($plgs) { $plgs['wordup_button'] = plugins_url('/btn.js', __FILE__); return $plgs; } !!!!

*.php

function wordup_add_plugin($plgs) { $plgs['wordup_button'] = plugins_url('/btn.js', __FILE__); return $plgs; } !function wordup_register_button($buttons) { array_push($buttons, "wordup_button"); return $buttons; }

*.php

(function() { !!!!!!!!})();

*.js

(function() { tinymce.PluginManager.add('NAZWA', !!!!! ); })();

*.js

(function() { tinymce.PluginManager.add('NAZWA', function(ed, url) { !!! } ); })();

*.js

(function() { tinymce.PluginManager.add('NAZWA', function(ed, url) { ed.addButton( 'NAZWA', { title: 'TYTUŁ', icon: 'IKONA' }); } ); })();

*.js

icon: ‘wp-media-library’ => .mce-i-wp-media-library( http://wp.dziudek.pl/dev/dodawanie-wlasnych-przyciskow-w-edytorze-tinymce-4 )

( http://melchoyce.github.io/dashicons/ )

Usuwamy przycisk z edytora

function wordup_remove_buttons($buttons) { unset($buttons[0]); return $buttons; } !!!!

function wordup_remove_buttons($buttons) { unset($buttons[0]); return $buttons; } !add_filter( 'mce_buttons', 'wordup_remove_buttons' );

Zmieniamy ikonę oraz wstawiamy do edytora tekst

!add_action( 'admin_enqueue_scripts', ‘wordup_add_css' ); !function wordup_add_css() { wp_enqueue_style( 'wordup-tinymce', plugins_url('/style.css', __FILE__) ); }

i.mce-i-icon { font: 400 20px/1 dashicons; padding: 0; vertical-align: top; speak: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; margin-left: -2px; padding-right: 2px }

style.css

(function() { tinymce.PluginManager.add(‘wordup_button', function(editor, url) { editor.addButton( ‘wordup_button', { title: ‘My test button', icon: ‘icon dashicons-dashboard’, onclick: function() { editor.insertContent('Hello World'); } }); } ); })();

Dajemy użytkownikowi wybór

(function() { tinymce.PluginManager.add( 'wordup_button', function( ed, url ) { ed.addButton( 'wordup_button', { title: 'My test button', type: 'menubutton', icon: 'icon dashicons-dashboard', menu: [{ text: 'Menu item I', value: 'Text from menu item I', icon: 'icon dashicons-wordpress', onclick: function() { ed.insertContent(this.value()); } // .. }] }); }); })();

Zaawansowana konfiguracja w popupie

(function() { tinymce.PluginManager.add('wordup_button', function(editor, url){ editor.addButton( 'wordup_button', { title: 'Własny nagłówek', icon: 'icon dashicons-dashboard', onclick: function() { editor.windowManager.open( { title: 'Wstaw nagłówek', body: [{ type: 'textbox', name: 'title', label: 'Tytuł' }], onsubmit: function( e ) { editor.insertContent( '<h3>' + e.data.title + '</h3>'); } }); } }); }); })();

editor.windowManager.open( { title: 'Wstaw nagłówek', !!!!!!!!!!!!!!!!!!!!!!});

editor.windowManager.open( { title: 'Wstaw nagłówek', body: [{ type: 'textbox', name: 'title', label: 'Tytuł', }] !!!!!!!!!!!!!!!!!!});

editor.windowManager.open( { title: 'Wstaw nagłówek', body: [{ type: 'textbox', name: 'title', label: 'Tytuł', }, { type: 'textbox', name: 'id', label: 'Nazwa kotwicy' }] !!!!!!!!!!!!!!});

editor.windowManager.open( { title: 'Wstaw nagłówek', body: [{ type: 'textbox', name: 'title', label: 'Tytuł', }, { type: 'textbox', name: 'id', label: 'Nazwa kotwicy' }, { type: 'listbox', name: 'level', label: 'Poziom nagłówka', 'values': [ {text: '<h3>', value: '3'}, {text: '<h4>', value: '4'}, {text: '<h5>', value: '5'}, {text: '<h6>', value: '6'} ] }] !!!!});

editor.windowManager.open( { title: 'Wstaw nagłówek', body: [{ type: 'textbox', name: 'title', label: 'Tytuł', }, { type: 'textbox', name: 'id', label: 'Nazwa kotwicy' }, { type: 'listbox', name: 'level', label: 'Poziom nagłówka', 'values': [ {text: '<h3>', value: '3'}, {text: '<h4>', value: '4'}, {text: '<h5>', value: '5'}, {text: '<h6>', value: '6'} ] }], onsubmit: function( e ) { editor.insertContent( '<h' + e.data.level + ' id="' + e.data.id + '">' + e.data.title + '</h' + e.data.level + '>'); } });

Wsparcie dla Wielojęzyczności

wp_localize_script

wp_localize_script

function wordup_add_button_lang($loc) { $loc['wordup_button'] = plugin_dir_path(__FILE__).'lang.php'; return $loc; } !add_filter( 'mce_external_languages', ‘wordup_add_button_lang' );

<?php !if (!defined('ABSPATH')) exit; !! !! !!!!!!!!!!!!

<?php !if (!defined('ABSPATH')) exit; !if (!class_exists( '_WP_Editors' )) require( ABSPATH . WPINC . '/class-wp-editor.php' ); !! !!!!!!!!!!!!

<?php !if (!defined('ABSPATH')) exit; !if (!class_exists( '_WP_Editors' )) require( ABSPATH . WPINC . '/class-wp-editor.php' ); !function wordup_button_translation() { !!!!!!!!!} !!

<?php !if (!defined('ABSPATH')) exit; !if (!class_exists( '_WP_Editors' )) require( ABSPATH . WPINC . '/class-wp-editor.php' ); !function wordup_button_translation() { $strings = array( 'label' => __('My test’, 'wordup_button'), 'msg' => __('Hello World!!!!', 'wordup_button') ); ! !!! } !

<?php !if (!defined('ABSPATH')) exit; !if (!class_exists( '_WP_Editors' )) require( ABSPATH . WPINC . '/class-wp-editor.php' ); !function wordup_button_translation() { $strings = array( 'label' => __('My test’, 'wordup_button'), 'msg' => __('Hello World!!!!', 'wordup_button') ); ! $locale = _WP_Editors::$mce_locale; $translated = 'tinyMCE.addI18n("' . $locale . '.wordup_button", ' . json_encode( $strings ) . ");\n"; ! return $translated; } !

<?php !if (!defined('ABSPATH')) exit; !if (!class_exists( '_WP_Editors' )) require( ABSPATH . WPINC . '/class-wp-editor.php' ); !function wordup_button_translation() { $strings = array( 'label' => __('My test’, 'wordup_button'), 'msg' => __('Hello World!!!!', 'wordup_button') ); ! $locale = _WP_Editors::$mce_locale; $translated = 'tinyMCE.addI18n("' . $locale . '.wordup_button", ' . json_encode( $strings ) . ");\n"; ! return $translated; } !$strings = wordup_button_translation();

editor.getLang('OBIEKT.KLUCZ')

(function() { tinymce.PluginManager.add( 'wordup_button', function( editor, url ) { editor.addButton( 'wordup_button', { title: editor.getLang('wordup_button.label'), icon: 'icon dashicons-dashboard’, onclick: function() { editor.insertContent( editor.getLang(‘wordup_button.msg’) ); } }); } ); })();

Dodatkowe przykłady

Dodawanie przycisków w trybie fullscreen

Kontrolka styleselect

TinyMCE w sekcji komentarzy

Wszystkie materiały: !

http://wp.dziudek.pl/kategorie/tinymce

Przykłady do Pobrania

Kontakt

• @dziudek

• dziudek@gmail.com

• wp.dziudek.pl

• zebymniezapomnial.tumblr.com

Pytania?