Про проблемы Полноэкранного режима Визуального редакторая написал, теперь про их решение. Хочется прежде всего отметить заслуги других авторов, которые также копали в данной теме:
- Adding TinyMCE Buttons to WordPress 3.2 Fullscreen mode
- WordPress 3.2+ : ajout d’un button à la FullScreen Toolbar
1-й автор пишет про созданный фильтр wp_fullscreen_buttons
для добавления кнопки на панель редактора в Полноэкранный режим. До того, как попал на его запись, я заметил аналогичную функцию в плагине SyntaxHighlighter TinyMCE Button. Она находится в следующем файле:
/wp-content/plugins/syntaxhighlighter-tinymce-button/sh-tinymce-button-box/sh-tinymce-button-box.php
Добавляется следующий фильтр:
add_filter('wp_fullscreen_buttons', 'shtb_adv_codebox_fullscreen');
Сама функция shtb_adv_codebox_fullscreen
выглядит следующим образом:
// For fullscreen mode function shtb_adv_codebox_fullscreen($buttons) { $buttons['shtb_adv_codebox'] = array( 'title' => __("SyntaxHighlighter TinyMCE Button CodeBox", "shtb_adv_lang"), 'onclick' => "tinyMCE.execCommand('shtb_adv_codebox_cmd');", 'both' => false); return $buttons; }
Как видно, в массив $buttons
добавляется новое значение (кнопка) shtb_adv_codebox
с заданными параметрами, которые также задаются в массиве. Более всего я обратил внимание конечно на JavaScript функцию, которая вызывается при нажатии:
tinyMCE.execCommand('shtb_adv_codebox_cmd');
Я сразу сделал попытку найти весь список функций execCommand
для TinyMCE, но мне это не удалось. Но продолжаю дальше, это пока не важно и к этому я еще вернусь.
Оригинальный массив $buttons
, который содержит все кнопки панели Визуального редактора в Полноэкранном режиме находится здесь:
/wp-includes/class-wp-editor.php
Вырезка из кода данного файла:
$buttons = array( // format: title, onclick, show in both editors 'bold' => array( 'title' => __('Bold (Ctrl + B)'), 'onclick' => 'fullscreen.b();', 'both' => false ), 'italic' => array( 'title' => __('Italic (Ctrl + I)'), 'onclick' => 'fullscreen.i();', 'both' => false ), '0' => 'separator', 'bullist' => array( 'title' => __('Unordered list (Alt + Shift + U)'), 'onclick' => 'fullscreen.ul();', 'both' => false ), 'numlist' => array( 'title' => __('Ordered list (Alt + Shift + O)'), 'onclick' => 'fullscreen.ol();', 'both' => false ), '1' => 'separator', 'blockquote' => array( 'title' => __('Blockquote (Alt + Shift + Q)'), 'onclick' => 'fullscreen.blockquote();', 'both' => false ), 'image' => array( 'title' => __('Insert/edit image (Alt + Shift + M)'), 'onclick' => "fullscreen.medialib();", 'both' => true ), '2' => 'separator', 'link' => array( 'title' => __('Insert/edit link (Alt + Shift + A)'), 'onclick' => 'fullscreen.link();', 'both' => true ), 'unlink' => array( 'title' => __('Unlink (Alt + Shift + S)'), 'onclick' => 'fullscreen.unlink();', 'both' => false ), '3' => 'separator', 'help' => array( 'title' => __('Help (Alt + Shift + H)'), 'onclick' => 'fullscreen.help();', 'both' => false ) ); $buttons = apply_filters( 'wp_fullscreen_buttons', $buttons );
Однако, видно, что здесь на событии onclick
вызывается не функции вызываются без execCommand
, а, к примеру, как fullscreen.ul()
. С помощью поиска, я обнаружил, как кнопки на самом деле работают. Я нашел следующий файл:
/wp-admin/js/wp-fullscreen.dev.js
Привожу часть кода:
/** * Buttons */ api.b = function() { if ( s.has_tinymce && 'tinymce' === s.mode ) tinyMCE.execCommand('Bold'); } api.i = function() { if ( s.has_tinymce && 'tinymce' === s.mode ) tinyMCE.execCommand('Italic'); } api.ul = function() { if ( s.has_tinymce && 'tinymce' === s.mode ) tinyMCE.execCommand('InsertUnorderedList'); } api.ol = function() { if ( s.has_tinymce && 'tinymce' === s.mode ) tinyMCE.execCommand('InsertOrderedList'); }
Отлично, теперь понятно, что и здесь все работает через тот же tinyMCE.execCommand
. Ссылки по теме:
- http://www.tinymce.com/wiki.php/Command_identifiers
- https://developer.mozilla.org/en/Midas
- http://msdn.microsoft.com/en-us/library/ms533049%28VS.85%29.aspx
Я так и не понял, на сайте TinyMCE предлагается брать коды execCommand
с сайта Mozilla и Microsoft? Плагин SyntaxHighlighter TinyMCE Button, как было выше показано, использует свою команду. В общем это для тех, кто будет копаться.
Добавим наконец-то свои кнопки на панель в Полноэкранном режиме. В закрытой части сайта открываем "Внешний вид", затем "Редактор". Открываем на редактирование файл functions.php
. Вставляем сверху:
function cay_adv_fullscreen_buttons($buttons) { return $buttons; } add_filter('wp_fullscreen_buttons', 'cay_adv_fullscreen_buttons');
Название функции cay_adv_fullscreen_buttons
может быть любым. Я сделал для уникальности со своим префиксом "cay". Однако, ни одну кнопку я не добавил, а в функции вернул массив с существующими.
К примеру, хочу добавить кнопку подчеркивания. Теперь код будет выглядеть так:
function cay_adv_fullscreen_buttons( $buttons ) { $buttons['underline'] = array( 'title' => __("Underline"), 'onclick' => "tinyMCE.execCommand('Underline');", 'both' => false ); return $buttons; } add_filter('wp_fullscreen_buttons', 'cay_adv_fullscreen_buttons');
После изменений, за кнопкой "Справка" на панели в Полноэкранном режиме появится кнопка "Подчеркивание". Если изменить имя элемента массива с underline
на underline2
($buttons['underline']
), то ничего не будет работать.
Но как же я узнал это имя и указал правильно "execCommand = tinyMCE.execCommand('Underline');
". Сначала конечно взял из головы. Имена используемых кнопок прописываются в следующем файле (уже упоминал его):
/wp-includes/class-wp-editor.php
Приведу вырезку:
if ( $set['teeny'] ) { $mce_buttons = apply_filters( 'teeny_mce_buttons', array('bold', 'italic', 'underline', 'blockquote', 'separator', 'strikethrough', 'bullist', 'numlist', 'justifyleft', 'justifycenter', 'justifyright', 'undo', 'redo', 'link', 'unlink', 'fullscreen'), $editor_id ); $mce_buttons_2 = $mce_buttons_3 = $mce_buttons_4 = array(); } else { $mce_buttons = apply_filters('mce_buttons', array('bold', 'italic', 'strikethrough', '|', 'bullist', 'numlist', 'blockquote', '|', 'justifyleft', 'justifycenter', 'justifyright', '|', 'link', 'unlink', 'wp_more', '|', 'spellchecker', 'fullscreen', 'wp_adv' ), $editor_id); $mce_buttons_2 = apply_filters('mce_buttons_2', array( 'formatselect', 'underline', 'justifyfull', 'forecolor', '|', 'pastetext', 'pasteword', 'removeformat', '|', 'charmap', '|', 'outdent', 'indent', '|', 'undo', 'redo', 'wp_help' ), $editor_id); $mce_buttons_3 = apply_filters('mce_buttons_3', array(), $editor_id); $mce_buttons_4 = apply_filters('mce_buttons_4', array(), $editor_id); }
Также я просматривал исходный код страницы редактирования записи. К примеру, HTML код кнопки "Выравнивание по центру" следующий:
<a role="button" id="content_justifycenter" href="javascript:;" class="mceButton mceButtonEnabled mce_justifycenter" onmousedown="return false;" onclick="return false;" aria-labelledby="content_justifycenter_voice" title="По центру (Alt + Shift + C)" tabindex="-1" aria-pressed="false"> <span class="mceIcon mce_justifycenter"></span> <span class="mceVoiceLabel mceIconOnly" style="display: none;" id="content_justifycenter_voice">По центру (Alt + Shift + C)</span> </a>
Видно, что значение id
равно content_justifycenter
. Так вот, по моему предположению, приставку content_
я откидывал и получал название команду justifycenter
для execCommand
в TinyMCE. Метод конечно не очень.
На радостях я добавил еще 2 кнопки к себе на панель – "Выравнивание по ширине" и "Перечеркнутый текст":
$buttons['justifyfull'] = array( 'title' => __("justifyfull"), 'onclick' => "tinyMCE.execCommand('justifyfull');", 'both' => false ); $buttons['strikethrough'] = array( 'title' => __("strikethrough"), 'onclick' => "tinyMCE.execCommand('strikethrough');", 'both' => false );
Кнопки появились и заработали. После этого я сделал скриншот панели с кнопками в Обычном режиме и в Полноэкранном. Совместил два изображения и те кнопки, что добавлял, зачеркивал. Так я хотел получить полноценную панель.
Добавление новых кнопок длилось несколько минут, пока я не дошел до кнопки, которая открывала окошко для выбора цвета выделенного текста. Это кнопка forecolor
и она не стала работать. Я стал вновь копаться. "Своим" методом я понял, что нужна дополнительная кнопка, та, что справа от главной и с перевернутым треугольником. Я решил, что ее имя forecolor_open
и добавил. Но кнопка выбора цвета текста все равно не заработала.
Те, кто хочет копаться далее, пусть ищут и думаю еще несколько часов или день и более, решение может быть найдено. Возможно нужно подключить дополнительный плагин. Для помощи оставляю еще одну страницу, где показана полная версия редактора TinyMCE со всевозможными кнопками и параметры настройки:
Хочу заметить, что панель с кнопками имеет ограниченную ширину, а так как строка одна, то место под желаемые кнопки нужно экономить. Для того же, чтобы добавить Дополнительную панель, придется править файл class-wp-editor.php
или файл с CSS стилями. В файле class-wp-editor.php
HTML Визуального редактора Полноэкранного режима находится в методе wp_fullscreen_html()
:
public static function wp_fullscreen_html() {
Также не стоит забывать про следующий файл wp-fullscreen.dev.js
, а точнее wp-fullscreen.js
. Файл со вставкой .dev.
для разработчиков, в последствии он сжимается, имена функций сокращаются. Поэтому рабочий файл wp-fullscreen.js
. Стоит обратить внимание на функцию init
конечно, которая вызывается при запуске Полноэкранного режима.
Пользуясь данной записью, тот кто захочет, добавит кнопки на панель Визуального редактора в Полноэкранном режиме, только те, что не имеют дополнительного поля для выбора.
Для тех же, кого это не устраивает и тем, кому нужен полноценный Визуальный редактор TinyMCE в Полноэкранном режиме, ответ ждет в следующих записях.