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

680 views
603 views

Published on

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

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
680
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
7
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

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?

×