Прежде всего я хочу задать вам такой вопрос — когда вы копируете сниппеты кода с других сайтов, вам удобнее, когда они вставляются в редактор с проставленными табуляциями или с кучей пробелов?
Если вы не чувствуете разницы, тогда этот пост явно не для вас.
Возможно ещё многое зависит от того, какую подсветку кода вы используете. И тем не менее, когда я пишу код и нажимаю клавишу tab, мне удобнее, чтобы происходило то же самое, что происходит при нажатии tab в обычном редакторе, а не переход на следующее поле ввода и снятие фокуса с редактора.
Всего будет два шага по установке данной фишки в админку… которые вы можете пропустить и воспользоваться в конце поста готовым сниппетом для functions.php. Для чего же тогда нужны все эти шаги? Дело в том, что я считаю это более правильным способом.
Шаг 1. Начнём с jQuery
Для начала создадим какой-нибудь js-файл, к примеру я назову его admintab.js. В папке темы WordPress у меня есть вложенная папка для скриптов, она называется js — туда я и скопирую только что созданный файл.
Содержимое файла будет следующим:
jQuery(function($) { $('textarea#content, textarea#wp_mce_fullscreen').keydown(function(e){ // #content - ID HTMLредактора WordPress // #wp_mce_fullscreen - атрибут ID полноэкранного редактора if( e.keyCode != 9 ) return; // прерываем выполнение данного кода, если нажатая клавиша - не Tab e.preventDefault(); var textarea = $(this)[0], start = textarea.selectionStart, before = textarea.value.substring(0, start), after = textarea.value.substring(start, textarea.value.length); textarea.value = before + "t" + after; textarea.setSelectionRange(start+1,start+1); }); }); |
На этом мы заканчиваем с первым шагом и переходим ко второму.
Шаг 2. Подключение файла JavaScript
Подключать файл мы будем используя функцию wp_enqueue_script(). Код ниже нужно будет вставить в файл functions.php — в тот, который находится в папке с текущей темой.
function true_tab_to_indent_in_textarea() { wp_enqueue_script('tab-to-indent', get_stylesheet_directory_uri() . '/js/admin.tab.js', array('jquery'), null, true); } add_action('admin_print_scripts-post-new.php', 'true_tab_to_indent_in_textarea'); add_action('admin_print_scripts-post.php', 'true_tab_to_indent_in_textarea'); |
Обратите внимание на хуки admin_print_scripts-post-new.php и admin_print_scripts-post.php — это означает, что наш js-файл будет подключаться только на страницах создания и редактирования поста.
Всё готово. Если вы находитесь на странице создания/редактирования поста — обновляем ее и радуемся тому, что получилось.
Сниппет для functions.php
Как я уже упоминал выше, вы можете пропустить те шаги и просто вставить «как есть» этот код в файл functions.php вашей активной темы:
if( !function_exists('true_tab_to_indent_in_textarea') ){ function true_tab_to_indent_in_textarea() { $tabindent = '<script> jQuery(function($) { $("textarea#content, textarea#wp_mce_fullscreen").keydown(function(e){ if( e.keyCode != 9 ) return; e.preventDefault(); var textarea = $(this)[0], start = textarea.selectionStart, before = textarea.value.substring(0, start), after = textarea.value.substring(start, textarea.value.length); textarea.value = before + "t" + after; textarea.setSelectionRange(start+1,start+1); }); });</script>'; echo $tabindent; } add_action('admin_footer-post-new.php', 'true_tab_to_indent_in_textarea'); add_action('admin_footer-post.php', 'true_tab_to_indent_in_textarea'); } |
Источник: misha.blog
