Про проблемы Полноэкранного режима Визуального редакторая написал, теперь про их решение. Хочется прежде всего отметить заслуги других авторов, которые также копали в данной теме:
- 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 в Полноэкранном режиме, ответ ждет в следующих записях.