Архив за Декабрь 2009

  • Zen Coding для textarea

    Представляю первую бета-версию плагина, который позволяет использовать мощь Zen Coding у себя на сайте без всяких плясок с бубном: Zen Coding for <textarea>. Название говорит само за себя: ZC работает прямо в <textarea>. Для работы достаточно подключить всего один JS-файл к себе на сайт.

    Как это работает

    Плагин использует технику под названием event delegation: вешаются события по отлову нажатий клавиш на родительский документ; когда пользователь пытается вызвать какую-нибудь команду (например, Expand Abbreviation), плагин проверяет, какой элемент является источником. Если это <textarea> — отрабатываем команду, если нет — просто пропускаем событие. Таким образом, никакой дополнительной настройки для работы плагина не требуется: подключаем файл и радуемся жизни.

    Испытать плагин можно прямо на это странице в форме добавления комментария. Чтобы узнать допустимые сочетания клавиш достаточно кликнуть на иконке «Powered by Zen Coding» рядом с полем ввода.

    Плюшки

    Помимо основных возможностей Zen Coding плагин позволяет сделать написание кода в <textarea> гораздо более приятным занятием. Во-первых, можно задействовать клавишу Tab для разворачивания аббревиатур. Если аббревиатуру не получается развернуть, то добавляется символ табуляции (то есть просто делается отступ, как в обычных редакторах). Во-вторых, можно включить форматирование кода при добавлении переводов строк (нажатие на Enter). Новая строка будет добавлена вместе с отступом предыдущей строки, а если каретка находилась как раз между открывающим и закрывающим тэгом — будет добавлено дополнительное форматирование.

    По умолчанию эти опции отключены, их можно включить одним из доступных способов.

    Настройка

    У плагина есть ряд базовых настроек, которые можно в любой момент перекрыть. Все эти настройки записаны в переменной default_options файла manager.js:

    • profile — профиль форматирования результата разворачивания аббревиатур. По умолчанию применяется 'xhtml', доступны также 'plain', 'html', 'xml'.
    • syntax — синтаксис языка, с которым работаем в поле. По умолчанию это 'html', доступно также 'css', 'xml', 'xsl'. Можно создавать свой синтаксис (см. zen_settings.js).
    • use_tab – использовать клавишу Tab для разворачивания аббревиатур/добавления отступов.
    • pretty_break — включить форматирование переноса строк.

    Изменить настройки можно как глобально (применяются ко всем полям ввода), так и локально (применяются к конкретному полю).

    Для глобального изменения настроек нужно вызвать функцию zen_textarea.setup(), передав ей параметры, которые нужно изменить. Например, для того, чтобы глобально включить использование клавиши Tab и форматирование переносов строк, нужно вызвать такой код:

    	zen_textarea.setup({
    		use_tab: true,
    		pretty_break: true
    	});
    

    Для того, чтобы указать локальные настройки для конкретного поля достаточно указать ему класс вида zc-{название параметра}-{значение}. Например, для того, чтобы указать, что в данном поле нужно использовать синтаксис XSL, а также включить форматирование переносов строк, пишем вот такие классы:

    	<textarea class="zc-syntax-xsl zc-pretty_break-true"></textarea>
    

    Также можно переназначить сочетания клавиш на более привычные, для этого есть методы zen_textarea.shortcut(keystroke, action_name) и zen_textarea.unbindShortcut(keystroke). В качестве аргумента keystroke отдаем текстовое описание сочетания клавиш, например Shift+Alt+D, в качестве аргумента action_name — название действия, которое нужно выполнить.

    Для создания шорткатов можно использовать клавишу Meta: на Маке это будет означать Command, на PC — Ctrl. Полный список доступных действий и их шорткаты:

    addShortcut('Meta+E', 'Expand Abbreviation');
    addShortcut('Tab', 'Expand Abbreviation');
    addShortcut('Meta+D', 'Balance Tag Outward');
    addShortcut('Shift+Meta+D', 'Balance Tag inward');
    addShortcut('Shift+Meta+A', 'Wrap with Abbreviation');
    addShortcut('Ctrl+Alt+RIGHT', 'Next Edit Point');
    addShortcut('Ctrl+Alt+LEFT', 'Previous Edit Point');
    addShortcut('Meta+L', 'Select Line');
    addShortcut('Enter', 'Format Line Break');
    
    Метки: , , , ,