плагины TinyMCE

’tag’

Автосохранение без перезагрузки в Альтернативном Полноэкранном режиме редактора TinyMCE в WordPress 3.3.2

Июнь 4, 2012

После того, как я добавил Альтернативный Полноэкранный режим редактора 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

есть две интересные подпапки:

  • fullscreen
  • wpfullscreen

которые отвечают видимо за Полноэкранный режим. Странно, что я пока еще не вносил в них ни одного изменения.

Думаю, это может пригодиться.

Примечание

Изменения, которые вносится в данной статье с новым обновлением 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()}

Теперь кнопка при нажатии не сработает и будет служить исключительно, как индикатор автосохранения.

Tags: , , , , , , , , , ,
Записано в WordPress, Программирование    |    Постоянная ссылка