Тренування роботи з редактором TinyMCE – урок 32
Мені дуже подобаються можливості CMS WordPress для роботи з візуальним редактором TinyMCE, дані можливості були представлені для тих, хто користується версією WP вище 3,9. Не обіцяю дати вам повну інформацію щодо TinyMCE API, але дам приклади коду, який ви зможете використовувати у своїй роботі.
Почнемо наш довгий та цікавий урок!
Додаємо поле вибору сімейства шрифтів та розміру шрифту
Для додавання елементів для роботи зі шрифтами та їх розмірів використовуйте код нижче.
|
1 2 3 4 5 6 7 8 9 |
// Enable font size & font family selects in the editor if ( ! function_exists( 'wpex_mce_buttons' ) ) { function wpex_mce_buttons( $buttons ) { array_unshift( $buttons, 'fontselect' ); // Add Font Select array_unshift( $buttons, 'fontsizeselect' ); // Add Font Size Select return $buttons; } } add_filter( 'mce_buttons_2', 'wpex_mce_buttons' ); |
Ось що в нас вийшло:
Ми можемо змінювати mce_buttons_2 на mce_buttons_3 або mce_buttons_1, це дасть можливість переміщати нові елементи між першою, другою та третьою панеллю.
Додавання розмірів користувача шрифту
За замовчуванням розміри шрифту не завжди підходять для оформлення тексту на сайті. Ще одна проблема шрифтів за замовчуванням, це те що вони налаштовуються у пунктах, а не пікселях, як ми до цього звикли. Я волію використовувати піксельні значення (10px, 12px, 13px, 14px..). Нижче я даю приклад функції, яка змінить розміри шрифту та одиниці вказані в WordPress за замовчуванням.
Додавання шрифтів користувача
За промовчанням у движку не можна використовувати свої імена шрифтів, хоча вони часто потрібні. Якщо ви створили свій шаблон і хочете настроїти вибір шрифту для користувача, то вам знадобиться наступна функція.
|
1 2 3 4 5 6 7 8 |
// Add custom Fonts to the Fonts list if ( ! function_exists( 'wpex_mce_google_fonts_array' ) ) { function wpex_mce_google_fonts_array( $initArray ) { $initArray['font_formats'] = 'Lato=Lato;Andale Mono=andale mono,times;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;Comic Sans MS=comic sans ms,sans-serif;Courier New=courier new,courier;Georgia=georgia,palatino;Helvetica=helvetica;Impact=impact,chicago;Symbol=symbol;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;Times New Roman=times new roman,times;Trebuchet MS=trebuchet ms,geneva;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings,zapf dingbats'; return $initArray; } } add_filter( 'tiny_mce_before_init', 'wpex_mce_google_fonts_array' ); |
Оскільки деякі шрифти можуть не опинитися на комп'ютері користувача, нам потрібно не лише надати вибір цих шрифтів, але і підключити їх до WordPress? щоб вони коректно відображалися в адмінці. Наприклад, можна підключити шрифт Лато який я використовую вище.
|
1 2 3 4 5 6 7 |
if ( ! function_exists( 'wpex_mce_google_fonts_styles' ) ) { function wpex_mce_google_fonts_styles() { $font_url = 'https://fonts.googleapis.com/css?family=Lato:300,400,700'; add_editor_style( str_replace( ',', '%2C', $font_url ) ); } } add_action( 'init', 'wpex_mce_google_fonts_styles' ); |
Якщо ви ще не користувалися цією функцією, то раджу спробувати її у дії, а результатом цієї функції буде меню, показане на малюнку нижче.
Додати нові пункти в меню дуже просто і перше що необхідно знати це надбудову, яку ми будемо використовувати в коді який буде нижче $налаштування[‘style_formats_merge’] = правда; ця надбудова допоможе не створювати окреме меню, але доповнити вже існуюче меню формати.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
// Add new styles to the TinyMCE "formats" menu dropdown if ( ! function_exists( 'wpex_styles_dropdown' ) ) { function wpex_styles_dropdown( $settings ) { // Create array of new styles $new_styles = array( array( 'title' => __( 'Custom Styles', 'wpex' ), 'items' => array( array( 'title' => __('Theme Button','wpex'), 'selector' => 'a', 'classes' => 'theme-button' ), array( 'title' => __('Highlight','wpex'), 'inline' => 'span', 'classes' => 'text-highlight', ), ), ), ); // Merge old & new styles $settings['style_formats_merge'] = true; // Add new styles $settings['style_formats'] = json_encode( $new_styles ); // Return New Settings return $settings; } } add_filter( 'tiny_mce_before_init', 'wpex_styles_dropdown' ); |
Під номером (2) є активний пункт, який укладає виділений текст у тег проліт з класом виділення тексту.
Під номером (1) неактивний пункт, тому що цей пункт буде працювати тільки в тому випадку, якщо текст укладено в тег <a> і виділено. Я показав це на малюнку нижче. Уважно досліджуйте код, щоб розібратися чому так відбувається, тут я даю ви самі розберетеся, а ми підемо далі.
Створення кнопки у редакторі TinyMCE
Створення кнопок особливо для нас корисне, так як створюючи тему для wordpress ми часто створюємо шорткоди, а користувачеві необов'язково знати всі шорткоди напам'ять. Створюючи кнопку користувачеві, достатньо буде на неї натиснути, щоб додати шорткод або певний текст.. Створення кнопки буде поділено на дві частини.
- Код для оголошення нового плагіна у functions.php.
- Скрипт JS для додавання кнопки до редактора;
Перший скрипт буде тісно пов'язаний із файлом JS. Отже давайте я представлю вам 2 коду:
Додаємо скрипт у файл functions.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
// Hooks your functions into the correct filters function my_add_mce_button() { // check user permissions if ( !current_user_can( 'edit_posts' ) && !current_user_can( 'edit_pages' ) ) { return; } // check if WYSIWYG is enabled if ( 'true' == get_user_option( 'rich_editing' ) ) { add_filter( 'mce_external_plugins', 'my_add_tinymce_plugin' ); add_filter( 'mce_buttons', 'my_register_mce_button' ); } } add_action('admin_head', 'my_add_mce_button'); // Declare script for new button function my_add_tinymce_plugin( $plugin_array ) { $plugin_array['my_mce_button'] = get_template_directory_uri() .'/js/mce-button.js'; return $plugin_array; } // Register new button in the editor function my_register_mce_button( $buttons ) { array_push( $buttons, 'my_mce_button' ); return $buttons; } |
Додаємо javascript за адресою /wp-content/themes/intrepidity/js/mce-button.js
|
1 2 3 4 5 6 7 8 9 10 11 |
(function() { tinymce.PluginManager.add('my_mce_button', function( editor, url ) { editor.addButton('my_mce_button', { text: 'New Button', icon: false, onclick: function() { editor.insertContent('wp-admin.com.ua - уроки wordpress!'); } }); }); })(); |
Кнопка створена та вставляє текст.
Єдиний мінус такої кнопочки в тому, що вона займає багато місця в редакторі., тому я пропоную зробити кнопочку з іконкою.
Для налаштування іконок можна використовувати нові підключені стилі, для панелі адміністратора, додайте їх у файл functions.php:
|
1 2 3 4 |
function my_shortcodes_mce_css() { wp_enqueue_style('symple_shortcodes-tc', get_bloginfo('template_url').'/css/my-mce-style.css' ); } add_action( 'admin_enqueue_scripts', 'my_shortcodes_mce_css' ); |
Якщо стилі треба вантажити з плагіна, можна використовувати наступний код:
|
1 2 3 4 |
function my_shortcodes_mce_css() { wp_enqueue_style('symple_shortcodes-tc', plugins_url('/css/my-mce-style.css', __FILE__) ); } add_action( 'admin_enqueue_scripts', 'my_shortcodes_mce_css' ); |
Створіть папку images у папці теми, якщо її там ще немає. До створеної папки додайте іконку з назвою check.png.
Далі додаємо стиль для майбутньої іконки у файл css/my-mce-style.css.
|
1 2 3 |
i.mce-i-my-mce-icon { background-image: url('../images/check.png'); } |
Переробте раніше створений скрипт у папці js/mce-button.js, коментуйте напис для кнопки text: «Нова кнопка» і значок: false.
Додати новий параметр icon: «mce-i-my-mce-icon», який додасть до нової кнопки створений раніше клас у файлі стилів панелі адміністратора.
Якщо все зроблено правильно, то у вас з'явиться кнопка з іконкою, яка при натисканні буде додавати напис.
Ми з вами створили кнопку з іконкою, але при необхідності створити складний функціонал шаблону та безліч кнопок цей спосіб буде скрутним. До того ж незручно працювати коли багато кнопок на панелі. Зараз ми з вами постараємося розібратися у питанні “як додати більше вільного місця на панелі редактора?». Змініть код кнопки у файлі js/mce-button.js на який бачите нижче.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
(function() { tinymce.PluginManager.add('my_mce_button', function( editor, url ) { editor.addButton('my_mce_button', { /*text: 'New Button', icon: false,*/ icon: 'my-mce-icon', type: 'menubutton', menu: [ { text: 'Item 1', menu: [ { text: 'Sub Item 1', onclick: function() { editor.insertContent('wp-admin.com.ua - уроки wordpress!'); } }, { text: 'Sub Item 2', onclick: function() { editor.insertContent('wp-admin.com.ua - уроки wordpress!'); } } ] }, { text: 'Item 2', menu: [ { text: 'Sub Item 1', onclick: function() { editor.insertContent('wp-admin.com.ua - уроки wordpress!!'); } }, { text: 'Sub Item 2', onclick: function() { editor.insertContent('wp-admin.com.ua - уроки wordpress!'); } } ] } ] }); }); })(); |
Якщо ви уважно придивіться до структури коду, то зрозумієте що в ньому немає нічого складного і переробити його не складе великої праці. Ось результат, який ми отримаємо:
Якщо ви до цього зробили все правильно, то побачите, що при виборі одного з підпунктів меню в полі для тексту з'явиться напис “wp-admin.com.ua – уроки wordpress!».
Найчастіше вставка тексту без зміни не дуже корисна, оскільки при вставці шорткоду необхідно вказувати додаткові опції, які керуватимуть роботою шорткоду. Для вказівки опцій у шорткоді можна використовувати спливаюче вікно, давайте розберемося разом як його створити.
Спливне вікно tinymce WordPress
Для створення спливаючого вікна необхідно змінити код у файлі js/mce-button.js на вказаний нижче. Впевнений, якщо до цього ви читали уважно і все у вас виходило, то проблем розібратися в коді нижче у вас не виникне.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 |
(function() { tinymce.PluginManager.add('my_mce_button', function( editor, url ) { editor.addButton('my_mce_button', { /*text: 'New Button', icon: false,*/ icon: 'my-mce-icon', type: 'menubutton', menu: [ { text: 'Item 1', menu: [ { text: 'Sub Item 1', onclick: function() { editor.insertContent('wp-admin.com.ua - уроки wordpress!'); } }, { text: 'Sub Item 2', onclick: function() { editor.insertContent('wp-admin.com.ua - уроки wordpress!'); } } ] }, { text: 'Item 2', menu: [ { text: 'Sub Item 1', onclick: function() { editor.insertContent('wp-admin.com.ua - уроки wordpress!!'); } }, { text: 'Pop-Up', onclick: function() { editor.windowManager.open( { title: 'Вставить произвольный шорткод', body: [ { type: 'textbox', name: 'textboxName', label: 'Text Box', value: '30' }, { type: 'textbox', name: 'multilineName', label: 'Multiline Text Box', value: 'You can say a lot of stuff in here', multiline: true, minWidth: 300, minHeight: 100 }, { type: 'listbox', name: 'listboxName', label: 'List Box', 'values': [ {text: 'Option 1', value: '1'}, {text: 'Option 2', value: '2'}, {text: 'Option 3', value: '3'} ] } ], onsubmit: function( e ) { editor.insertContent( '[random_shortcode textbox="' + e.data.textboxName + '" multiline="' + e.data.multilineName + '" listbox="' + e.data.listboxName + '"]'); } }); } } ] } ] }); }); })(); |
Ось що вийшло в результаті виконаної роботи зі спливаючою вікном.
Висновки уроку
Що далі? Далі все у ваших руках, ви можете самі придумати яким чином будете використовувати шорткод і панель інструментів редактора tinymce. Урок вийшов непростий і трохи плутаний, але ми і не на першому уроці., час вчитися розбиратися в коді, якщо не вийде, але захочете розібратися як вбудовувати код у вашу тему можу виділити час і провести платне заняття.
Джерело ідей та натхнення до уроку:
WordPress 3.9+ TinyMCE 4 Твіки: Додавання стилів, кнопки, Шрифти, Випадаючі списки & Спливаючі вікна
/*
- Базовий курс з веб-дизайну;
- Верстка сайтів;
- Загальний курс CMS WordPress та продовження курсу з розробки шаблонів;
- Розробка сайтів на PHP.
