Представляю первую бета-версию плагина, который позволяет использовать мощь 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');