Добавление табуляции при нажатии в HTML редакторе WordPress

Прежде всего я хочу задать вам такой вопрос — когда вы копируете сниппеты кода с других сайтов, вам удобнее, когда они вставляются в редактор с проставленными табуляциями или с кучей пробелов?

Если вы не чувствуете разницы, тогда этот пост явно не для вас.

символ табуляции в редакторе WordPress

Возможно ещё многое зависит от того, какую подсветку кода вы используете. И тем не менее, когда я пишу код и нажимаю клавишу 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

Миша Рудрастых

Путешествует по миру и рассказывает всем о WordPress лично, у себя в блогах и на курсах в Санкт-Петербурге. Умеет просто объяснять сложные вещи, делает это красиво. Организовывает неплохие WordCamp's, но совсем не умеет слушать чужие доклады.

Добавить комментарий

%d такие блоггеры, как: