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

1. Tworzenie wtyczek dla
TinyMCE 4.*
Tomasz Dziuda
!
WordUp Kraków - Lato 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. Dlaczego wtyczki dla
TinyMCE są potrzebne?

9. • Pozwalają dodać brakujące funkcjonalności
edytora

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

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

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. Podstawowe filtry

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. teeny_mce_buttons

16. mce_external_languages

17. mce_external_plugins

18. mce_css
( http://codex.wordpress.org/Plugin_API/Filter_Reference/mce_css )

19. tiny_mce_before_init
( http://codex.wordpress.org/Plugin_API/Filter_Reference/tiny_mce_before_init )

20. Dodajemy przycisk do
edytora

21. add_action(
'admin_head',
‘wordup_add_button'
);
*.php

22. function wordup_add_button() {
!
!
!
!
!
!
!
!
!
!
!
!
!
!
}
*.php

23. function wordup_add_button() {
global $typenow;
!
!
!
!
!
!
!
!
!
!
!
!
}
*.php

24. function wordup_add_button() {
global $typenow;
if (
!current_user_can('edit_posts') &&
!current_user_can(‘edit_pages’)
)
return;
!
!
!
!
!
!
!
}
*.php

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. 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. function wordup_add_plugin($plgs) {
$plgs['wordup_button'] = plugins_url('/btn.js', __FILE__);
return $plgs;
}
!
!
!
!
*.php

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. (function() {
!
!
!
!
!
!
!
!
})();
*.js

30. (function() {
tinymce.PluginManager.add(‘wordup_button',
!
!
!
!
!
);
})();
*.js

31. (function() {
tinymce.PluginManager.add(‘wordup_button',
function(editor, url) {
!
!
!
}
);
})();
*.js

32. (function() {
tinymce.PluginManager.add(‘wordup_button',
function(editor, url) {
editor.addButton(‘wordup_button', {
title: ‘My Test Button',
icon: ‘wp-media-library‘
});
}
);
})();
*.js

33. icon: ‘wp-media-library’ => .mce-i-wp-media-library
( http://wp.dziudek.pl/dev/dodawanie-wlasnych-przyciskow-w-edytorze-tinymce-4 )

34. Usuwamy przycisk z
edytora

35. function wordup_remove_buttons($buttons) {
unset($buttons[0]);
return $buttons;
}
!
!
!
!

36. function wordup_remove_buttons($buttons) {
unset($buttons[0]);
return $buttons;
}
!
add_filter(
'mce_buttons',
'wordup_remove_buttons'
);

38. Zmieniamy ikonę oraz
wstawiamy do edytora tekst

39. ( http://melchoyce.github.io/dashicons/ )

40. !
add_action(
'admin_enqueue_scripts',
‘wordup_add_css'
);
!
function wordup_add_css() {
wp_enqueue_style(
'wordup-tinymce',
plugins_url('/style.css', __FILE__)
);
}

41. 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

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. (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');
}
});
}
);
})();

44. (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

46. Alternatywa dla
editor.insertContent

47. var editorFormatterSetup = function(self) {
!
!
!
!
!
!
!
!
!
!
};

48. var editorFormatterSetup = function(self) {
editor.formatter.register('bigtext', {
inline: 'strong',
styles: {fontSize : '32px'}
});
!
!
!
!
!
!
!
};

49. var editorFormatterSetup = function(self) {
editor.formatter.register('bigtext', {
inline: 'strong',
styles: {fontSize : '32px'}
});
!
!
!
!
!
!
!
};

50. var editorFormatterSetup = function(self) {
editor.formatter.register('bigtext', {
inline: 'strong',
styles: {fontSize : '32px'}
});
!
!
!
!
!
!
!
};

51. var editorFormatterSetup = function(self) {
editor.formatter.register('bigtext', {
inline: 'strong',
styles: {fontSize : '32px'}
});
editor.formatter.formatChanged(
'bigtext',
function(state) {
self.active(state);
}
);
};

52. var editorFormatterSetup = function(self) {
editor.formatter.register('bigtext', {
inline: 'strong',
styles: {fontSize : '32px'}
});
editor.formatter.formatChanged(
'bigtext',
function(state) {
self.active(state);
}
);
};

53. onclick: function() {
editor.formatter.toggle('bigtext');
},
!
!
!
!
!
!
!
!
!
!

54. onclick: function() {
editor.formatter.toggle('bigtext');
},
!
!
!
!
!
!
!
!
!
!

55. onclick: function() {
editor.formatter.toggle('bigtext');
},
onpostrender: function() {
var self = this;
!
!
!
!
!
!
}

56. onclick: function() {
editor.formatter.toggle('bigtext');
},
onpostrender: function() {
var self = this;
if(editor.formatter) {
editorFormatterSetup(self);
} else {
editor.on('init', function() {
editorFormatterSetup(self);
});
}
}

57. onclick: function() {
editor.formatter.toggle('bigtext');
},
onpostrender: function() {
var self = this;
if(editor.formatter) {
editorFormatterSetup(self);
} else {
editor.on('init', function() {
editorFormatterSetup(self);
});
}
}

58. Dajemy użytkownikowi
wybór

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. (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());
}
// ..
}]
});
});
})();

61. (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());
}
// ..
}]
});
});
})();

63. Zaawansowana
konfiguracja w popupie

64. (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>');
}
});
}
});
});
})();

65. (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>');
}
});
}
});
});
})();

67. editor.windowManager.open( {
title: 'Wstaw nagłówek',
!
!
!
!
!
!
!
!
!
!
!
!
!
!
!
!
!
!
!
!
!
!
});

68. editor.windowManager.open( {
title: 'Wstaw nagłówek',
body: [{
type: 'textbox',
name: 'title',
label: 'Tytuł',
}]
!
!
!
!
!
!
!
!
!
!
!
!
!
!
!
!
!
!
});

69. editor.windowManager.open( {
title: 'Wstaw nagłówek',
body: [{
type: 'textbox',
name: 'title',
label: 'Tytuł',
}, {
type: 'textbox',
name: 'id',
label: 'Nazwa kotwicy'
}]
!
!
!
!
!
!
!
!
!
!
!
!
!
!
});

70. 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'}
]
}]
!
!
!
!
});

71. 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 + '>');
}
});

73. Wsparcie dla
Wielojęzyczności

74. wp_localize_script

75. wp_localize_script

76. 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'
);

77. 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'
);

78. <?php
!
if (!defined('ABSPATH')) exit;
!
!
!
!
!
!
!
!
!
!
!
!
!
!
!
!
lang.php

79. <?php
!
if (!defined('ABSPATH')) exit;
!
if (!class_exists( '_WP_Editors' ))
require( ABSPATH . WPINC . '/class-wp-editor.php' );
!
!
!
!
!
!
!
!
!
!
!
!
!
!
lang.php

80. <?php
!
if (!defined('ABSPATH')) exit;
!
if (!class_exists( '_WP_Editors' ))
require( ABSPATH . WPINC . '/class-wp-editor.php' );
!
function wordup_button_translation() {
!
!
!
!
!
!
!
!
!
}
!
!
lang.php

81. <?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

82. <?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

83. <?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

84. editor.getLang('OBIEKT.KLUCZ')

85. (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’)
);
}
});
}
);
})();

86. (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’)
);
}
});
}
);
})();

87. 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

88. Przykłady do Pobrania

89. Kontakt
• @dziudek
• dziudek@gmail.com
• wp.dziudek.pl
• zebymniezapomnial.tumblr.com

90. Pytania?