В записи про проблемы Визуального редактора я говорил, что нашел решение, которое позволило отобразить полнофункциональную панель с кнопками 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, WordPress 3.3.2, Визуальный редактор Wordpress, Визуальный редактор Wordpress 3.3.2, Графический редактор WordPress, Графический редактор WordPress 3.3.2, дополнения к Визуальному редактору WordPress, дополнения к Визуальному редактору WordPress 3.3.2, изменение class-wp-editor.php WordPress, изменение class-wp-editor.php WordPress 3.3.2, изменение файлов WordPress, Полноэкранный режим Визуального редактора WordPress
Запись опубликована
Четверг, Май 31, 2012 в
09:03 и находится в
WordPress, Программирование .
Вы можете следить за ответами к этой записи через
RSS 2.0 ленту.
Вы можете оставить комментарий, или обратиться к записи со своего сайта.