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

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

34. Zmieniamy ikonę oraz
wstawiamy do edytora tekst

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

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

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

39. Dajemy użytkownikowi
wybór

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

42. Zaawansowana
konfiguracja w popupie

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

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

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

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

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

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

51. Wsparcie dla
Wielojęzyczności

52. wp_localize_script

53. wp_localize_script

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

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

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

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

58. <?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')
);
!
!
!
!
}
!

59. <?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;
}
!

60. <?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();

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

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

63. Dodatkowe przykłady
Dodawanie przycisków w trybie fullscreen
Kontrolka styleselect
TinyMCE w sekcji komentarzy
Wszystkie materiały:
!
http://wp.dziudek.pl/kategorie/tinymce

64. Przykłady do Pobrania

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

66. Pytania?