Тренировка работы с редактором TinyMCE – урок 32
Мне очень нравятся возможности CMS WordPress по работе с визуальным редактором TinyMCE, данные возможности были представлены для тех кто пользуется версией WP выше 3,9. Не обещаю дать вам полную информацию по API TinyMCE, но дам примеры кода который вы сможете использовать в своей работе.
Начнем наш длинный и интересный урок!
Добавляем поле выбора семейства шрифтов и размера шрифта
Для добавления элементов для работы со шрифтами и их размеров используйте код ниже.
|
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? чтобы они корректно отображались в админке. Например можно подключить шрифт Lato который я использую выше.
|
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' ); |
Если вы еще не пользовались данной функцией, то советую попробовать ее в действии, а результатом данной функции будет меню показанное на картинке ниже.
Добавить новые пункты в меню очень просто и первое что необходимо знать это надстройку которую мы будем использовать в коде который будет ниже $settings[‘style_formats_merge’] = true; эта надстройка поможет не создавать отдельное меню, но дополнить уже существующее меню форматы.
|
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) есть активный пункт который заключает выделенный текст в тег span с классом text-highlight.
Под номером (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: ‘New Button’ и icon: 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 Tweaks: Adding Styles, Buttons, Fonts, Drop-downs & Pop-Ups
/*
- Базовый курс по веб-дизайну;
- Верстка сайтов;
- Общий курс по CMS WordPress и продолжение курса по разработке шаблонов;
- Разработка сайтов на PHP.
