Введение
Визуальный редактор TinyMCE позволяет наполнять сайт создавая записи и страницы. Помимо редактирования текста TinyMCE также позволяет добавлять таблицы, списки, изображение и т.п. К сожалению, стандартный TinyMCE все же сильно ограничен в возможностях форматирования данных. Решить эту проблему можно установив плагин TinyMCE Advanced, расширяющий функционал редактора. Однако иногда возникают ситуации когда необходимо специфическое форматирование, которого хотелось бы добиться с помощью одной кнопки на панели редактора, не форматируя текст вручную через HTML.
Создание списка форматов
Самым простым способом добавить свои стили форматирования в TinyMCE это создание списка форматов. Каждый элемент из списка будет зависеть от стилей, которые прописаны в специальном CSS-файле editor-style.css.
Создадим файл editor-style.css в корне темы и наполним его стилями, которые будут отображаться в окне редактора при форматировании.
|
1 2 3 4 5 6 7 8 9 10 11 |
/*Синяя рамка для текста*/ .blue-frame{ background: lightblue; color: white; border: 2px solid blue; border-radius: 5px; } /*Подчеркивание с тире*/ a.dashed-border{ border-bottom: 1px dashed black; } |
Не забудьте указать эти же стили и в файле style.css, иначе на сайте они не отобразятся.
Далее в файле 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 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 |
/***********************************/ /* CUSTOM TINYMCE FORMATS */ /***********************************/ // Включаем отображение списка форматов в панели инструментов TinyMCE add_filter( 'mce_buttons_2', function ( $format_buttons ) { array_unshift( $format_buttons, 'styleselect' ); return $format_buttons; }); // Настраиваем элементы списка форматов function tinymce_before_init_insert_formats( $init_array ) { // Определяем элементы списка $style_formats=array( // Для каждого элемента создается свой массив с параметрами array( 'title' => 'Blue Frame', // Имя формата 'block' => 'div', // HTML тег, в который будут обернуты данные (block/inline) 'classes' => 'blue-frame', // CSS-класс, стилизующий формат 'wrapper' => true, // Элемент будет оборачивать другие стили ), array( 'title' => 'Dash Underline', 'inline' => 'a', 'attributes' => [ 'href' => 'http://meliorem.ru', 'target' => '_blank', ], 'classes' => 'dashed-border', 'wrapper' => false, ), // Дополнительный стиль, который будет задан через атрибут style array( 'title' => 'Code', 'inline' => 'code', 'styles' => [ 'padding' => '2px 4px', 'background-color' => '#333', 'color' => '#eee', ], 'wrapper' => false, ), ); $init_array['style_formats'] = json_encode( $style_formats ); return $init_array; } add_filter( 'tiny_mce_before_init', 'my_mce_before_init_insert_formats' ); //Подключаем файл со стилями function tinymce_add_editor_styles() { add_editor_style( 'editor-style.css' ); } add_action( 'init', 'tinymce_add_editor_styles' ); |
Теперь зайдите в редактор TinyMCE и вы увидите кнопку выпадающего списка - "Форматы", в котором будут определенные ранее стили форматирования.
Если вы используете плагин TinyMCE Advanced, то по умолчанию в форматах будут отображаться его элементы. Чтобы вернуть свои форматы вам нужно отметить галочку в поле "Создание меню классов CSS" в настройках плагина.
Создание собственных кнопок в TinyMCE
Форматы позволяют только лишь применить определенные стили к тексту, но если вам понадобится обернуть текст сразу в несколько тегов и для каждого указать свои стили, то здесь вам помогут собственные кнопки на панели инструментов редактора TinyMCE.
Для начала создадим в корне темы файл /js/tinymce-buttons.js, в котором будем описывать необходимый функционал кнопок.
Для примера, в файле опишем функционал кнопок для добавления ссылки на github и обертку из тега <figure> для изображений.
|
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 |
(function() { // Кнопка для добавления ссылки на Github с именем githubLink tinymce.PluginManager.add( 'githubLink', function( editor, url ) { // Отображение копки в редакторе url = url.replace("/js","/"); // Выходим из папки js editor.addButton('githubLink', { title: 'Ссылка на Github', // Заголовок отображающийся при наведении мыши cmd: 'githubLink', // Имя команды, которая будет исполнятся при нажатии image: url + 'img/octocat.png', // Иконка кнопки }); // Описываем, что будет делать кнопка editor.addCommand('githubLink', function() { // Определяем формат выделенного текста var selected_text = editor.selection.getContent({ 'format': 'html' }); // Проверяем, что пользователь выделил текст для редактирования if (selected_text.length === 0) { alert('Выберите текст для редактирования!'); return; } // Определяем обертку для выделенного текста var openTag = '<a href="https://github.com/charmingprojects" class="external-link" target="_blank">'; var closeTag = '</a>'; var return_text = openTag + selected_text + closeTag; // Выполняем замену выделенного текста editor.execCommand('mceReplaceContent', false, return_text); return; }); }); tinymce.PluginManager.add( 'figureImage', function( editor, url ) { url = url.replace("/js","/"); editor.addButton('figureImage', { title: 'Контейнер <figure>', cmd: 'figureImage', image: url + 'img/figureimg.png', }); editor.addCommand('figureImage', function() { var selected_text = editor.selection.getContent({ 'format': 'html' }); // Здесь мы не проверяем выделенный текст т.к. добавляем пустую обёртку var openTag = '<figure>'; var closeTag = '<figcaption>Описание изображения</figcaption></figure>'; var return_text = openTag + selected_text + closeTag; editor.execCommand('mceReplaceContent', false, return_text); return; }); }); })(); |
Теперь оповестим TinyMCE о наличии дополнительных кнопок. Зарегистрируйте все кнопки в конце файла 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 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
/***********************************/ /* CUSTOM TINYMCE BUTTONS */ /***********************************/ // Регистрация файла стилей для редактора function add_editor_styles() { add_editor_style( 'editor-style.css' ); } // Указываем пути конфигурации кнопок function tinymce_add_buttons( $buttons_array ) { $buttons_config_path = get_template_directory_uri().'/js/tinymce-buttons.js'; $buttons_array['figureImage'] = $buttons_config_path; $buttons_array['githubLink'] = $buttons_config_path; return $buttons_array; } // Регистрируем добавленные кнопки function tinymce_register_buttons( $buttons ) { array_push( $buttons, 'figureImage' ); array_push( $buttons, 'githubLink' ); return $buttons; } function tinymce_buttons() { // Проверяем привилегии пользователя if (!current_user_can('edit_posts') && !current_user_can('edit_pages')) { return; } if (get_user_option('rich_editing') !== 'true') { return; } add_filter( 'mce_external_plugins', 'tinymce_add_buttons' ); add_filter( 'mce_buttons', 'tinymce_register_buttons' ); } // Инициализация кнопок редактора function theme_setup(){ // Регистрация файла стилей для редактора add_action( 'admin_init', 'add_editor_styles' ); // Добавление кнопок add_action( 'init', 'tinymce_buttons' ); } add_action( 'after_setup_theme', 'theme_setup' ); |
Теперь обновите страницу (Ctrl+F5) с редактором и вы увидите новые кнопки на панели инструментов.
