изменение class-wp-editor.php WordPress

’tag’

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

Май 31, 2012

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

Скажу сразу, что решение скорее в конце записи, а в начале история моих поисков.

Начал я как всегда с Интернета в на этот раз ничего не нашел вовсе. Более того, о том, как добавить альтернативные кнопки на панель Редактора в Полноэкранном режиме еще писали, но этот вопрос так никто и не ответил, да и не рассматривал.

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

Сначала я открыл следующий файл:

/wp-admin/js/wp-fullscreen.dev.js

И в конце функции init:

init: function() {

добавил следующий код:

$('#wp-fullscreen-central-toolbar').html($('#content_toolbargroup').clone());

Однако, после перехода в Полноэкранный режим вместо всех кнопок на панели появлялся лишь текст "Абзац".

Примечание: после внесения изменений я скопировал содержимое файла wp-fullscreen.dev.js в wp-fullscreen.js, так как только последний файл используется системой WordPress.

Как я ни пытался изменить код, ничего не выходило. Более того, я потратил на это несколько часов.

После неудачных попыток я перешел к файлу:

/wp-includes/class-wp-editor.php

Меня интересовало, почему для Обычного режима в Визуальном редакторе кнопки задаются так:

$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 );

А для Полноэкранной версии по-другому:

$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',

Далее я разбирался, зачем используется переменная dfw массива $set. Возьмем строчку с описанием:

'dfw' => false, // replace the default fullscreen with DFW (needs specific DOM elements and css)

В комментарии сказано, что переменная dwf позволяет заменить стандартный Полноэкранный режим с помощью DFW. Что же такое DFW я так и не понял.

Тогда я внес следующее изменение:

$set = wp_parse_args( $settings,  array(
	'wpautop' => true, // use wpautop?
	'media_buttons' => true, // show insert/upload button(s)
	'textarea_name' => $editor_id, // set the textarea name to something different, square brackets [] can be used here
	'textarea_rows' => get_option('default_post_edit_rows', 10), // rows="..."
	'tabindex' => '',
	'editor_css' => '', // intended for extra styles for both visual and HTML editors buttons, needs to include the <style> tags, can use "scoped".
	'editor_class' => '', // add extra class(es) to the editor textarea
	'teeny' => false, // output the minimal editor config used in Press This
	'dfw' => false, // replace the default fullscreen with DFW (needs specific DOM elements and css)
	'tinymce' => true, // load TinyMCE, can be used to pass settings directly to TinyMCE using an array()
	'quicktags' => true // load Quicktags, can be used to pass settings directly to Quicktags using an array()
) );
$set['dfw'] = true;

Это изменение мне ничего не дало и я его удалил.

После этого я разозлился и стал комментировать все, что было связано с переменной $set['dfw'] и $mce_buttons. Каждое изменение просматривал. Кнопка "Полноэкранный режим" то исчезала, то не работала. Но в один момент запустился редактор во всю ширину экрана с основной и дополнительной панелями и всеми кнопками, как в обычном режиме.

Включаем альтернативный Полноэкранный режим TinyMCE

А сделал я следующее. Закомментировал одну строчку. Меняем следующий код:

if ( $set['dfw'] ) {
	// replace the first 'fullscreen' with 'wp_fullscreen'
	if ( ($key = array_search('fullscreen', $mce_buttons)) !== false )
		$mce_buttons[$key] = 'wp_fullscreen';
	elseif ( ($key = array_search('fullscreen', $mce_buttons_2)) !== false )
		$mce_buttons_2[$key] = 'wp_fullscreen';
	elseif ( ($key = array_search('fullscreen', $mce_buttons_3)) !== false )
		$mce_buttons_3[$key] = 'wp_fullscreen';
	elseif ( ($key = array_search('fullscreen', $mce_buttons_4)) !== false )
		$mce_buttons_4[$key] = 'wp_fullscreen';
}

на этот:

if ( $set['dfw'] ) {
	// replace the first 'fullscreen' with 'wp_fullscreen'
	/* cay 1
	if ( ($key = array_search('fullscreen', $mce_buttons)) !== false )
		$mce_buttons[$key] = 'wp_fullscreen';
	elseif ( ($key = array_search('fullscreen', $mce_buttons_2)) !== false )
		$mce_buttons_2[$key] = 'wp_fullscreen';
	elseif ( ($key = array_search('fullscreen', $mce_buttons_3)) !== false )
		$mce_buttons_3[$key] = 'wp_fullscreen';
	elseif ( ($key = array_search('fullscreen', $mce_buttons_4)) !== false )
		$mce_buttons_4[$key] = 'wp_fullscreen';
	cay 1 # */
}

Теперь вместо Полноэкранного режима Визуального редактора WordPress версии отобразится видимо версия TinyMCE.

Я попробовал внести изменения в запись и после закрытия Полноэкранного режима изменения имели силу в Обычном редакторе.

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

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

/* cay 2:
 * Альтернативные стили для Визуального редактора
 * Полноэкранный режим (FullScreen) - неофициальная версия, TinyMCE
 */
function fullscreen_editor_styles() {
	global $user_level;
	// только для администратора
	if ($user_level > 9) {
		// ширина 855 (на сайте 820)
		// 840 + 15 пикселей прокрутка
		// 820 + 10 * 2 отступ по бокам
		echo '<style type="text/css">
#mce_fullscreen_toolbargroup, #mce_fullscreen_ifr {
	width: 855px !important;
	margin: 0 auto;
}
#mce_fullscreen_ifr {
	border-left: 1px solid #DFDFDF;
	border-right: 1px solid #DFDFDF;
}
</style>';
	}
}
add_action('admin_head', 'fullscreen_editor_styles');
/* cay 2 # */

Этот код всего лишь добавит вывод на экран в Закрытой части WordPress дополнительно заданных стилей. Данный Полноэкранный режим выводится не в отдельном IFrame, а в том же документе, поэтому здесь не подходит изменение стиля редактора editor-style.css.

Теперь панель Визуального редактора отображается со всеми кнопками по центру экрана. Если текста много, появляется прокрутка не у всего документа, а у области редактирования записи. Таким образом, панель с кнопками всегда на верху. Внизу всегда отображается "Путь". Очень удобно и я рад, что проделал столь долгий путь к этому, оно того стоило.

Замеченные проблемы

Однако, пока я печатал прошлую запись, используя браузер Google Chrome, страница с Визуальным редактором и 2-я, которая была просто открыта со страницей блога, вдруг "упали". Я скопировал строку браузера и открыл на редактирования ту же запись, не закрывая 1-е окно. Все было сохранено. После этого я перезагрузил основную страницу.

Несмотря на то, что текст страницы сохранился, было нарушено форматирование, а именно абзацы были (до разрыва текста кодом) в одну строчку. Пришлось восстанавливать. Не знаю, связано ли это с функцией WordPress wpautop() или работой Полноэкранного режима версии TinyMCE, а может и в Chrome дело, но подобная возможность грозит потерей всего содержимого в худшем случае.

Я не использую ревизий, но теперь включил, чтобы редактор хранил хотя бы одну для записи.

Кстати, что касается автосохранения, то оно отлично работает с заданным интервалом. Единственное, нет кнопки, по которой видно, что запись в настоящий момент сохраняется. Поэтому печатать бывает страшно.

Также два раза уже отметил, что если гулять в Chrome по соседним вкладкам, то высота окна редактирования увеличивается и вернуть ее к исходному размеру невозможно.

Примечание

Опять же изменение касается внутреннего файла WordPress, что означает, что после обновления системы до новой версии, вносить поправку в файл class-wp-editor.php придется заново.

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