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.
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
• WordPres...
• W WordPressie 3.9 zawarto TinyMCE 4.*
• TinyMCE posiada tryb “teeny”
• Łatwo go rozbudować o własne przyciski
• WordPres...
Podstawowe filtry
mce_buttons[_2,_3,_4]
( http://codex.wordpress.org/Plugin_API/Filter_Reference/mce_buttons,_mce_buttons_2,_mce_buttons_3,_...
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’)
)
...
function wordup_add_button() {
global $typenow;
if (
!current_user_can('edit_posts') &&
!current_user_can(‘edit_pages’)
)
...
function wordup_add_button() {
global $typenow;
if (
!current_user_can('edit_posts') &&
!current_user_can(‘edit_pages’)
)
...
function wordup_add_plugin($plgs) {
$plgs['wordup_button'] = plugins_url('/btn.js', __FILE__);
return $plgs;
}
!
!
!
!
*.p...
function wordup_add_plugin($plgs) {
$plgs['wordup_button'] = plugins_url('/btn.js', __FILE__);
return $plgs;
}
!
function ...
(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...
icon: ‘wp-media-library’ => .mce-i-wp-media-library
( http://wp.dziudek.pl/dev/dodawanie-wlasnych-przyciskow-w-edytorze-ti...
( 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_rem...
Zmieniamy ikonę oraz
wstawiamy do edytora tekst
!
add_action(
'admin_enqueue_scripts',
‘wordup_add_css'
);
!
function wordup_add_css() {
wp_enqueue_style(
'wordup-tinymce...
i.mce-i-icon {
font: 400 20px/1 dashicons;
padding: 0;
vertical-align: top;
speak: none;
-webkit-font-smoothing: antialias...
(function() {
tinymce.PluginManager.add(‘wordup_button',
function(editor, url) {
editor.addButton( ‘wordup_button', {
titl...
Dajemy użytkownikowi
wybór
(function() {
tinymce.PluginManager.add(
'wordup_button',
function( ed, url ) {
ed.addButton( 'wordup_button', {
title: 'M...
Zaawansowana
konfiguracja w popupie
(function() {
tinymce.PluginManager.add('wordup_button', function(editor, url){
editor.addButton( 'wordup_button', {
title...
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: ...
editor.windowManager.open( {
title: 'Wstaw nagłówek',
body: [{
type: 'textbox',
name: 'title',
label: 'Tytuł',
}, {
type: ...
editor.windowManager.open( {
title: 'Wstaw nagłówek',
body: [{
type: 'textbox',
name: 'title',
label: 'Tytuł',
}, {
type: ...
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...
<?php
!
if (!defined('ABSPATH')) exit;
!
!
!
!
!
!
!
!
!
!
!
!
!
!
!
!
<?php
!
if (!defined('ABSPATH')) exit;
!
if (!class_exists( '_WP_Editors' ))
require( ABSPATH . WPINC . '/class-wp-editor....
<?php
!
if (!defined('ABSPATH')) exit;
!
if (!class_exists( '_WP_Editors' ))
require( ABSPATH . WPINC . '/class-wp-editor....
<?php
!
if (!defined('ABSPATH')) exit;
!
if (!class_exists( '_WP_Editors' ))
require( ABSPATH . WPINC . '/class-wp-editor....
<?php
!
if (!defined('ABSPATH')) exit;
!
if (!class_exists( '_WP_Editors' ))
require( ABSPATH . WPINC . '/class-wp-editor....
<?php
!
if (!defined('ABSPATH')) exit;
!
if (!class_exists( '_WP_Editors' ))
require( ABSPATH . WPINC . '/class-wp-editor....
editor.getLang('OBIEKT.KLUCZ')
(function() {
tinymce.PluginManager.add(
'wordup_button',
function( editor, url ) {
editor.addButton( 'wordup_button', {
t...
Dodatkowe przykłady
Dodawanie przycisków w trybie fullscreen
Kontrolka styleselect
TinyMCE w sekcji komentarzy
Wszystkie m...
Przykłady do Pobrania
Kontakt
• @dziudek
• dziudek@gmail.com
• wp.dziudek.pl
• zebymniezapomnial.tumblr.com
Pytania?
Tworzenie wtyczek dla TinyMCE 4.* - WordUp Wrocław
Tworzenie wtyczek dla TinyMCE 4.* - WordUp Wrocław
Tworzenie wtyczek dla TinyMCE 4.* - WordUp Wrocław
Tworzenie wtyczek dla TinyMCE 4.* - WordUp Wrocław
Tworzenie wtyczek dla TinyMCE 4.* - WordUp Wrocław
Upcoming SlideShare
Loading in …5
×

Tworzenie wtyczek dla TinyMCE 4.* - WordUp Wrocław

1,051 views

Published on

Wprowadzenie do tworzenia wtyczek w edytorze TinyMCE 4.* dostępnym od WordPressa 3.9

Published in: Technology, Business
  • Be the first to comment

Tworzenie wtyczek dla TinyMCE 4.* - WordUp Wrocław

  1. 1. Tworzenie wtyczek dla TinyMCE 4.* Tomasz Dziuda ! WordUp Wrocław @ V.2014
  2. 2. Co warto wiedzieć o TinyMCE?
  3. 3. • W WordPressie 3.9 zawarto TinyMCE 4.*
  4. 4. • W WordPressie 3.9 zawarto TinyMCE 4.* • TinyMCE posiada tryb “teeny”
  5. 5. • W WordPressie 3.9 zawarto TinyMCE 4.* • TinyMCE posiada tryb “teeny” • Łatwo go rozbudować o własne przyciski
  6. 6. • 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
  7. 7. • 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 ;)
  8. 8. Podstawowe filtry
  9. 9. mce_buttons[_2,_3,_4] ( http://codex.wordpress.org/Plugin_API/Filter_Reference/mce_buttons,_mce_buttons_2,_mce_buttons_3,_mce_buttons_4 )
  10. 10. teeny_mce_buttons
  11. 11. mce_external_languages
  12. 12. mce_external_plugins
  13. 13. mce_css ( http://codex.wordpress.org/Plugin_API/Filter_Reference/mce_css )
  14. 14. tiny_mce_before_init ( http://codex.wordpress.org/Plugin_API/Filter_Reference/tiny_mce_before_init )
  15. 15. Dodajemy przycisk do edytora
  16. 16. add_action( 'admin_head', ‘wordup_add_button' ); *.php
  17. 17. function wordup_add_button() { ! ! ! ! ! ! ! ! ! ! ! ! ! ! } *.php
  18. 18. function wordup_add_button() { global $typenow; ! ! ! ! ! ! ! ! ! ! ! ! } *.php
  19. 19. function wordup_add_button() { global $typenow; if ( !current_user_can('edit_posts') && !current_user_can(‘edit_pages’) ) return; ! ! ! ! ! ! ! } *.php
  20. 20. 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
  21. 21. 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
  22. 22. function wordup_add_plugin($plgs) { $plgs['wordup_button'] = plugins_url('/btn.js', __FILE__); return $plgs; } ! ! ! ! *.php
  23. 23. 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
  24. 24. (function() { ! ! ! ! ! ! ! ! })(); *.js
  25. 25. (function() { tinymce.PluginManager.add('NAZWA', ! ! ! ! ! ); })(); *.js
  26. 26. (function() { tinymce.PluginManager.add('NAZWA', function(ed, url) { ! ! ! } ); })(); *.js
  27. 27. (function() { tinymce.PluginManager.add('NAZWA', function(ed, url) { ed.addButton( 'NAZWA', { title: 'TYTUŁ', icon: 'IKONA' }); } ); })(); *.js
  28. 28. icon: ‘wp-media-library’ => .mce-i-wp-media-library ( http://wp.dziudek.pl/dev/dodawanie-wlasnych-przyciskow-w-edytorze-tinymce-4 )
  29. 29. ( http://melchoyce.github.io/dashicons/ )
  30. 30. Usuwamy przycisk z edytora
  31. 31. function wordup_remove_buttons($buttons) { unset($buttons[0]); return $buttons; } ! ! ! !
  32. 32. function wordup_remove_buttons($buttons) { unset($buttons[0]); return $buttons; } ! add_filter( 'mce_buttons', 'wordup_remove_buttons' );
  33. 33. Zmieniamy ikonę oraz wstawiamy do edytora tekst
  34. 34. ! add_action( 'admin_enqueue_scripts', ‘wordup_add_css' ); ! function wordup_add_css() { wp_enqueue_style( 'wordup-tinymce', plugins_url('/style.css', __FILE__) ); }
  35. 35. 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
  36. 36. (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'); } }); } ); })();
  37. 37. Dajemy użytkownikowi wybór
  38. 38. (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()); } // .. }] }); }); })();
  39. 39. Zaawansowana konfiguracja w popupie
  40. 40. (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>'); } }); } }); }); })();
  41. 41. editor.windowManager.open( { title: 'Wstaw nagłówek', ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! });
  42. 42. editor.windowManager.open( { title: 'Wstaw nagłówek', body: [{ type: 'textbox', name: 'title', label: 'Tytuł', }] ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! });
  43. 43. editor.windowManager.open( { title: 'Wstaw nagłówek', body: [{ type: 'textbox', name: 'title', label: 'Tytuł', }, { type: 'textbox', name: 'id', label: 'Nazwa kotwicy' }] ! ! ! ! ! ! ! ! ! ! ! ! ! ! });
  44. 44. 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'} ] }] ! ! ! ! });
  45. 45. 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 + '>'); } });
  46. 46. Wsparcie dla Wielojęzyczności
  47. 47. wp_localize_script
  48. 48. wp_localize_script
  49. 49. 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' );
  50. 50. <?php ! if (!defined('ABSPATH')) exit; ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! !
  51. 51. <?php ! if (!defined('ABSPATH')) exit; ! if (!class_exists( '_WP_Editors' )) require( ABSPATH . WPINC . '/class-wp-editor.php' ); ! ! ! ! ! ! ! ! ! ! ! ! ! !
  52. 52. <?php ! if (!defined('ABSPATH')) exit; ! if (!class_exists( '_WP_Editors' )) require( ABSPATH . WPINC . '/class-wp-editor.php' ); ! function wordup_button_translation() { ! ! ! ! ! ! ! ! ! } ! !
  53. 53. <?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') ); ! ! ! ! } !
  54. 54. <?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; } !
  55. 55. <?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();
  56. 56. editor.getLang('OBIEKT.KLUCZ')
  57. 57. (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’) ); } }); } ); })();
  58. 58. Dodatkowe przykłady Dodawanie przycisków w trybie fullscreen Kontrolka styleselect TinyMCE w sekcji komentarzy Wszystkie materiały: ! http://wp.dziudek.pl/kategorie/tinymce
  59. 59. Przykłady do Pobrania
  60. 60. Kontakt • @dziudek • dziudek@gmail.com • wp.dziudek.pl • zebymniezapomnial.tumblr.com
  61. 61. Pytania?

×