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

830 views
669 views

Published on

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

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

No Downloads
Views
Total views
830
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
4
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

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?

×