Your SlideShare is downloading. ×
0
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
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
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
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
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
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
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
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
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
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
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
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
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
Tworzenie wtyczek dla TinyMCE 4.* - WordUp Wrocław
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

477

Published on

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

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
477
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
3
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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

×