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.* - WordUp Kraków

1,233 views

Published on

Ulepszona wersja mojej prelekcji z WordUpa we Wrocławiu o tworzeniu wtyczek dla edytora TinyMCE 4.*

Published in: Technology
  • Be the first to comment

Tworzenie wtyczek dla TinyMCE 4.* - WordUp Kraków

  1. 1. Tworzenie wtyczek dla TinyMCE 4.* Tomasz Dziuda ! WordUp Kraków - Lato 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. Dlaczego wtyczki dla TinyMCE są potrzebne?
  9. 9. • Pozwalają dodać brakujące funkcjonalności edytora
 
 
 
 
 
 

  10. 10. • Pozwalają dodać brakujące funkcjonalności edytora • Możliwe jest dostosowanie UI edytora pod potrzeby klienta
 
 
 

  11. 11. • Pozwalają dodać brakujące funkcjonalności edytora • Możliwe jest dostosowanie UI edytora pod potrzeby klienta • Umożliwiają ograniczenie pola manewru klientowi
 

  12. 12. • Pozwalają dodać brakujące funkcjonalności edytora • Możliwe jest dostosowanie UI edytora pod potrzeby klienta • Umożliwiają ograniczenie pola manewru klientowi • Pozwalają zapomnieć o składni shortcode’ów
  13. 13. Podstawowe filtry
  14. 14. mce_buttons[_2,_3,_4] ( http://codex.wordpress.org/Plugin_API/Filter_Reference/mce_buttons,_mce_buttons_2,_mce_buttons_3,_mce_buttons_4 )
  15. 15. teeny_mce_buttons
  16. 16. mce_external_languages
  17. 17. mce_external_plugins
  18. 18. mce_css ( http://codex.wordpress.org/Plugin_API/Filter_Reference/mce_css )
  19. 19. tiny_mce_before_init ( http://codex.wordpress.org/Plugin_API/Filter_Reference/tiny_mce_before_init )
  20. 20. Dodajemy przycisk do edytora
  21. 21. add_action( 'admin_head', ‘wordup_add_button' ); *.php
  22. 22. function wordup_add_button() { ! ! ! ! ! ! ! ! ! ! ! ! ! ! } *.php
  23. 23. function wordup_add_button() { global $typenow; ! ! ! ! ! ! ! ! ! ! ! ! } *.php
  24. 24. function wordup_add_button() { global $typenow; if ( !current_user_can('edit_posts') && !current_user_can(‘edit_pages’) ) return; ! ! ! ! ! ! ! } *.php
  25. 25. 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
  26. 26. 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
  27. 27. function wordup_add_plugin($plgs) { $plgs['wordup_button'] = plugins_url('/btn.js', __FILE__); return $plgs; } ! ! ! ! *.php
  28. 28. 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
  29. 29. (function() { ! ! ! ! ! ! ! ! })(); *.js
  30. 30. (function() { tinymce.PluginManager.add(‘wordup_button', ! ! ! ! ! ); })(); *.js
  31. 31. (function() { tinymce.PluginManager.add(‘wordup_button', function(editor, url) { ! ! ! } ); })(); *.js
  32. 32. (function() { tinymce.PluginManager.add(‘wordup_button', function(editor, url) { editor.addButton(‘wordup_button', { title: ‘My Test Button', icon: ‘wp-media-library‘ }); } ); })(); *.js
  33. 33. icon: ‘wp-media-library’ => .mce-i-wp-media-library ( http://wp.dziudek.pl/dev/dodawanie-wlasnych-przyciskow-w-edytorze-tinymce-4 )
  34. 34. Usuwamy przycisk z edytora
  35. 35. function wordup_remove_buttons($buttons) { unset($buttons[0]); return $buttons; } ! ! ! !
  36. 36. function wordup_remove_buttons($buttons) { unset($buttons[0]); return $buttons; } ! add_filter( 'mce_buttons', 'wordup_remove_buttons' );
  37. 37. Zmieniamy ikonę oraz wstawiamy do edytora tekst
  38. 38. ( http://melchoyce.github.io/dashicons/ )
  39. 39. ! add_action( 'admin_enqueue_scripts', ‘wordup_add_css' ); ! function wordup_add_css() { wp_enqueue_style( 'wordup-tinymce', plugins_url('/style.css', __FILE__) ); }
  40. 40. 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
  41. 41. (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'); } }); } ); })();
  42. 42. (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'); } }); } ); })();
  43. 43. (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'); } }); } ); })(); .mce-i-icon
  44. 44. Alternatywa dla editor.insertContent
  45. 45. var editorFormatterSetup = function(self) { ! ! ! ! ! ! ! ! ! ! };
  46. 46. var editorFormatterSetup = function(self) { editor.formatter.register('bigtext', { inline: 'strong', styles: {fontSize : '32px'} }); ! ! ! ! ! ! ! };
  47. 47. var editorFormatterSetup = function(self) { editor.formatter.register('bigtext', { inline: 'strong', styles: {fontSize : '32px'} }); ! ! ! ! ! ! ! };
  48. 48. var editorFormatterSetup = function(self) { editor.formatter.register('bigtext', { inline: 'strong', styles: {fontSize : '32px'} }); ! ! ! ! ! ! ! };
  49. 49. var editorFormatterSetup = function(self) { editor.formatter.register('bigtext', { inline: 'strong', styles: {fontSize : '32px'} }); editor.formatter.formatChanged( 'bigtext', function(state) { self.active(state); } ); };
  50. 50. var editorFormatterSetup = function(self) { editor.formatter.register('bigtext', { inline: 'strong', styles: {fontSize : '32px'} }); editor.formatter.formatChanged( 'bigtext', function(state) { self.active(state); } ); };
  51. 51. onclick: function() { editor.formatter.toggle('bigtext'); }, ! ! ! ! ! ! ! ! ! !
  52. 52. onclick: function() { editor.formatter.toggle('bigtext'); }, ! ! ! ! ! ! ! ! ! !
  53. 53. onclick: function() { editor.formatter.toggle('bigtext'); }, onpostrender: function() { var self = this; ! ! ! ! ! ! }
  54. 54. onclick: function() { editor.formatter.toggle('bigtext'); }, onpostrender: function() { var self = this; if(editor.formatter) { editorFormatterSetup(self); } else { editor.on('init', function() { editorFormatterSetup(self); }); } }
  55. 55. onclick: function() { editor.formatter.toggle('bigtext'); }, onpostrender: function() { var self = this; if(editor.formatter) { editorFormatterSetup(self); } else { editor.on('init', function() { editorFormatterSetup(self); }); } }
  56. 56. Dajemy użytkownikowi wybór
  57. 57. (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()); } // .. }] }); }); })();
  58. 58. (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()); } // .. }] }); }); })();
  59. 59. (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()); } // .. }] }); }); })();
  60. 60. Zaawansowana konfiguracja w popupie
  61. 61. (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>'); } }); } }); }); })();
  62. 62. (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>'); } }); } }); }); })();
  63. 63. editor.windowManager.open( { title: 'Wstaw nagłówek', ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! });
  64. 64. editor.windowManager.open( { title: 'Wstaw nagłówek', body: [{ type: 'textbox', name: 'title', label: 'Tytuł', }] ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! });
  65. 65. editor.windowManager.open( { title: 'Wstaw nagłówek', body: [{ type: 'textbox', name: 'title', label: 'Tytuł', }, { type: 'textbox', name: 'id', label: 'Nazwa kotwicy' }] ! ! ! ! ! ! ! ! ! ! ! ! ! ! });
  66. 66. 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'} ] }] ! ! ! ! });
  67. 67. 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 + '>'); } });
  68. 68. Wsparcie dla Wielojęzyczności
  69. 69. wp_localize_script
  70. 70. wp_localize_script
  71. 71. 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' );
  72. 72. 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' );
  73. 73. <?php ! if (!defined('ABSPATH')) exit; ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! lang.php
  74. 74. <?php ! if (!defined('ABSPATH')) exit; ! if (!class_exists( '_WP_Editors' )) require( ABSPATH . WPINC . '/class-wp-editor.php' ); ! ! ! ! ! ! ! ! ! ! ! ! ! ! lang.php
  75. 75. <?php ! if (!defined('ABSPATH')) exit; ! if (!class_exists( '_WP_Editors' )) require( ABSPATH . WPINC . '/class-wp-editor.php' ); ! function wordup_button_translation() { ! ! ! ! ! ! ! ! ! } ! ! lang.php
  76. 76. <?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') ); ! ! ! ! } ! lang.php
  77. 77. <?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; } ! lang.php
  78. 78. <?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(); lang.php
  79. 79. editor.getLang('OBIEKT.KLUCZ')
  80. 80. (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’) ); } }); } ); })();
  81. 81. (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’) ); } }); } ); })();
  82. 82. Dodatkowe przykłady Dodawanie przycisków w trybie fullscreen Kontrolka styleselect TinyMCE w sekcji komentarzy Wszystkie materiały: http://wp.dziudek.pl/kategorie/tinymce Ukryte przyciski w TinyMCE Zarządzanie stanami przycisków
  83. 83. Przykłady do Pobrania
  84. 84. Kontakt • @dziudek • dziudek@gmail.com • wp.dziudek.pl • zebymniezapomnial.tumblr.com
  85. 85. Pytania?

×