Посты с тэгом «textarea»

  • Content assist для элемента textarea

    Очередной эксперимент в поисках идеального средства для простого и быстрого написания кода.

    <textarea>, да и веб-технологии в целом привлекают меня своей простотой, доступностью и возможностью сделать так, как нужно мне. Есть Zen Coding, который позволяет быстро и удобно работать с большим объёмом XHTML-данных, но для пущего удобства не хватает автодополнения кода. Поиск в интернете не дал никаких вменяемых результатов, поэтому решил написать свой:

    content-assist

    Проверить автодополнение можно на тестовой странице. Попробуйте написать несколько английских слов, начинающихся на «a» (awesome, animal, amazing). Должно работать везде, включая IE6.

    Само по себе автодополнение, по большому счёту, практически бесполезно: непонятно, в какой момент какие данные нужно показывать. Поэтому решение представляет из себя несколько отдельных классов, каждый из которых можно переопределить, расширить и дополнить. За основу была взята архитектура автодополнения для Eclipse IDE, поэтому ряд классов и методов называются одинаково.

    • TextViewer — по сути, обёртка для <textarea>. Основное предназначение: дать удобный интерфейс для получения содержимого элемента. Один из основных методов — getCharacterCoords(char_ix), возвращает координаты для определённого символа. Метод возвращает объект со свойствами x и y в пикселях, отсчёт идёт от левого верхнего угла <textarea> до левого верхнего угла нужного символа. Метод getAbsoluteCharacterCoords(char_ix) возвращает то же самое, только относительно offsetParent. Как не трудно догадаться, этот класс можно переписать для работы с content-editable блоком, и у вас будет автодополнение для более серьёзного редактора.
    • ContentAssistProcessor — процессор, который высчитывает и предлагает список дополнений. По умолчанию ищет левую и правую границу английского слова (см. метод isAllowedChar), ищет префикс (от левой границы слова до каретки) и предлагет по этому префиксу список дополнений.
    • CompletionProposal — предложение для автодополнения. Главный метод — apply(), который применяет текущее предложение к TextViewer-объекту.
    • ContentAssist — основной класс. Связывает между собой TextViewer и ContentAssistProcessor, а также управляет всплывающим окном с подсказками.
    • tx_utils — набор всяких DOM-утилит.

    Для добавления поддержки автодополнения для <textarea> нужно инициализировать все эти классы:

    var viewer = new TextViewer(document.getElementById('my-textarea'));
    var processor = new ContentAssistProcessor(['word1', 'word2', 'word3']);
    var content_assist = new ContentAssist(viewer, processor);
    

    Для удобства есть класс BasicContentAssist, который делает всё то же самое для простых случаев (автодополнение по фиксированному словарю):

    new BasicContentAssist(document.getElementById('my-textarea'), ['word1', 'word2', 'word3']);
    

    У класса ContentAssistProcessor есть метод completitionProposalFactory, который должен возвращать объект класса CompletionProposal. Внешний вид попапа с предложениями был нагло позаимствован из редактора Espresso и полностью управляется через CSS. Окошко с предложениями можно вызвать принудительно по Ctrl+Space (не работает в Опере и немного тупит в Файерфоксе) либо по Alt+Space (хвала разработчикам Оперы: это тоже не работает, по крайней мере на Маке) и заменить текущее слово (зависит от позиции каретки).

    Как видите, все классы можно удобно перекрывать, расширять и наследовать для достижения необходимого функционала. Баги, предложения и улучшения принимаются в комментариях и на странице проекта.

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

    Метки: ,
  • 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');
    
    Метки: , , , ,