После того, как я добавил Альтернативный Полноэкранный режим редактора TinyMCE и стал использовать его вместо Стандартного WordPress, единственное, чего мне не хватало, это отображение того, что Черновик текущей записи сохраняется и самой кнопки Сохранения.
Если не раскрывать окно редактора записи во весь экран, то при автосохранении Черновика срабатывает очень хорошая и наглядная функция: кнопки сохранения и публикации затемняются, в нижней части редактора отображается время последнего сохранения.
Что же касается Альтернативного Полноэкранного режима TinyMCE, то я проверял, что автосохранение при написании записи успешно запускается, но понять это визуально никак нельзя.
О чем запись
Я расскажу, как добавить кнопку сохранения к Альтернативному Полноэкранному режиму TinyMCE, сделаю, чтобы эта кнопка затемнялась при автосохранении и добавлю в нижней части индикатор со временем последнего сохранения Черновика. Сохранение также будет доступно при использовании сочетания горячих клавиш Ctrl+S без перезагрузки страницы.
Подключаем дополнительный плагин TinyMCE
К данной задаче меня подтолкнула другая необходимость, которая возникла ранее: хотел добавить на панель с кнопками редактора TinyMCE кнопку вставки в запись текущего времени. В поисках наткнулся на эту страницу:
С нее все и началось. Сверху я увидел ссылку на стандартные плагины TinyMCE и понял, что их довольно много и что к редактору WordPress подключена лишь часть:
Стал смотреть все по очереди и случайно увидел плагин "Save":
Скачать все плагины можно со следующей страницы:
После загрузки "Full Package" распаковываем архив и перемещаемся в следующую папку:
/tinymce/jscripts/tiny_mce/plugins
После этого копируем папку "save
" на хостинг в папку:
/wp-includes/js/tinymce/plugins
О том, как изменить настройки редактора TinyMCE, заданные по умолчанию я писал в записи про добавление списка с классами на панель Визуального редактора.
По аналогии, переходим в Закрытой части блога во "Внешний вид", затем выбираем "Редактор" и файл functions.php
. Вставляем следующий код:
function my_mce_before_init( $init ) {
$init['theme_advanced_buttons3'] .= ',save';
$init['plugins'] .= ',save';
return $init;
}
add_filter('tiny_mce_before_init', 'my_mce_before_init');
Графическая кнопка "Сохранение" появится в 3-й сверху строчке Визуального редактора. Для того, чтобы она была в 1-й достаточно поменять порядковый номер в "theme_advanced_buttons3
" на "theme_advanced_buttons1
", думаю это понятно.
Теперь, если открыть Визуальный редактор, то на панели будет видна кнопка Сохранения, которая также будет отображаться в Альтернативном Полноэкранном режиме.
После нажатия на кнопку запись обновляется и страница перезагружается.
В описании к плагину "save" по ссылке выше видно, что в плагине можно задавать дополнительные параметры. К примеру, можно сделать, чтобы кнопка Сохранения была неактивна до тех пор, пока в запись не будут внесены изменения. За это отвечает параметр "save_enablewhendirty
".
Для добавления в настройки TinyMCE нового параметра перед вызовом tinyMCE.init(), дополняем код, который добавили в functions.php
:
function my_mce_before_init( $init ) {
$init['theme_advanced_buttons3'] .= ',save';
$init['plugins'] .= ',save';
$init['save_enablewhendirty'] = true;
return $init;
}
add_filter('tiny_mce_before_init', 'my_mce_before_init');
В 4-й строке в массив был добавлен желаемый параметр и значение установлено в "true
". При первоначальном открытии записи на редактирование кнопка Сохранения будет неактивна.
Отключаем горячие клавиши в плагине save
В дополнительном плагине "save" для TinyMCE задаются горячие клавиши для сохранения записи "Ctrl+S
". К сожалению, они переопределяют горячие клавиши редактора, заданные в WordPress и вместо автосохранения без перезагрузки страницы, вызывается обновление записи с перезагрузкой.
Для решения этой проблемы идем в папку:
/wp-includes/js/tinymce/plugins/save
И открываем на редактирование файл "editor_plugin.js
". Находим следующий текст:
a.addShortcut("ctrl+s",a.getLang("save.save_desc"),"mceSave")
и заменяем его на:
/* cay 1 a.addShortcut("ctrl+s",a.getLang("save.save_desc"),"mceSave")*/
Таким образом, путем комментирования мы удаляем переопределение горячих клавиш. Страница теперь перезагружаться не будет.
Выводим сообщение о последнем сохранении
В нижней части Альтернативного Полноэкранного режима редактора TinyMCE есть "Путь". Я решил в этот путь справа добавить выводимое в обычном редакторе сообщение "Черновик сохраняется..." и "Черновик сохранён в ...".
Из папки:
/wp-includes/js
открываем файл autosave.js
. Находим следующий текст:
function autosave_loading(){
и заменяем его (дополняем) на:
function autosave_loading(){if(!jQuery('#save-message').length){jQuery('#mce_fullscreen_tbl .mceStatusbar').append('<div id="save-message"></div>');}
Как видно я просто добавил новый элемент div
с id
равным save-message
с помощью JQuery, если его ранее не существовало.
Теперь добавим запись в созданный элемент сообщения о результате сохранения Черновика. В том же файле находим следующий текст:
jQuery(".autosave-message").html(autosaveL10n.savingText)
и заменяем его на:
jQuery(".autosave-message, #save-message").html(autosaveL10n.savingText)
Видно, что я просто добавил новый элемент #save-message
к выборке JQuery.
Далее находим:
if(e){jQuery(".autosave-message").html(e)}else{if(autosaveOldMessage&&d){jQuery(".autosave-message").html(autosaveOldMessage)}
и заменяем на:
if(e){jQuery(".autosave-message, #save-message").html(e)}else{if(autosaveOldMessage&&d){jQuery(".autosave-message, #save-message").html(autosaveOldMessage)}
Сохраняем файл autosave.js
и загружаем его обратно на сервер. Теперь при автосохранении в Альтернативной версии Полноэкранного режима в самом низу появится желаемое – вывод сообщения "Сохранение черновика..." и "Черновик сохранен в ...".
Единственное, чего не хватает, так это выравнивания по правому краю и отступа. Идем в Закрытой части сайта во "Внешний вид", затем выбираем "Редактор" и файл functions.php
. Добавляем альтернативные стили CSS для администратора с помощью следующего кода:
function fullscreen_editor_styles() {
global $user_level;
// только для администратора
if ($user_level > 9) {
echo '<style type="text/css">
#save-message {
float: right;
margin-right: 8px;
}
</style>';
}
}
add_action('admin_head', 'fullscreen_editor_styles');
Сохраняем файл и смотрим редактор в Полноэкранном режиме. Теперь сообщение о статусе сохранения Черновика отображается как надо.
Затемнение кнопки сохранения
Осталась последняя нереализованная задача – для наглядности затемнять кнопку "Сохранение" на панели Визуального редактора при автосохранении и выводить из затемнения после завершения автосохранения.
Возвращаемся к редактированию файла autosave.js. Находим следующий текст:
function autosave_enable_buttons(){setTimeout(function(){jQuery(":button, :submit","#submitpost").removeAttr("disabled");jQuery(".ajax-loading").css("visibility","hidden")},500)}function autosave_disable_buttons(){jQuery(":button, :submit","#submitpost").prop("disabled",true);setTimeout(autosave_enable_buttons,5000)}
и заменяем его на следующий:
function autosave_enable_buttons(){setTimeout(function(){jQuery(":button, :submit","#submitpost").removeAttr("disabled");jQuery(".ajax-loading").css("visibility","hidden");jQuery("#content_save, #mce_fullscreen_save").removeClass("mceButtonDisabled").addClass("mceButtonEnabled");},500)}function autosave_disable_buttons(){jQuery("#content_save, #mce_fullscreen_save").removeClass("mceButtonEnabled").addClass("mceButtonDisabled");jQuery(":button, :submit","#submitpost").prop("disabled",true);setTimeout(autosave_enable_buttons,5000)}
Я сделал вставки кода, содержащие "#content_save, #mce_fullscreen_save
". С помощью JQuery для кнопки сохранения в Обычном режиме и для кнопки сохранения в Полноэкранном режиме в зависимости от ситуации либо добавляю класс mceButtonEnabled
и удаляю mceButtonDisabled
, либо наоборот. После сохранения файла все кнопка должна затемняться. Можно попробовать с помощью горячих клавиш "Ctrl+S
".
Для справки
Пока я копался в исходных кодах, не могу не отметить, что за переход в Полноэкранный режим редактора отвечает файл editor_plugin.js
в следующей папке:
/wp-includes/js/tinymce/plugins/wordpress
При нажатии на кнопку перехода в Полноэкранный срабатывает код после следующей строчки:
if ( 'mceFullScreen' == cmd ) {
Также не могу не отметить, что в папке:
/wp-includes/js/tinymce/plugins
есть две интересные подпапки:
которые отвечают видимо за Полноэкранный режим. Странно, что я пока еще не вносил в них ни одного изменения.
Думаю, это может пригодиться.
Примечание
Изменения, которые вносится в данной статье с новым обновлением WordPress (текущая версия 3.3.2) нужно будет проходить заново. Поэтому если после обновления что-то не работает, об этом нужно помнить в первую очередь.
Ошибки сохранения
В ходе написания данной записи я решил нажать на саму кнопку "Сохранить", чтобы вызовет перезагрузку страницы естественно. Все успешно сохранилось, но за исключением форматирования исходного кода, который я добавил в запись в тегах <pre></pre>
. Слетел переход на новую строчку.
Для того, чтобы форматирование сохранялось, следует в конечном счете переходить в обычный режим и там сохранять запись. Но ведь случайное нажатие на клавишу сохранения не исключен, поэтому я решил это исправить.
Возвращаюсь в папку:
/wp-includes/js/tinymce/plugins/save
и редактирую файл editor_plugin.js
. Находим следующий код:
if(a.onsubmit==null||a.onsubmit()!=false){a.submit()}c.nodeChanged()}
и заменяем его на:
if(a.onsubmit==null||a.onsubmit()!=false){/* cay 2 a.submit() */}c.nodeChanged()}
Теперь кнопка при нажатии не сработает и будет служить исключительно, как индикатор автосохранения.