• декабря 21, 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');
    Метки: , , , ,

    • 47 комментариев

    1. Марк
      21 декабря 2009

      Крутота.

      Если перед нажатием ⌘E конструкцию выделить, замена происходит не совсем корректно (Safari 4.0.4, очень символичная версия).

    2. Санчосранчо
      21 декабря 2009

      Все хорошо, но:
      – не работает Undo;
      – иконка «Powered by Zen Coding» выглядит, как ссылка на другой сайт и кликать на неё очень не хочется (тем более, чтобы посмотреть шорткаты).

    3. mihdan
      21 декабря 2009

      Сергей, огромное вам спасибо. Весьма и весьма полезная штуковина.

    4. Mike TUMS
      21 декабря 2009

      Это ж просто замечательно 🙂

    5. Сергей
      21 декабря 2009

      FF3.5.6 — Undo работает
      Если перед нажатием ⌘E конструкцию выделить, замена происходит не совсем корректно — тоже самое, но зачем выделять?

      Сергей это здорово! 🙂

    6. denisx
      21 декабря 2009

      а на этом сайте рабочий пример есть?

    7. omfg
      21 декабря 2009

      Сергей, это тот же пример который был в smashingmagazine? Благодарю за сорсы (:

    8. Сергей Чикуенок
      21 декабря 2009

      Для Smashing Magazine использовался плагин к editArea (такой онлайн редактор кода), здесь же — абсолютно новый плагин

    9. Дмитрий
      22 декабря 2009

      Сергей, будет ли реализация в виде плагина к notepad++?

    10. Сергей Чикуенок
      22 декабря 2009

      Дмитрий, http://chikuyonok.ru/2009/11/zen-coding-v05/

    11. Nayjest
      22 декабря 2009

      Круто, хотя не знаю, есть ли в этом смысл 🙂
      А в связке с какими-либо популярными WYSIWYG редакторами оно работать будет?

    12. Сергей Чикуенок
      22 декабря 2009

      Для редактора нужно отдельный плагин писать

    13. kele5240
      23 декабря 2009

      First of all, sorry I can not read Russian ~
      Zen coding is a perfect editor, but the Macbook under the «crtl +,» is not very smoothly, a key combination. So would like to ask, how do we put the default «ctrl +,» replaced by «tab» button

    14. Сергей Чикуенок
      23 декабря 2009

      Expanding abbreviations by Tab isn’t a trivial task. Many editors use it for indentation and jumping between placeholders, so it requires a low-level support of Zen Coding (i.e. developers should create editors that support ZC natively, not as plugin). But you can change a key combination for your preferred one. For example, I’m using F1 for abbreviation expanding.

    15. Эд
      24 декабря 2009

      Я тут начал кодировать и сразу два раза ошибся 🙂
      В общем я тут напишу, вдруг кому будет интересно:
      1. Не работает shift+tab
      2. Не работает ctrl+z (хотя не знаю, ожидаемо ли это)
      3. Когда я пишу <code и нажимаю Tab, я получаю <, но хотелось бы, чтобы учитывался тот факт, то я уже поставил открывающую скобку.

      Ну это так, я ж не zen-coder, так что могу иметь собственные привычки, которые не стыкуются с zen-coding’ом )

      Спасибо за внимание )

    16. Constantine
      29 декабря 2009

      Hello, Sergey!
      I realy liked Zen Coding, but nevertheless i’d like to point that there are few design bugs in ZC HTML:

      1)
      $ will not work without — before it, so div#item$ will not expand, but div#item-$ will.

      2)
      $ does not support multidigit numbers, meaning that li#item-$$$, will give you 111, 222, 333, instead of 001, 002, 003 and so on.

      3)
      There is no easy way to handle attributes, like for example colspan or maxlength, how about just reusing css [attr=value] syntax ? meaning that constructs like td[colspan] or input[type=text][maxlength=15] will be quite easy to write

      4)
      + is limited to Previous Siblings only, meaning that you can write div > h3 + ul > li*5 > a, but not div > ul + h3 > li*5 > a, (because li will be treated a child of h3). i suggest adding support for parentheses so we will be write things like
      div > (ol > li*5 > img ) + (ul > li*5 > a)
      or
      table > (thead > tr > td + td[colspan=2] + td*7) + (tbody>tr*20>td*10)

      5)
      E+ is just plain idiocy, imho. because it uses same operator(sibling) for very different purpose (default child), i think it is either not needed at all, or should be replaced by «(E>)».

      PS:
      no comments on ZC CSS, coz it kinda feels redundant for me. i have never wrote ASM programs, and so i dont want to turn CSS coding into ASM 😉

      Regards,
      Constantine.

    17. Сергей Чикуенок
      30 декабря 2009

      Constantine,

      1. In which editor you have such error? If you try div#item$ in this comment field, it will work
      2. Maybe add this in the next version
      3. I’ll think about it
      4. I don’t want to create a new expression language for describing whole web-page with a single string. The philosophy of Zen Coding is to quickly write small code snippets with a simple and well-known syntax. In your example, you have to think about HTML result first, than think about it’s complex representation in ZC, write it, expand it, search for operator or grouping typos in the result, undo and do all this stuff again. You’ll do your job much faster if you write 3—4 small and simple expressions rather than complex one.
      5. E+ is an “expando” property, which is an alias to other expression and must be at the end of expression. It quite useful for me, I use it very often in XSL coding.
    18. Constantine
      30 декабря 2009

      Sergey,

      2, 3. Great, will be looking towards it.

      1. In http://zen-coding.ru/demo/, but it seems to either be fixed now, or it was caused by too complex expression.

      5. Yeah, «expando» is ok, its just the «+» sybol that worries me. maybe use some other char for this ? Like E; (E/ and E_ are also ok, but slash can cause troubles with escaping and underscore can appear in xml tag names).

      4. I understand and respect your position, but why artificialy limit the power of such a beautyfull paradigm ? ZC is already language agnostic (as it allows non-standart tags) and ability to create ANY tree will widen the range of possible applications for it even further.
      For examle dynamic page generation in JS/PHP without the need to use complex loops. Just imagine:
      div.innerHTML = zenCode(«ul>li*5>a»);

      ps: also, as you can see many people argee, that grouping is necessary (see http://www.smashingmagazine.com/2009/11/21/zen-coding-a-new-way-to-write-html-code/#comments , comments #168, #6, #9, #10, #13) just most of people suggest either square brackets or very ugly and potentialy disruptive < parent selector. Classic parentheses «(» and «)» will be much more readable, and comprehandable.

    19. Василий
      8 января 2010

      А для editarea можно обновить?

    20. shin
      9 января 2010

      I have Aptana and I followed this instruction http://code.google.com/p/zen-coding/wiki/AptanaHowToEn. But it does not work.
      I created a project called zencoding and under there folder called script and unzipped zencoding there. I am using Windows vista. I clicked ctrl+E or ctrl+, but nothing happens. Can you tell me what I am doing wrong? Thanks in advance.

    21. Сергей Чикуенок
      9 января 2010

      shin, do you see Zen Coding in Scripts main menu item? You can see all available commands and their shortcuts there.

    22. shin
      9 января 2010

      No, I don’t see any new menu in the main menu.

    23. Сергей Чикуенок
      9 января 2010

      Try Alt+E command to expand abbreviation

    24. shin
      9 января 2010

      I tried it Alt+E already. It does not work.

    25. Сергей Чикуенок
      9 января 2010

      shin, please see comments on http://code.google.com/p/zen-coding/wiki/AptanaHowToEn
      There’s a screencast showing how to install ZC step-by-step

    26. Constantine
      11 января 2010

      ZC 0.6 is sweet, — will try to extencively test [attr] tomorrow.

    27. Роман
      11 января 2010

      Здорово, может редактор кода в виде веб приложения сделать?

    28. Constantine
      16 января 2010

      div>a:::::::::::::b>bug

      will expand to

      i am not sure if this should be considered a bug, or a correct functionality, so just pointing your attention to it.

    29. Constantine
      16 января 2010

      edit:

      will expand to

    30. Constantine
      16 января 2010

      i am sorry, can’t paste tags — but you can look yourself what it will expand into.

      ps: and please delete my extra comments.

    31. Yvelious
      22 апреля 2010

      А можно подключить этот скрипт как то к самому браузеру, что бы на любом сайте где есть форма, можно было использовать zen-coding? Если да, то как?

    32. mihdan
      22 апреля 2010

      В Opera есть userscripts

    33. Yvelious
      22 апреля 2010

      Cпасиб, в браузере Opera подключил, а как это сделать в браузее firefox

    34. mihdan
      23 апреля 2010

      http://twelve.habrahabr.ru/blog/74645/

    35. mihdan
      23 апреля 2010

      Yvelious, все подробности здесь — http://userscripts.ru/

    36. interpaul
      26 ноября 2010

      Собрал плагин для Joomla — http://dl.dropbox.com/u/9354329/zencoding-joomla.zip Может кому понадобится.
      А еще хотелось бы иметь возможность развернуть склеенный в одну строку код в «лесенку» — форматировать код, например, по сочетанию Ctrl+Alt+F.

    37. Дмитрий aka ZHart
      15 января 2011

      Сергей, спасибо огромное за ваш труд.
      interpaul, спасибо и вам за плагин для Joomla. Кстати говоря, было бы здорово прикрутить его к какому-нибудь редактору с подсветкой кода, например к «CodeMirror».

      Появилась проблема при использовании Zen Coding для textarea в Firefox.
      Заключается проблема в том, что если в текстовой области много текста и имеется вертикальный скролл, то по нажатию на Enter в любом месте кода (для перевода строки) скролл автоматом устанавливается в самое верхнее положение.
      В других браузерах (проверял в Opera и Midori) такой проблемы нет.
      Можно ли ее устранить в Firefox?
      Заранее благодарю за ответ.

    38. Сергей Чикуенок
      16 января 2011

      Дмитрий, плагин для CodeMirror уже есть: https://github.com/sergeche/zen-coding/downloads

      По поводу бага в FF — посмотрю на досуге

    39. Дмитрий aka ZHart
      17 января 2011

      Сергей, спасибо.
      Кстати говоря, в CodeMirror такой проблемы с Firefox нет.
      Проверял вот здесь: http://zen-coding.ru/codemirror/
      А проблема в Firefox наблюдается даже в форме комментирования на этой странице.

      Жаль, у меня нет соответствующего опыта (не программист я), и подключить готовое решение к плагину для Joomla не получилось.
      (Имеется ввиду вот этот плагин: http://extensions.joomla.org/extensions/edition/editors/8723 )
      Вроде все делал по инструкции, но в итоге по нажатию на хоткеи ничего не происходит.
      Если вдруг у кого-то из понимающих людей найдется немного времени разобраться с этим — буду очень благодарен.

    40. Станислав
      10 апреля 2011

      Здравствуйте!
      Как сделать в «Zen Coding для textarea» чтобы вместо

      выдавался

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

      Переписывание шаблонов-аббревиатур не помогло.

    41. Станислав
      10 апреля 2011

      Вопрос отпал. Весь код перерыл и нашел. Оказывается есть опция:
      ‘attr_quotes’: ‘single’
      В документации вроде нету.
      В общем в NetCat теперь все отлично работает!

    42. Андрей
      28 декабря 2012

      Доброго времени суток!
      А скрипт в опере не поддерживается?

    43. Сергей Чикуенок
      28 декабря 2012

      Поддерживается. Сам проект уже переименован: https://github.com/emmetio/emmet/downloads

    44. Андрей
      28 декабря 2012

      Скачал новую версию, но там таже проблема в опере. Не работает кобминация ‘ctrl + e’ или же ‘Tab’
      Использовал Emmet for v1.0

    45. Андрей
      28 декабря 2012

      Emmet для текстареа

    46. Дмитрий aka ZHart
      28 декабря 2012

      Для фаерфоксовского Greasemonkey есть скрипт, позволяющий навешивать Zen Coding на любое текстовое поле на любом сайте:
      http://userscripts.org/scripts/show/78510

    47. Сергей Чикуенок
      28 декабря 2012

      Похоже, Опера в очередной раз у себя что-то сломала. Завёл тикет: https://github.com/emmetio/emmet/issues/140