изменение functions.php WordPress

’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, Программирование    |    Постоянная ссылка

Добавляем список с CSS классами на панель Визуального редактора в WordPress 3.3.2

Июнь 3, 2012

Понадобился функционал в редакторе TinyMCE для добавления заданного класса к текущему параграфу. Нужной кнопки на панели Визуального редактора не оказалось, поэтому начал искать решение.

Задача состоит в том, чтобы после выделения параграфа был доступен список с классами, из которого я бы выбрал необходимый. Главное не переключаться в HTML режим. Например, текущий текст:

<p>Текст параграфа.</p>

после выбора класса "stars" становится следующим:

<p class="stars">Текст параграфа.</p>

Думаю, что идея и ранее была понятна.

Мне помогла следующая статья:

Для добавления списка с классами требуется открыть в Закрытой части блога "Внешний вид", затем "Редактор" и файл functions.php.

Решением задачи становится добавление следующего кода в файл:

function my_mce_before_init( $init ) {
	$init['theme_advanced_buttons2'] .= ',styleselect';
	$init['theme_advanced_styles'] = 'Stars=stars';
	return $init;
}
add_filter('tiny_mce_before_init', 'my_mce_before_init');

Можно добавить сразу несколько классов, разделив их с помощью ";". Это список в конце концов. Для меня это было не нужно.

Автор указанной выше статьи предлагал использовать следующую строчку вместо моей 2-й:

$init['theme_advanced_buttons2_add'] = 'styleselect';

Хотя метод и рабочий, но мой вариант мне более нравится.

Также есть еще одно решение в официальной документации по WordPress:

Код выглядит так:

// Add the Style selectbox to the second row of MCE buttons
function my_mce_buttons_2($buttons)
{
	array_unshift($buttons, 'styleselect');
	return $buttons;
}
add_filter('mce_buttons_2', 'my_mce_buttons_2');

function my_mce_before_init($init_array)
{
	// add classes using a ; separated values
	$init_array['theme_advanced_styles'] = "First Class=first-class;Other class=other-class";
	return $init_array;
}
add_filter('tiny_mce_before_init', 'my_mce_before_init');

Получается, что 2 раза вызывается функция add_filter(). Возможно это сделано для демонстрации возможностей. Я предпочту опять же свой вариант.

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

Добавление кнопок на панель Визуального редактора в Полноэкранном режиме в WordPress 3.3.2

Май 31, 2012

Про проблемы Полноэкранного режима Визуального редакторая написал, теперь про их решение. Хочется прежде всего отметить заслуги других авторов, которые также копали в данной теме:

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. Ссылки по теме:

Я так и не понял, на сайте 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 в Полноэкранном режиме, ответ ждет в следующих записях.

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