12 текстовых редакторов HTML5


Содержание

HTML редактор

Одним из принципов HTML5 является официальное признание частью стандарта нестандартных возможностей, которые уже широко используются веб-разработчиками. Одним из наилучших примеров следования этому принципу является включение в стандарт двух необычных атрибутов — contentEditable и designMode, которые позволяют сделать из обыкновенного браузера простой HTML-редактор.

Эти два атрибута не новы. Более того, их поддержка была добавлена еще в Internet Explorer 5 на заре становления Интернета. В то время большинство разработчиков отказалось от их использования, рассматривая их всего лишь как расширения Windows для Интернета.

Но с течением лет все больше браузеров начали копировать применяемый в IE практический, но причудливый подход к расширенному HTML-редактированию. В настоящее время все браузеры для настольных компьютеров поддерживают эти атрибуты, хотя они никогда и не были частью официального стандарта.

Редактирование элементов с помощью атрибута contentEditable

Рассмотрим первый инструмент для HTML-редактирования — атрибут contentEditable. Добавление этого атрибута к любому элементу позволяет редактировать содержимое этого элемента, когда оно отображается в окне браузера:

Скорее всего, вы не заметите никакой особенности в отображении этого текста в браузере. Но щелчок где-либо в отображаемом браузером тексте помещает в него курсор редактирования:

В приведенном ранее примере редактируемая область

Некоторые браузеры поддерживают встроенные команды форматирования. Например, в Internet Explorer текст можно делать жирным, курсивом и подчеркивать с помощью комбинаций клавиш + , + и + соответственно. Отменить последнее редактирование в Firefox можно посредством комбинации клавиш + . Все эти «горячие» клавиши можно использовать также в браузере Chrome.

Прежде чем приступить к использованию расширенного HTML-редактирования, стоит узнать, а для чего оно вообще-то применяется. Несмотря на мгновенно производимое впечатление, HTML-редактирование является специализированной возможностью, которая не каждому понравится. Имеет смысл использовать его, чтобы предоставить пользователям быстрый способ изменять HTML-содержимое, например, добавлять сообщения в блоги, вносить обзоры, подавать объявления или составлять сообщения другим пользователям.

Но даже если вы решите, что вам нужны такие возможности, атрибуты contentEditable и designMode могут оказаться не лучшим выбором для их реализации. Они не предоставляют разработчику всех удобств настоящего инструмента для веб-дизайна, таких как команды для редактирования разметки, возможность просматривать и редактировать исходный HTML-код, средства проверки орфографии и т.п.

Обычно атрибут contentEditable в разметку не включается. Вместо этого он включается с помощью JavaScript-кода и отключается по завершению редактирования:

Редактирование страницы с помощью атрибута designMode

Атрибут designMode похож на атрибут contentEditabie, с той разницей, что он позволяет редактировать всю веб-страницу. Это может показаться слегка проблематичным, ведь при редактировании страницы отключаются события элементов. Тогда как мы сможем нажимать кнопки, чтобы управлять процессом редактирования? Решение этой проблемы простое — редактируемый документ помещается внутри элемента , который ведет себя, как сверхмощное окно редактирования:

Этот пример должен дать вам представление о возможностях HTML-редактирования. Например, щелкните на изображении, чтобы выделить его для редактирования. Теперь можно изменять размеры изображения, перетаскивать его на новое место или совсем удалить его. То же самое можно делать и с элементами управления формы, если редактируемая страница содержит их.

Конечно же, если вы хотите превратить этот пример во что-то практическое, то вам нужно будет серьезно доработать его. Прежде всего следует добавить другие элементы управления редактированием. Если вы хотите получше разобраться в модели команд, в этом вам помогут разработчики браузера Opera (см. Rich HTML editing in the browser: part 1 и Part 2). Вторым делом нужно будет делать что-то полезное с отредактированной разметкой, например, отправить ее на сервер, используя объект XMLHttpRequest.

Еще одно предостережение. Этот пример не будет запускаться с локального жесткого диска на всех браузерах. Internet Explorer и Chrome заблокируют его по причинам безопасности, но на Firefox не будет никаких проблем. Для тестирования я использую локальный сервер.

Путеводитель по текстовым редакторам. Часть 1.

Официальный сайт: http://aditor.swrus.com
Размер: 727 КБ
Цена: 190 руб

Текстовый редактор Aditor оптимизирован для подготовки текстов web-страниц. Во время установки продукта предлагается всегда запускать его вместо Блокнота. Программа имеет два языка интерфейса – английский и русский. Их переключение происходит из настроек приложения.

Текстовый редактор поддерживает большинство кодировок, использующих кириллицу. Исключение составляет UTF-8, которая не воспринимается программой корректно. Это серьезный минус, так как юникод сегодня используется довольно часто. С другой стороны, текстовый редактор позволяет преобразовывать текст, используя транслитерацию. Если вы пишите письмо человеку, имеющему доступ к компьютеру где-то далеко за рубежом, то, наверняка, там просто нет поддержки кириллицы. И в этом случае сообщение, набранное латинскими буквами, но содержащее русские слова, будет понятно и читабельно.

Программа обладает возможностью подсветки синтаксиса для большого числа языков программирования и разметки, но один пункт меню, HTML Source, все же выделен жирным шрифтом. И это неслучайно. Программа, в первую очередь, рассчитана на подготовку HTML-страниц. Для упрощения ввода информации предлагается отдельное меню со списком тегов. Они представляют собой древовидную структуру, группируясь по тематикам. Для того чтобы ввести какой-либо тег, достаточно выделить часть текста и выбрать необходимый пункт меню. Выделение будет оформлено соответствующими управляющими командами. Вы можете не только вставлять, но и удалять теги. Программа обнаруживает вторую часть пары тегов (открывающий и закрывающий) и удаляет сразу оба вхождения.

Допускается создание закладок внутри текста. Они упрощают навигацию по документу. Текстовый редактор имеет неограниченную длину буфера отмены операций. Редактируемые документы сохраняются автоматически через определенные промежутки времени.

Поиск может осуществляться в текущем документе, а также во всех файлах выбранной директории. Программа способна шифровать файлы при сохранении. Печать документов может осуществляться с предварительным просмотром.

Aditor – простой, компактный текстовый редактор, рассчитанный, в первую очередь, на редактирование исходного кода HTML-страниц. Основной недостаток программы заключается в невозможности работы с UTF-8.

Официальный сайт: http://akelpad.sourceforge.net
Размер: 185 КБ
Цена: бесплатный

Компактный текстовый редактор AkelPad предназначен для замены Блокноту. Программа не поддерживает отображение и редактирование документов RTF, ограничиваясь только простым текстом.

По умолчанию AkelPad не имеет панели инструментов и открывает лишь один документ в своем рабочем окне. Второе ограничение легко снимается путем переключения в режим MDI. При этом под строкой с главным меню появляется панель с вкладками. Данное изменение работает только после перезагрузки приложения, поэтому оперативно переключаться между режимами не получится.

Текстовый редактор поддерживает Unicode, а также автоматически определяет несколько популярных кодировок. Формально, программа может правильно отобразить текст, используя любую кодировку, установленную в системе.

AkelPad правильно обрабатывает перенос строки, используемый как в Windows, так и в UNIX-системах. Диалоговое окно открытия файла позволяет осуществлять предварительный просмотр документов.

Программа позволяет осуществлять поиск не только путем ввода текстовых запросов, но и с помощью escape-последовательностей и по шестнадцатеричному коду.

Приложение ведет список последних открытых документов. Поддерживается многоуровневый откат действий. После редактирования файла запоминается позиция курсора и кодировка.

Настройки текстового редактора могут храниться в реестре или в INI-файле. Во втором случае для переноса приложения на другой компьютер, достаточно скопировать программную папку AkelPad. Все настройки сохранятся.

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

К содержанию Boxer Text Editor 12.0.1

Официальный сайт: www.boxersoftware.com
Размер: 4246 КБ
Цена: 59.99$

Прошло шестнадцать лет с момента начала разработки Boxer Text Editor. За эти долгие годы версия продукта стала двузначным числом, а его функциональные возможности в количественном изменении, практически не знают себе равных среди конкурентов. Однако, кроме количества, есть еще и качество. А с ним стоит разобраться более детально.

Панель инструментов текстового редактора находится, по умолчанию, в верхней части окна, ее нельзя куда-либо перетаскивать мышью. Однако имеется возможность явного указания ее положения из контекстного меню. Иными словами, вы можете помещать панель наверху, слева, внизу или в правой части рабочего окна. Набор кнопок можно менять свободно, их общее количество равняется 422. По умолчанию на панели инструментов присутствует лишь 22 кнопки. Как видите, простор для творчества огромен, в закромах редактора таится 400 кнопок, которые можно вынести на видное место.

В нижней части окна располагается панель вкладок, с помощью которой обеспечивается переключение между открытыми документами. Как и в предыдущем случае, можно указывать положение панели из контекстного меню. На этот раз предлагается всего лишь два варианта – снизу и сверху. Документы внутри вкладок можно дополнительно сортировать по имени или по расширению.

Программа обладает нестандартным диалоговым окном открытия документов. Оно отличается от штатного аналога Windows тем, что вы можете быстро переключаться между избранными директориями, а также осуществлять предварительный просмотр содержимого файлов.

Здесь проявляется один из недостатков Boxer Text Editor. Применительно к кириллице, он поддерживает кодировки Windows-1251 и DOS-866. Поддержка юникода отсутствует, документы UTF-8 выглядят нечитабельно.

Вы можете открывать документы, имеющие объем до двух гигабайт. При этом каждая строка в документе может иметь длину до тридцати двух тысяч символов. Количество же строк официально не ограничено, но нетрудно вычислить теоретический предел, помня максимальный размер файла.

Текстовый редактор поддерживает выделение синтаксиса многих языков программирования. Помимо заранее определенных слов, а их более трех тысяч, вы можете добавлять собственные конструкции, тем самым расширяя возможности выделения цветом. На каждый язык программирования предлагается по несколько вариантов раскраски, стилей оформления. Цвет передается на печать. И здесь также вы вправе выбирать схему раскраски. Предварительный просмотр печати может выполняться как в цветном, так и в монохромном режиме. Не у всех же есть цветные принтеры. При печати учитывается не только цвет, но и стиль шрифта. Например, если подсветка подразумевала выделение курсивом, например, комментариев, то и на печати будут также наклонные буквы. Подобную гибкость трудно встретить в других аналогичных программах.

Вы можете осуществлять откат назад шестьдесят четыре тысячи раз подряд. Присутствует режим быстрой перемотки, который заключается в одновременной отмене всех изменений, а также в их полном возврате.

Текстовый редактор поддерживает автоматическое завершение слов. Во время набора слова, можно вызывать меню со списком предлагаемых окончаний. Список подсказок по умолчанию берется из текущего документа. Кроме того, вы можете подключать дополнительные словари. Например, английский вариант содержит тридцать семь тысяч слов. Меню с подсказками может появляться по нажатию определенного клавиатурного сочетания, а также по достижению набора определенного числа символов, то есть, автоматически. Завершение слов работает не только при наборе простого текста, но и в программном режиме, когда ведется набор функций, операторов и прочих конструкций текущего языка программирования.

Программа умеет создавать проекты из набора файлов. Для каждого из документов можно задавать собственный режим просмотра, переноса строк, подсветки синтаксиса и многое другое. Удобство работы с проектом заключается еще в том, что его можно открывать, сохранять и закрывать одной командой.

В состав Boxer Text Editor входит инструмент проверки орфографии. Поиск ошибок происходит по мере набора текста. Слова, отсутствующие в словарях, сразу подчеркиваются красной волнистой чертой, как в MS Word. Пользователь может самостоятельно добавлять слова в словари. Русского словаря нет в дистрибутиве текстового редактора, на официальной странице его также не существует. Вы можете, помимо английского языка, загрузить голландский, немецкий, французский, итальянский и испанский словари.

Помимо простого текста, текстовый редактор может проверять корректность синтаксиса языков программирования. В этом случае, отключается проверка комментариев и строковых переменных. Кроме того, допускается отключение проверки текста внутри HTML-тегов.

Любопытно, что даже инструменты поиска могут быть привязаны к конкретному типу синтаксиса. Например, вы можете осуществлять поиск только в операторах, только в комментариях или только в переменных.

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

Boxer Text Editor позволяет использовать до восьми независимых буферов обмена. Переключение между ними осуществляется с помощью единого клавиатурного сочетания. Как только вы подведете указатель мыши к соответствующим пунктам главного меню, там появляется подсказка, внутри которой отображается содержимое текущего буфера обмена. Их содержимое сохраняется вместе с сессией.


Не только копирование, но и вставка из буфера обмена реализована в Boxer Text Editor весьма необычно. Вы можете вставлять текст в кодировке Windows-1251 или DOS-866. При этом работает предварительный просмотр. Он поддерживает сложное форматирование RTF, в том числе и HTML, а также обладает режимом HEX.

Шаблоны позволяют быстро вводить часто используемые фрагменты текста. Программа поддерживает указание положения курсора для более удобной работы с конструкциями языков программирования.

Поиск в Boxer Text Editor также имеет немало особенностей. Например, вы можете обнаруживать конструкции из открывающих и закрывающих HTML-тегов, а также осуществлять поиск традиционных пар операторов. Они могут быть заранее определены (begin/end, if/endif, while/endwhile и другие), либо вводиться пользователем вручную.

Регулярные выражения, используемые в Boxer Text Editor, совместимы с Perl. Поиск может осуществляться внутри текущего документа или в нескольких файлах, директориях. Теоретически можно устроить розыск на всем жестком диске, так как программа поддерживает включение вложенных каталогов. Результаты поиска подсвечиваются внутри текстов, что делает просмотр более наглядным.

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

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

Программа содержит множество вариантов удаления текста. Вы можете стирать символы, целые строки, а также их части от текущего положения курсора. Допускается указание подстроки, начиная от вхождения которой начнется удаление в ее конец или в начало. Можно удалить слово, следующее слово. Имеется возможность стирания закладок, пустых строк, дубликатов строк. Можно удалить выделенный регион, а также следующий и предыдущий символ от текущего положения курсора.

В состав текстового редактора включен калькулятор, с помощью которого можно осуществлять разнообразные вычисления. Вы можете преобразовывать системы счисления. Поддерживается двоичная, восьмеричная, десятичная и шестнадцатеричная системы. Калькулятор позволяет использовать в выражениях логические переменные AND, OR, XOR и NOT. Вы можете быстро вводить множество констант. Калькулятор поддерживает тригонометрические функции. Результаты вычислений отображаются в виде всплывающих подсказок, а также могут быть вставлены из буфера обмена.

Текстовый редактор обладает серией возможностей по обработке слов в документах. Во-первых, по мере набора текста, слова могут переноситься на новые строки. Во-вторых, можно применять выравнивание по левому и правому краям, по центру, а также сразу по обеим сторонам документа. При этом данные команды могут и не добавлять знаки перевода строки. Вы можете распространять формат текущего параграфа на все остальные.

Программа оптимизирована для работы с двумя мониторами. Это выражается в том, что многие диалоговые окна, меню и подсказки отображаются не в центре экрана, а в центре рабочего окна приложения. Кроме того, многие диалоговые окна запоминают свой размер и положение.

Программа позволяет гибко управлять параметрами страницы при печати документов. Вы можете указывать отступы, а также добавлять на страницы колонтитулы header и footer. При печати можно менять расстояние между строками. Предлагается одинарный, двойной и тройной интервалы. В левой части документа можно проставлять номера строк. Если строки не помещаются на лист бумаги, то их можно дополнительно переносить, разделяя на составляющие.

Текстовый редактор поддерживает рисование линиями, состоящими из символов ASCII и OEM. Вы можете создавать линии из любых, указываемых в настройках символов.

Сохранность документов обеспечивается их автоматической записью на жесткий диск с указанием определенного интервала времени. Кроме того, допускается создание резервных копий документов. По умолчанию они имеют расширение BAK. Вы можете удалять исходное расширение или просто добавлять новый суффикс. Кроме того, имеется возможность указания пользовательских расширений для резервных копий. По умолчанию они хранятся в той же папке, что и исходные документы. Вы можете указать дополнительную папку, куда будут складываться все резервные копии.

Boxer Text Editor – не просто мощный, а могучий текстовый редактор, настоящий исполин. Его возможности на голову выше многих участников путеводителя, причем это можно отнести ко всем операционным системам. К сожалению, программа имеет несколько пробелов в функциональности, за которые нельзя винить разработчиков. Они заключаются в слабой поддержке кириллицы. Половина кодировок не поддерживается, русского интерфейса нет, русского словаря нет. Если вас это не пугает, то Boxer Text Editor может смело стать настоящим универсалом, текстовым редактором на все случаи жизни.

Официальный сайт: www.astonshell.ru
Размер: 579 КБ
Цена: бесплатный

Bred 3 позиционируется как замена Блокноту, несмотря на то, что обладает значительно большим размером дистрибутива. Впрочем, исполняемый модуль текстового редактора на самом деле очень компактен, а основной объем занимает подключаемый модуль стороннего разработчика Colorer, отвечающий за подсветку синтаксиса.

Программа автоматически распознает три популярные кодовые страницы, а также тексты Unicode. Помимо грамотного распознавания, поддерживается и перекодировка текста на лету.

Панель инструментов Bred 3 может настраиваться путем добавления или удаления кнопок, а также полностью скрываться. Несколько документов внутри одного рабочего окна приложения открыть нельзя.

Подсветка синтаксиса по умолчанию отключена. Когда вы открываете какой-либо документ, все символы отображаются одним цветом, указанным в настройках редактора. Однако вы можете вручную включить подсветку. Модуль Colorer поддерживает множество популярных форматов текстовых файлов.

Небольшим реверансом в сторону редактирования исходных текстов программ можно назвать возможность запуска документов. При этом запускается приложение, связанное в системе с текущим расширением файла.

При создании новых документов можно сразу указывать кодировку Windows-1251 или Unicode. Кроме того, существует отдельный режим создания web-страницы. Он заключается в том, что включается подсветка синтаксиса, и в новый документ добавляется шаблон, присущий большинству HTML-страниц.

В текст можно автоматически добавлять текущую дату и время. На этом список макросов и сокращений заканчивается.

Bred 3 выглядит серьезным улучшением по сравнению с блокнотом при сохранении компактности и простоты освоения.

Официальный сайт: www.context.cx
Размер: 1642 КБ
Цена: бесплатный

На официальной странице проекта, ConTEXT позиционируется как текстовый редактор для программистов. Он имеет немало сервисных инструментов, помогающих в разработке программного обеспечения.

Панели инструментов приложения можно перетаскивать в пределах рабочего окна. Они могут находиться в верхней его части, снизу, а также сразу под окном редактирования документов. Управлять кнопками нельзя. В нижней части рабочего окна приложения находится панель результатов поиска и консоль вывода.

Левая боковая панель предназначается для управления файлами. Во-первых, на ней присутствует файловый навигатор. Во-вторых, вы можете сохранять часто используемые документы в списке избранного. В-третьих, текстовый редактор ведет историю открытия всех файлов.

ConTEXT поддерживает работу с проектами. Вы можете загружать все его файлы сразу, а также, при необходимости, выбирать их по отдельности.

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

Несмотря на заявленную разработчиком поддержку UTF-8, открыть тексты в такой кодировке не получилось. Кириллица оказалась нечитабельна. Неудача постигла и при попытке открыть файлы, имеющие кодировку KOI8-R.

Для ускорения ввода текста можно использовать макросы. Вы назначаете горячую клавишу, включаете запись, записываете последовательность нажатий клавиш, какую-нибудь фразу. Затем ее можно будет вставлять с помощью означенного ранее клавиатурного сочетания.

Для удобства навигации по документу используются закладки. Вы можете выделять текст внутри скобок, быстро переходить от одной скобки к другой. Допускается сортировка строк по алфавиту.

Горизонтальная линейка отмеряет количество символов. Вы можете включать показ дополнительных, скрытых знаков, например, обозначений табуляции, пробелов, переносов строки.

Вы можете увеличивать и уменьшать отступ от начала строки, форматировать параграфы, менять регистр букв. Поддерживается преобразование пробелов в символы табуляции и наоборот.

Текстовый редактор содержит инструмент сравнения файлов. Вы можете указывать либо редактируемые документы, либо файлы с жесткого диска. Разница между текстами выводится с помощью цветной подсветки. Различия в строках, к примеру, выделяются желтым цветом, а символы – синим. Дополнительные линии отображаются красным цветом. Недостающие строки используют серый оттенок. Эти цвета применяются по умолчанию, вы можете менять их.

Отдельного внимания заслуживает система печати текстового редактора. Во-первых, вы можете использовать предварительный просмотр страниц с возможностью масштабирования и навигации по листам. Во-вторых, вам предлагается большой набор опций управления печатью. Вы можете нумеровать строки, в том числе на полях бумаги. Допускается подсветка синтаксиса с помощью цвета. Кроме того, вы можете переносить строки на распечатываемом документе. Для печати можно указывать собственный шрифт, выбирать его размер.

Распечатываемые документы могут иметь переплет, верхний и нижний колонтитулы, поля. Внутри колонтитулов можно использовать три строки. Одна из них располагается слева, вторая — справа, а третья — по центру. Колонтитулы могут иметь рамку и тень. Цвет указывается пользователем.

Вы можете экспортировать документы в форматы RTF и HTML. Приложение минимизируется по умолчанию в панель задач, но может быть переназначено на системный лоток.

ConTEXT обладает массой полезных функций. Особенно стоит выделить мощную систему печати. Однако с кодировками, использующими кириллицу, программа работает плохо.

Текстовый редактор для сайта — wysihtml5

Здравствуйте, уважаемые читатели XoZbloga! В этой статье расскажу Вам о wysihtml5 — текстовом редакторе для сайта с открытым исходным кодом. wysihtml5 использует сложные концепции безопасности и стремится создать правильную и чистую разметку HTML5, предотвращая добавление ненужных тегов и встроенных стилей, которыми так часто грешат другие текстовые редакторы. В тоже время очень быстрый и легкий в работе. Поддерживается даже речевой ввод для Chrome! Одним словом хороший текстовый редактор, который можно настроить для своих нужд!

Цукерберг рекомендует:  Глянцевое горизонтальное меню

Советую сразу скачать исходники с github, я качал последнюю версию 0.3.0 там в архиве есть папочка website с аналогичным редактором как в демо. Просто так сразу будет наглядней. Предлагаю просто рассмотреть как же просто подключается и настраивается wysihtml5.

Шаг 1: Подключение скриптов

Для начала использования данного текстового редактора скачиваем исходные файлы, создаем отдельную директорию на своем сайте (например path-to-wysihtml5), и заливаем их туда. После в той странице где намечается присутствие редактора подключаем 2 файла:

Шаг 2: Создание тулбара (кнопок)

Теперь можно наладить кнопки редактора. Достаточно большой выбор различных команд форматирования текста. Вот здесь полный список, и способ их настройки. Тулбар должен иметь свой идентификатор, чтобы можно было настроить доступ для JavaScript

div id = «wysihtml5-toolbar» style = «display: none;» >
a data-wysihtml5-command = «bold» >bold / a >
a data-wysihtml5-command = «italic» >italic / a >

a data-wysihtml5-command = «foreColor» data-wysihtml5-command- value = «red» >red / a >
a data-wysihtml5-command = «foreColor» data-wysihtml5-command- value = «green» >green / a >
a data-wysihtml5-command = «foreColor» data-wysihtml5-command- value = «blue» >blue / a >

( например href )
a data-wysihtml5-command = «createLink» >Создать ссылку / a >
div data-wysihtml5-dialog = «createLink» style = «display: none;» >
label >
Ссылка:
input data-wysihtml5-dialog-field = «href» value = «http://» class = «text» >
/ label >
a data-wysihtml5-dialog- action = «save» >OK / a > a data-wysihtml5-dialog- action = «cancel» >Cancel / a >
/ div >
/ div >

Шаг 3: Создание текстовой области (textarea)


Все, теперь уже можно и текстовую область вставить, которую wysihtml5 преобразует в текстовый редактор. Область должна иметь свой идентификатор, чтобы можно было настроить доступ для JavaScript:

Шаг 4: Инициализация редактора

Здесь мы отмечаем в качестве параметров id текстовой области и панель с кнопочка (тулбар). Однако есть и другие параметры .

Вот так вот интегрируется wysihtml5. Теперь «если что» буду им пользоваться. Понравился ли Вам этот редактор? Может Вы знаете подобные текстовые редакторы, оставляйте комментарии!

Чтобы оставаться в курсе свежих статей и уроков подписывайтесь на страницу ВКонтакте или подпишитесь на почтовую рассылку. Если статья Вам понравилась сделайте пожалуйста tweet или like — поделитесь с друзьями �� Спасибо за прочтение. До связи!

P.S.: Энергосбережение все глубже входит в нашу повседневную жизнь. Одним из основных направлений в области сбережения электроэнергии является освещение жилых домов. Тут Вы сможете найти подходящие светодиодные лампы для дома. Большой выбор, доступные цены и доставка по всей России.

Чтобы оставаться в курсе свежих статей и уроков подписывайтесь на еженедельную почтовую рассылку или на новостную ленту RSS. Спасибо!

Обзор 12-ти лучших текстовых редакторов для верстки и программирования

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

Если Вы ищете хороший бесплатный текстовый редактор, то Вы обратились по адресу. В этом обзоре Вы найдете 12 лучших бесплатных текстовых редакторов, созданных программистами для программистов. Пользуетесь ли Вы Windows, Mac или Linux — Вы найдете несколько подходящих решений.

NOTEPAD++

Notepad++ на сегодняшний день, по праву, считается лучшей заменой стандартного блокнота. Этот текстовый редактор обладает следующими функциями:

  • автозавершение кода (для большинства языков);
  • вкладки, для работы с несколькими файлами;
  • мощный поиск с функцией замены и регулярных выражений;
  • поддержка огромного количества языков (даже Ассемблер!).

Это лишь некоторые функции, из-за которых Notepad++ давно является моим любимым текстовым редактором и прекрасно подходит в качестве редактора для верстки.

ОС: Windows
Скачать: Notepad++, 2,9 Мб

Bluefish Editor

Bluefish Editor представляет собой мощный текстовый редактор с открытым исходным кодом, предназначеный для программистов и веб-разработчиков. Известен как легкий и быстрый редактор, способный с легкостью открыть 500 файлов. Имеет встроенную справочную систему по PHP, Python, CSS, и HTML, так что Вы можете быстро освоить особенности синтаксиса. Чтобы найти обучающие материалы, загляните в раздел Screenshots. Там Вы найдете обучающие видео и скриншоты Bluefish Editor.

ОС: Mac, Linux
Скачать: Bluefish Editor, 1.5 Мб

TextWrangler

TextWrangler — это универсальный текстовый для Mac. Помимо обычных функций, он позволяет быстро искать и переходить к нужной функции, а также пригодиться даже в администрировании Unix-серверов.

Smultron

Smultron очень простой текстовый редактор. Его незамысловатый интерфейс оценят любители минимализма. Кроме уже стандартных функций, вроде подсветки синтаксиса, этот редактор обладает действительно полезными возможностями. Например, Вы можете разделить окно редактора на две части и видеть одновременно два файла. Также имеется функция полноэкранного режима и библиотека сниппетов.

ОС: Mac
Скачать: Smultron, 5,1 Мб

Caditor

Caditor — это open-source текстовый редактор, не требующий установки. Написан на .NET framework (C#), что обусловливает высокую скорость работы. Имеет встроенный в верхнюю панель поиск, что позволяет не вызывать дополнительное диалоговое окно. Наряду с обычными функциями, вроде нумерации строк, этот текстовый редактор позволяет соединить его вместе с компилятором, а также имеет встроенный FTP-клиент.

ОС: Windows
Скачать: Caditor, 1,3 Мб

gedit

gedit является редактором по умолчанию в среде Gnome. В отличии от MS Notepad, это намного более функционально продвинутый текстовый редактор. Вкупе с подсветкой синтаксиса, поддержкой вкладок и проверкой орфографии gedit представляет собой превосходный бесплатный текстовый редактор для разработчика.

ОС: Linux
Скачать: gedit, 6,3 Мб

GNU Emacs

GNU Emacs (чаще называемый просто Emacs) — это кроссплатформенный текстовый редактор, расчитанный преимущественно для программистов. Одна из его примечательных функций — возможность расширения функциональности. Например, Вы можете превратить его в планировщик или дебаггер. Еще одна интересная функция — построчное сравнение содержимого двух файлов.

ОС: Windows, Mac, Linux
Скачать: GNU Emacs, около 40 Мб (в зависимости от платформы)

Crimson Editor

Это легкий текстовый редактор для Windows с поддержкой множества языков. С помощью функции макросов возможна запись выполнения однотипных действий. Иммется встроенный FTP-клиент. Неплохое решение для пользователей Windows.

ОС: Windows
Скачать: Crimson Editor, 1,1 Мб

ConTEXT

ConTEXT еще один отличный текстовый редактор для Windows. Бесплатный, но исходный код закрыт. Имеет множество полезных функций. Например, сортировка текста, экспорт/импорт настроек, запись макросов.

ОС: Windows
Скачать: ConTEXT, 1,6 Мб

SciTE

SciTE создан на основе открытого проекта Scintilla, и представляет собой быстрый текстовый редактор, предназначенный, в первую очередь, для редактирования исходного кода. Имеется готовая portable-версия (.exe), так что Вы можете записать его себе на флешку и использовать на любом компьютере. Совместим с Windows и Linux. Тестирован разработчиком на Windows XP, Fedora 8 и Ubuntu 7.10.

ОС: Windows, Linux
Скачать: SciTE, 2 Мб

Komodo Edit

Komodo Edit — это бесплатный кроссплатформенный текстовый редактор, созданный компанией ActiveState. Создан на основе популярной среды разработки Komodo IDE. Имеет очень удобный менеджер проектор, что поможет Вам в организации работы. Многие наши разработчики используют его как редактор для верстки.

ОС: Windows, Mac, Linux
Скачать: Komodo Edit, 31 Мб

jEdit

jEdit — текстовый редактор, специально предназначенный для программистов. Написан на Java, поэтому работает в любой ОС, где есть поддержка Java. Разработчик постарался взять лучшее от всех тектовых редакторов и воплотить их в jEdit. Вы можете расширить функциональность редактора за счет множества плагинов, доступных в репозитории проекта.

ОС: Windows, Mac, Linux
Скачать: jEdit, 3 Мб

Топ-20 бесплатных редакторов кода

Редакторы кода имеют огромное значение для ежедневного процесса разработки веб-сайта. Они рассматриваются как ресурс, без которого вы не можете обойтись, поскольку их целью является повышение эффективности вашей работы. С отличным редактором вы можете быстрее писать код, находить синтаксические ошибки и делать гораздо больше, чтобы помочь развитию вашего сайта. Вы можете легко вносить изменения в свой код, если используете хороший редактор. Редакторы кода появляются и исчезают на протяжении многих лет, но есть те, которые оставались сильными и улучшались с течением времени, чтобы предоставлять лучшие услуги своим пользователям.


Вот несколько из редакторов, которые вы можете использовать сегодня, и при этом все они абсолютно бесплатные.

Это бесплатный редактор кода, а также редактор исходного кода, предназначенный для программистов. Он является бесплатным для использования на Windows. Также он может работать с простым текстом и создавать веб-страницы для вас. Это лучший выбор, если вы хотите использовать хорошую IDE для своего компилятора.

Редактор абсолютно бесплатен для Windows, Linux и Mac OS X. Это полноценная среда веб-разработки, в которой используется сочетание очень мощных средств разработки для HTML, JavaScript и CSS. Он также имеет множество дополнительных плагинов, которые были созданы сообществом разработчиков. Это унифицированный инструмент для редактирования веб-приложений.

Это редактор с открытым исходным кодом, предназначенный для пользователей, работающих с исходным кодом. Он имеет отличные функции, которые включают в себя сворачивание кода или структурирование, окна стыковки инструментов, закладки, как пронумерованные, так и простые, менеджер ассоциаций файлов и другие.

Бесплатный редактор кода для Windows. Он предлагает поддержку нескольких языков. Некоторые ее мощные функции включают автозавершение, определяемую пользователем подсветку синтаксиса, динамическую позицию просмотров, а так же среди прочего поддержку мультидокумента.

Это отличный текстовый редактор для Microsoft Windows. Он является полнофункциональным и предназначен для редактирования, форматирования, проверки, предварительного просмотра, а также публикации веб-страниц на языках HTML, XHTML и XML. Редактор позволяет сворачивать код, имеет несколько опций загрузки, и с ним вы можете перемещаться по тегам и скриптам.

Еще один бесплатный редактор кода для Windows, Linux и Mac OS X. Это очень хороший мультиплатформенный и многоязычный редактор, который дает своим пользователям возможность создавать, модифицировать, перемещаться, строить, а также отлаживать код очень быстро и точно. Он позволяет редактировать файлы размером до 2 ГБ.

Это очень профессиональный редактор исходного кода для Windows. Он маленький по размеру, а также очень быстрый во время загрузки. С ним вы можете редактировать несколько документов сразу, и он предлагает подсветку синтаксиса среди других своих замечательных функций.

Это очень полезная среда веб-разработки для разработчиков Linux. Его главная полезность заключается в повышении производительности разработчиков при создании сайта. Этот инструмент даст вам быстрый доступ к некоторым функциям, которые столь необходимы.

Это очень хороший текстовый редактор, редактор HTML, редактор Java, а также редактор PHP. Он предназначен для Windows, а также имеет отличные и мощные функции для веб-программистов и веб-авторов.

Это код-ориентированная интегрированная среда разработки, которая фокусируется на производительности разработчика. Этот инструмент очень хорошо понимает ваш код, и он поставляется с набором инструментов, которые являются очень мощными, но при этом не вмешиваются в рабочий процесс или структуру вашего проекта.

Очень легкий по весу, но расширяемый текстовый редактор, который доступен только в качестве бесплатной пробной версии для Windows. Первоначально он был разработан для Windows XP, но он также сертифицирован для использования с Windows Vista.

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

Это очень полезный редактор кода для Mac OS X, предназначенный для веб-дизайнеров и программистов. Среди его замечательных функций есть интерфейс с вкладками, сворачивание кода, подсказка и завершение кода, управление сайтом на основе проекта и так далее.

Этот редактор кода является бесплатным для Windows, Linux и Mac OS X. Это очень продуманный редактор кода, поставляющийся с многочисленными плагинами, которые вы можете использовать в своем процессе разработки. Он имеет встроенный макроязык и может поддерживать большое количество кодировок символов, в том числе Unicode и UTF8.

Это идеальный выбор для веб-разработчиков, которые хотят быстро и легко выполнить все свои задачи. Редактор имеет отличные функции, которые предлагают обработку текста, программирование и веб-разработку, обработку файлов и демонстрацию среди прочего.

Это потрясающий бесплатный текстовый редактор и редактор открытого исходного кода. Он хорошо работает с рядом операционных систем, включая Microsoft Windows, Linux и MacOs.

Это очень полезный кодовый редактор для Mac OS X. Существует бесплатная, а также коммерческая версия. Он поставляется с замечательными плагинами для веб-разработчиков, открывается очень быстро, умен в орфографии и легко находит файлы.

Этот редактор предназначен только для Mac. Он поддерживает всего лишь один язык, хотя это очень мощный текстовый редактор общего назначения. Редактор имеет отличные функции для веб-разработчиков, чтобы сделать их разработку легкой и быстрой.

Это редактор кода, который поможет вам создавать очень красивые инновационные сайты, загружающиеся очень быстро. Отметим, что приложение само по себе красивое, инновационное и быстрое. Редактор дает вам интуитивный подход, чтобы вы имели возможность модернизировать таблицы, и он поставляется с мощными функциями предварительного просмотра, которые помогут вам создавать удивительные и стандартные сайты в самое короткое время.

Очень хороший и простой в использовании текстовый редактор. Это лучший редактор для совместной работы, который вам понравится использовать. Он просто необходим, чтобы сделать вашу совместную работу возможной и веселой.

Выбор редактора кода всегда должен быть сделан в зависимости от ваших потребностей и проектов, над которыми вы работаете. Веб-разработчикам нужны эти редакторы, чтобы работать быстрее и эффективнее, и это лучшие из которых вы можете выбрать.

Notepad++ — бесплатный Html и PHP редактор с подсветкой синтаксиса, обзор возможностей и лучшие плагины для Нотепада++

Здравствуйте, уважаемые читатели блога KtoNaNovenkogo.ru. Уже очень давно хотел написать про замечательный бесплатный редактор Notepad++ (ссылка ведет на официальный сайт, где можно скачать последнюю версию с поддержкой русского языка).

Уже на протяжении многих лет он является одной из самых востребованных и используемых мною программ для редактирования Html, CSS и PHP кода. Даже удивляюсь: «а как я раньше обходился без него, реализуя его потенциал с помощью каких-то других программ?».

Сейчас у меня на компьютере всегда одновременно запущена пара браузеров, очень простой, бесплатный и удобный ФТП менеджер FileZilla и этот самый редактор, возможности которого просто несравнимы с используемым в Windows по умолчанию блокнотом. Но обо все по порядку.

Скачивание и возможности редактора Notepad ++

Скачать Нотепад++ на русском можно прямо с официального сайта разработчика, причем, в комплект входит поддержка нескольких десятков языков, включая и русский.

Установка программы в Windows осуществляется совершенно обычным способом. Так же при желании можете скачать Notepad ++ Portable, представляющий из себя портативную версию этого редактора, не требующую установки в операционную систему.

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

Все плюсы редактора Notepad++

На самом деле встроенный в Windows блокнот отличается от нашего героя так же, как небо и земля. В классическом блокноте нет практически ничего, кроме возможности просмотра и создания простейших текстовых файлов (получается нечто похожее на палку-копалку, используемую людьми на ранних этапах развития).

Начав же пользоваться Нотепадом с двумя плюсами, хотя бы для корректировки Html и CSS файлов, вы сразу попадете из каменного века в кабину современной землеройной машины. Есть, конечно же, и другие альтернативные программы и даже онлайн Html редакторы, но для новичка «блокнот с двумя плюсами» будет самое то (имхо).

Да, конечно же, поначалу использование его может показаться замысловатым и нетрадиционным. Но это только в самом начале знакомства, а потом вам будет так же сложно обходиться без него, как, например, многие пользователи компьютера не мыслят свою жизнь без файлового менеджера Total Commander (тоже своего рода «классика»).

Если сравнивать Notepad ++ с более сложными программами, предназначенными для облегчения написания и редактирования различных кодов, таких, например, как Dreamweaver, то и тут найдется не мало аргументов для использования именно нашего героя:

  1. Во-первых, он абсолютно бесплатный, а значит вы сможете существенно сэкономить, используя его вместо того же Dreamweaver, если не брать в расчет взломанных версий платных программ (которые вполне могут быть рассадником троянов и других вирусов).
  2. Во-вторых, Нотепад намного более легкий и быстрый, нежели многие из платных редакторов. Кроме того, имеется возможность использовать вообще не устанавливая его в операционную систему Windows (так называемая портативная версия — портабл) и носить его, допустим, на флешке, поставив на нее пароль. В результате вы всегда будете иметь под рукой удобный, функциональный и хорошо понятный вам инструмент для работы с Html, PHP и несколькими десятками других разновидностей кода.

Почему именно это редактор стоит скачать?

Давайте вкратце пробежимся по его возможностям и особенностям, а потом попробуем их рассмотреть более подробно. Итак, Notepad++ умеет следующее:

    Подсвечивать несколько десятков наиболее популярных языков программирования и разметки, например, такие как: Ada, Assembler, C, C#, C++, CSS, FORTRAN, HTML, Java, JavaScript, Objective-C, Pascal, Perl, PHP, Python, Ruby, SQL, XML.

Для всех этих языков осуществляется подсветка синтаксиса, разбиение кода на строки и блоки, которые можно свернуть нажатием на минус и развернуть, нажав на плюс. А так же пунктиром можете отображаться связь между элементами. Для примера я взял фрагмент PHP кода, чтобы продемонстрировать возможности этого редактора:

Если щелкнуть мышью на открывающем Html теге, то он выделится синим фоном и одновременно так же будет выделен и закрывающих тег, если таковой имеется. Замечательно помогает найти незакрытые элементы и поправить поплывшую верстку.

  • В нем очень просто осуществить смену кодировки, например, на являющуюся сейчас популярной UTF-8 без BOM, о которой я рассказывал в статье, посвященной борьбе с кракозябрами в кодировках русского языка (см. ее по ссылке).
  • В одном окне программы можно будет открывать на редактирование сколько угодно файлов, ибо Notepad++ использует вкладки на манер тех, к которым вы уже успели привыкнуть в современных браузерах.

    Цвет дискетки на каждой вкладке показывает, сохранили ли вы произведенные в нем последние изменения с помощью аналогичной дискетки на панели инструментов. На активной вкладке красная дискетка (а на неактивной — фиолетовая) говорит о вашей забывчивости.

  • С помощью этого редактора можно вести поиск (Ctrl+F) как по открытому в нем документу, так и по целому сонму текстовых файлов, лежащих в определенной папке. Возможен поиск с заменой и с использование регулярных выражений. Потрясающе удобный инструмент.
  • В настройках этого редактора можно включить автоматическое прописывание закрывающего Html тега, при наборе открывающего, а так же опцию автозавершения тегов.
  • Нотепад++ не только ведет историю всех ваших изменений и позволяет откатиться на сколько угодно шагов назад или вернуться вперед, но и осуществляет резервное хранение копий этих документов на манер того, как это делает Микрософт Ворд.

  • Этот редактор имеет возможность управления горячими клавишами, которых в нем задано великое множество — из верхнего меню «Опции» — «Горячие клавиши». Причем, при двойном щелчке мышью по интересующей вас комбинации откроется окно для переназначений клавиш, что может быть удобно тем, кто на Notepad пересаживается с другого редактора.
  • Нотепад за годы своего существования обзавелся массой плагинов, некоторые устанавливаются с ним по умолчанию, а остальные будут доступны для вас из верхнего меню «Плагины» — «Plagin Manager» — «Show Plagin Manager».

    Для установки вам достаточно будет на первой вкладке поставить галочку у нужного плагина и нажать на кнопку «Install».

    После этого окно редактора перегрузится и новый плагин будет доступен в одноименной вкладке:

    В приведенном примере мы добавили в Notepad++ встроенный менеджер файлов, панель которого откроется слева при нажатии Alt+A или выборе из меню «Плагины» — «Light Explorer».

  • Еще этот «швейцарский нож» умеет подключаться к вашему сайту по ФТП, записывать и воспроизводить макросы, осуществлять проверку орфографии на лету, проводить сравнение двух файлов в открытых рядом окнах и многое — многое другое.
  • Что вам еще может понадобиться в Нотепад ++

    Давайте будем считать, что я вас заинтересовал, и рассмотрим подробнее возможности, которые может нам предоставить Блокнот с двумя плюсами.

    1. Благодаря подсветке синтаксиса в Notepad ++ очень легко, например, проверить, закрыты ли все Html теги в коде, а при наличии минимального опыта вы уже визуально будете отмечать, что в коде у вас где-то была допущена ошибка, ибо изменится цветовое оформление кода в этом месте.
    2. Так же, из-за того, что код выделяется цветом, а обычный текст моих статей остается черным, моему неизменному корректору грамматических ошибок (любимой супруге) очень удобно осуществлять проверку грамматики именно в нем. Нет, кончено же, я использую и различные онлайн сервисы грамматики, но не одни из них еще не умеет проверять пунктуацию, да и смысловые ошибки тоже.
    3. Еще мне в этом текстовом редакторе очень нравится возможность наглядного отображения отдельных блоков кода с помощью подсветки скобок вида < >[ ] ( ). Когда курсор мыши находится между какими-либо скобками, то они подсвечиваются, как бы выделяя начало и конец блока Html или PHP кода.
    4. Кроме отличной реализации подсветки следует отдельно отметить возможность сделать шаг назад (отменить предыдущее действие). Причем количество шагов назад не ограничено, что позволяет не бояться экспериментировать с кодом без риска необратимых последствий.

    Отмена действия в Notepad++ возможна с помощью горячих клавиш Ctrl+Z (Ctrl+Y — шаг вперед, т.е. отмена произведенной отмены), с помощью соответствующих пунктов меню «Правка» или же с помощью кнопок в виде загнутых стрелочек на панели инструментов этого редактора.

  • Нотепад++ постоянно отслеживает состояние открытых в нем документов и в случае их изменения или удаления, например, в другой программе, вам будет показано окно с предложением закрыть данную вкладку с документом или же повторно подгрузить ее измененную версию.
  • Как я уже ранее упоминал, в блокноте с двумя плюсами имеется возможность настройки подсветки синтаксиса (а так же десятка других языков) под свои вкусы и нужды, но я этой опцией ни разу не пользовался, ибо вполне устраивают настройки, принятые по умолчанию.

    Но вам никто не мешает это сделать, благо что все предельно просто — выбрать из верхнего меню пункты «Опции» — «Определение стилей», в результате чего откроется окно, где вы сможет сами тонко настроить шрифты и цвета для подсветки Html, PHP или любого другого нужного вам языка.

    Так же в Notepad++ имеется возможность автоматического завершения набираемого вами слова, что может быть очень удобно, если вы не уверены в правильности написания того или иного оператора Html, PHP или любого другого кода. Для этого вам при наборе достаточно нажать сочетание клавиш Ctrl-Пробел и выбрать из открывшегося окна нужный вариант:

    Если хотите сделать автозавершение кода автоматическим, без использования горячих клавиш, то нужно будет выбрать из верхнего меню «Опции» — «Настройки» и на вкладке «Резерв/Автозавершение» поставить галочку в поле «Включить для каждого ввода».

  • Очередной примочкой, которая кажется мне довольно удобной в этом редакторе, является возможность перетаскивания ярлыков документов прямо в окно программы для их открытия (хотя этим вряд ли можно кого-то удивить) и возможность перетаскивать в самом документе выделенный фрагмент кода (левой кнопкой мыши) в нужное вам место.
  • При работе с Notepad++ у вас будет возможность ставить маркеры, которые в нем обзываются заметками, но суть от этого не меняется. В нужной вам строке можете поставить на левом поле щелчком мыши маркер в виде синей точки.

    Для установки маркера (заметки) в редакторе так же можно воспользоваться сочетанием клавиш Ctrl-F2, а для перемещения между проставленными в документе маркерами достаточно будет последовательно нажимать F2 или Shift-F2 для листания заметок в обратную сторону.
    Если вы работаете в этом редакторе с Html файлом, то можете посмотреть как будет выглядеть ваш код в браузере FireFox или IE посредством выбора соответствующих пунктов меню «Запуск». Если нужен другой браузер, то выбираете верхний пункт «Запуск» и отыскиваете в открывшемся окне нужный вам экзешник.

  • Так же имеется возможность записи макросов, которые мне еще не доводилось создавать, но логика их работы довольно проста. Сначала вы записываете его, выбрав из меню редактора пункты «Макросы» — «Старт записи», а затем вставляете записанные макросы в нужное место кода, выбирая их из меню редактора или же воспользовавшись назначенными для них горячими клавишами.
  • Кодировки и работа с файлами в окне редактора Нотепад++

    1. Следует отметить, что этот редактор кода позволяет сохранять и преобразовывать файлы Html, PHP и другие в кодировку UTF-8 (без BOM). Мне это не раз помогало побороть проблему с русской кодировкой при работе с различными сайтами.

    Когда я хотел изменить какую-либо надпись на сайте на русскую, то зачастую получал в результате кракозябры, причиной которых была кодировка Windows-1251, в которой был сохранен исходный файл.

    После того, как исходный файл был преобразован в кодировку UTF-8 (без BOM), кракозябры с успехом трансформировались в обычные русские символы. Т.о. если вы добавляете кириллицу в какие-либо файлы движка, то для ее правильного отображения на сайте нужно будет либо сразу его сохранять в правильной кодировке, либо потом преобразовывать.

    Следует сказать, наверное, пару слов про этот самый BOM. Дело в том, что когда вы работаете с разными текстовыми объектами в обычном блокноте Windows, то при сохранении его в кодировке UTF-8 происходит добавление невидимых символов (BOM), которые могут сказаться впоследствии на работоспособности данного файла (например, PHP может выдавать ошибку).

    Поэтому настоятельно рекомендую не работать с кодировкой UTF-8 в стандартном блокноте, а использовать для этого Notepad++.

  • Если вы захотите распечатать содержимое открытого файла, то на печать будет выведен код не в том виде, в каком вы его наблюдаете в окне программы. Но выбрав из меню «Опции» — «Настройки» вкладка «Печать» вы вольны будете это изменить и выбрать вариант печати подсветки кода цветом, разрешить отображать номера строк, колонтитулы и т.п. вещи:
  • В этом продвинутом текстовом редакторе так же имеется возможность открывать сколь угодно много новых документов, не опасаясь, что вы тем самым захламите панель задач операционной системы. В унисон с современными браузерами, он будет открывать все новые документы не в новом окне программы, а в новой вкладке уже открытого окна.

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

    Ну, и в зависимости от сделанных настроек («Опции» — «Настройки») все открытые перед закрытием Notepad ++ вкладки будут восстановлены при очередном запуске программы (опять же аналогично работе браузеров). Закрывать ненужные можно двойным кликом по ним или размещать их вертикально.
    Кроме привычных операций с вкладками, в этом редакторе можно будет открыть в одном окне сразу две копии одного и того же документа. Это может понадобиться, если нужно проводить работу с документом в разных его частях (где-то посмотреть или скопировать, а куда-то вставить).

    Для активации этого режима вам будет достаточно щелкнуть правой кнопкой мыши по нужной вкладке PHP редактора и выбрать из контекстного пункт «Дублировать в Другом окне».

    Очень удобно то, что сохранив изменения в одной из копий документа, обновится и вторая (т.е. вы не запутаетесь — сохранили ли вы произведенные изменения и в какой именно копии).

  • Так же в нем мне очень нравится встроенный поиск по открытым Html или PHP документам с возможностью замены (некоторые активно используют для этого регулярные выражения, но я к своему стыду их не знаю). Все богатство поиска в этом продвинутом текстовом редакторе можно оценить, просто открыв пункт меню «Поиск». Скриншот смотрите в начале статьи.
  • Вообще, этот текстовый редактор очень много чего взял полезного и удобного из функционала других приложений, за что отдельный респект его разработчикам и тем, кто делает для него плагины, о некоторых из которых сейчас и пойдет речь.

    Использование плагинов в Notepad++

    Напомню, что для установки нового плагина вам достаточно будет выбрать из верхнего меню редактора «Плагины» — «Plagin Manager» — «Show Plagin Manager».

    А в открывшем окне на первой вкладке (из верхнего меню) поставить галочку у нужного плагина и нажать на кнопку «Install».

    После этого окно редактора перегрузится и новый плагин будет доступен в одноименной вкладке. В общем, все проще некуда.


    Какие плагины для Нотепада вам могут понадобиться в работе

    Очень много дополнительных и удобных примочек предоставляет плагин «TextFX», который после установке будет доступен в одноименном пункте верхнего меню редактора. Если у вас еще такого пункта нет, то зайдите в «Плагины» — «Plagin Manager» — «Show Plagin Manager», прокрутите список в первой вкладке вниз и поставьте галочку напротив TextFX Character.

    После его установки редактор перегрузится и в меню появится новый пункт TextFX с множеством выпадающих подпунктов. Например, активация показанной на рисунке опции сильно может облегчить вам жизнь при редактировании или написании Html кода:

    В этом случае, как только вы введете в текстовом редакторе Notepad++ открывающий Html тег, рядом с ним тут же появится парный ему закрывающий тег. На лицо сильная экономия времени и существенное снижение вероятности ошибки из-за незакрытого тега. Однако, меня эта штука раздражает и я ее не использую. Но это нисколько не умоляет ее достоинства.

    Примочек в «TextFX» довольно много, поэтому попробуйте их работу на практике сами и определитесь что именно вам будет удобно и полезно.

    Ну, и продолжая тему вкладок в редакторе стоит упомянуть еще о возможности сравнения двух документов. Сначала этот плагин нужно будет установить через Plagin Manager:

    Для активации режима сравнения документов в Notepad++ вам будет достаточно выбрать из верхнего меню пункты «Дополнения» — «Compare» — «Compare» или нажать Alt+D на клавиатуре. В результате в окне этого блокнота будет открыта активная в данный момент вкладка, а так же вкладка расположенная рядом с ней.

    Для удобства сравнения двух Html или PHP документов, редактор Notepad ++ подсветит для вас различия в них. Для перехода в обычный режим работы с документами нужно в верхнем меню выбрать пункты «Дополнения» — «Compare» — «Clear Results» или нажать Ctrl+Alt+D на клавиатуре.

    Причем, два документа в окне Notepad++ можно будет просматривать как в вертикальном, так и в горизонтальном виде. Для выбора наиболее удобного для вас способа щелкните правой кнопкой по месту их раздела и выберите направление поворота (вправо или влево).

    Кстати, если вы, как и я, в основном используете Notepad++ для редактирования Html или PHP файлов своего сайта, то вам может пригодиться возможность подключаться к нему по FTP напрямую из этого текстового редактора. Мне, правда, как то работа с FileZilla больше по душе, тем более что даже из нее у меня пароли увести умудрились.

    Если вы хотите попробовать работу по FTP через Нотепад, то выберите из верхнего меню пункты «Плагины» — «NppFTP» — «Show NppFTP Window», в результате чего справа откроется окно FTP клиента.

    Для настройки подключения по FTP щелкните по иконке шестеренки, выберите пункт «Profile Setting» и введите данные вашего подключения. Дальнейшая работа мало чем отличается от того, что я писал в статье про FileZilla, которая живет здесь.

  • Если вы установите плагин Customize Toolbar с помощью Plagin Manager, то получите возможность перетасовать, удалить или добавить новые кнопки на панель инструментов этой программы.
  • В начале статьи я упоминал Light Explorer, который добавляет возможность открытия в левой колонке менеджера файлов. Однако, для этой же цели можно использовать и Explorer, который вы найдете в менеджере плагинов.
  • Отличный плагин WebEdit, позволяющий по аналогии с Html редактором Вордпресса обрамлять текст наиболее востребованными тегами заголовков, списков, таблиц и других. Выделяете нужный фрагмент и щелкаете по одной из кнопок на панели инструментов Notepad++.
  • ImgTags — позволяет вставить картинки в виде Html тега IMG с уже прописанными горизонтальным и вертикальным размером (сам их вычисляет, что очень здорово), заготовленным атрибутами ALT и SRC (нужно будет туда еще добавить путь до папки с картинками на вашем сервере).
  • Проверка правописания окне в Нотепад++ с помощью плагинов

    Для подключения проверки грамматики русского языка в редакторе Notepad ++ используется плагин Shell-Checker (из пункта меню «Плагины»), для работы которого вам потребуется скачать словарик русского языка с этой страницы, а при активации данного плагина проверки орфографии — указать путь на вашем компьютере до файла словаря.

    Есть нюансы установки. Сначала нужно будет скачать Full installer, а потом файлик с русским словарем aspell-ru-0.50-2-3.exe. Сначала ставите полный установщик, в мастере которого, лично я, не менял выбранный по умолчанию путь (c:\Program Files (x86)\Aspell\).

    Потом ставите языковой пакет, где сначала в досовском окне придется вводить буковку «y» и нажимать Enter на клавиатуре (хотя, возможно это было только у меня, т.к. я уже ставил GNU Aspell на компьютер до этого):

    Потом уже запустится стандартный мастер установки русского словаря, где я опять же не менял умолчательный путь. Все.

    Теперь перезагружаете Notepad ++ и либо выбираете из меню показанные чуть выше пункты, либо удерживаете на клавиатуре нереальную комбинацию CTRL+ALT+SHIFT+S. В открывшемся окне вы должны будете ввести путь до каталога BIN из папки Aspell:

    Если при установке GNU Aspell и русского словаря путь вы не меняли, то сюда надо будет вставить:

    Ну, или что-то подобное, в зависимости от вашей операционной системы. Все, теперь выделяйте тот текст, в котором вы хотите проверить орфографию, и жмите на CTRL+ALT+SHIFT+S (в настройках горячих клавиш эту комбинацию можно будет сменить — смотрите выше). Появится окно где будет отображена первая найденная ошибка:

    Можно ее будет проигнорировать, либо выбрать подходящую замену из предлагаемых вариантов. Внизу можно сменить язык проверки, если вы установили несколько языковых модулей GNU Aspell. Вот и все.

    DSpellCheck — очень удобное решение на манер предыдущего плагина, ибо в нем тоже используется GNU Aspell и его русский словарь, но вот проверку орфографии он уже делает налету, так же как и во всех современных браузерах. Заходите в менеджер плагинов и устанавливаете его.

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

    Выбираем из выпадающего списка Aspell (если он у вас еще не установлен, то прокрутите чуток вверх эту статью и загрузите модуль вместе с русским языковым пакетом, чтобы установить их в вашу ОС), а чуть ниже указываете путь до файла aspell-15.dll. Еще чуть ниже выбираете язык подключаемого словаря, если вы их ставили несколько, и жмете на Apply.

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

    8 отличных текстовых редакторов для разных платформ

    Бесплатные и платные инструменты, упрощающие работу с текстом.

    1. Microsoft Word

    • Платформы: веб, Windows, macOS, Android, iOS, Windows Phone.
    • Стоимость: бесплатно или 2 699 рублей в год.
    • Русский интерфейс: есть.

    Это один из самых известных в мире текстовых редакторов. А всё потому, что Word простой, содержит много инструментов и пошаговые инструкции.

    Здесь есть и поиск орфографических ошибок, и онлайн-справочник, и сохранение файла в необходимом расширении, и встроенная возможность многооконного режима, и удобные механизмы работы со ссылками и сносками, и вставка и создание рисунков в файле, и много других интересных функций. Некоторыми возможностями можно воспользоваться бесплатно на официальном сайте.

    Шаблоны — одна из главных особенностей редактора. Вы можете создавать не только документ в бумажном формате, но и конверты, письма, брошюры и открытки.

    В Word есть синхронизация через облако OneDrive. Поэтому работать с документами можно на любом устройстве.

    2. Google Документы

    • Платформы: веб, Android, iOS, Windows Phone.
    • Стоимость: бесплатно.
    • Русский интерфейс: есть.

    Отличная альтернатива Word. Текстовый редактор от Google полностью бесплатен и доступен каждому, у кого есть браузер и подключение к интернету.

    Главными особенностями «Документов» можно назвать голосовой ввод, добавление закладок, режим советов при совместной работе, автоматическое сохранение текста и истории правок, а также синхронизацию. Функция поиска в Google позволит вам посмотреть значение слова, не открывая для этого новое окно в браузере.

    Работать в «Google Документах» можно и офлайн. Нужно просто установить расширение для Chrome или мобильное приложение.

    3. LibreOffice Writer

    • Платформы: Windows, macOS, Linux.
    • Стоимость: бесплатно.
    • Русский интерфейс: есть.


    LibreOffice Writer — полностью бесплатный текстовый редактор с открытым исходным кодом, основными функциями напоминающий Word.

    LibreOffice Writer позволяет выкладывать файлы в интернет, предварительно экспортировав их в HTML, а также поддерживает все популярные форматы текстовых документов.

    В арсенал программы входит много разных стилей форматирования. Текстовые структуры и линковка позволяют заниматься вёрсткой информационных бюллетеней, листовок и так далее. Приятными возможностями редактора можно назвать функцию автозавершения, которая предлагает варианты для быстрого ввода слов или фраз, и автоматическое создание оглавления.

    У Writer есть портативная версия. Её можно использовать, не устанавливая программу на компьютер.

    4. iA Writer

    • Платформы: macOS, Windows, Android, iOS.
    • Стоимость: бесплатно для Android, 699 рублей — для iOS, 2 290 рублей — для macOS, Windows. Есть бесплатная пробная версия.
    • Русский интерфейс: нет.

    Этот редактор считается самым минималистичным: лишние кнопки не должны отвлекать от работы. Главная фишка iA Writer — язык разметки Markdown, который любят блогеры и журналисты. Экспортировать документ можно в самые популярные форматы текстовых файлов и даже в HTML. В программе есть и синхронизация между устройствами на macOS и iOS, а также загрузка документов в облако Dropbox.

    iA Writer может похвастаться ночным режимом, созданием CSS-шаблонов и режимом фокусировки, который увеличивает выделенный текст для максимальной концентрации. С помощью программы вы также можете загружать черновики на сайты Medium и WordPress.

    Приложение предлагает 2 недели бесплатного использования.

    Обзор текстовых редакторов для кода

    Содержание статьи

    Не для каждой задачи и не каждого проекта требуется полноценная IDE, поэтому для многих основным инструментом по-прежнему остается любимый текстовый редактор. И кажется, что выбор прост: мощный, расширяемый, но простой Sublime Text, живая классика в лице emacs и vim, а также моноплатформенные фавориты — Notepad++ для Windows, TextMate для OS X и Geany для Linux. Но ведь новые редакторы появляются чуть ли не каждый день — есть ли тебе смысл менять привычки? Давай посмотрим, что происходит.

    Еще в августе 2011 года один из основателей GitHub Крис «defunkt» Уонстрат поставил перед собой амбициозную цель: создать редактор, который был бы по-настоящему открытым и предлагал неограниченные возможности для хакинга, но при этом не превращался бы во второй Vim или Emacs (который, как известно, умеет почти все, но только если у тебя мозги как у Джеффа Дина). И вот спустя три года и более чем пятнадцать тысяч коммитов началось публичное бета-тестирование. В марте этого года Atom стал доступен для загрузки всем желающим. Чем же собирается перевернуть наш подход к кодингу знаменитая компания?

    Первое, что бросается в глаза при запуске нового детища GitHub, — это невероятно похожий на Sublime Text интерфейс. Само по себе это не минус. Известный факт, что интерфейс Sublime был вдохновлен другим, некогда не менее популярным редактором кода для OS X TextMate. Нынешняя история с Atom и Sublime лишь подчеркивает удачные решения GUI последнего.

    Вторая особенность Atom заключается в том, что это, по сути, веб-приложение в обертке Chromium. Нет, конечно, у редактора есть своя иконка в доке, нормальные системные меню и поддержка нативных хоткеев. Просто ядро Atom написано по большей части на CoffeeScript, работает оно на Node.js, а сам интерфейс редактора является HTML-страницей со вполне обычной разметкой. Убедиться в этом можно, если выбрать из меню View пункт Developer -> Toogle developer tools.

    Из коробки Atom сильно напоминает Sublime

    Хакер #185. Докажи баг!

    Третья интересная фишка Atom — его модульность. В лучших традициях экосистемы Node.js он написан с использованием максимального количества открытых модулей (больше пятидесяти). Это значит, что если тебе не нравится какой-то штатный функционал, то, по уверениям разработчиков, ты без труда сможешь подобрать ему замену из более чем 70 тысяч пакетов в npm registry или написать свой плагин. Учитывая, что JavaScript фактически уже давно стал самым популярным языком на GitHub, и у CoffeeScript лишь немного отстает от Perl, это вселяет уверенность в будущее Atom.

    Пакетов еще мало, но написать свой действительно просто

    А что же с киллер-фичами? Вот тут все не так радужно. То ли дело в молодости проекта, то ли еще в чем-то, но Atom, кроме громкого имени создателей и больших надежд, из коробки не предоставляет ничего, что бы могло заставить часами играться с ним. То, что преподносится разработчиками как преимущества (например, автокомплит, вкладки, коллапс кода, снипеты), может вызвать лишь снисходительную улыбку на лицах адептов Sublime. Да, конечно, Atom уже имеет свой пакетный менеджер, но я не нашел в его репозиториях ничего такого, что было бы нельзя реализовать с помощью плагинов для Sublime.

    Light Table

    Разработка Light Table началась в 2011 году, когда американский программист Крис Грейнджер решил, что процесс работы с кодом в современных текстовых редакторах недостаточно хорошо вписывается в современный workflow. Если кратко, задача Light Table — сделать процесс разработки по-настоящему интерактивным и наглядным, давая разработчику моментальный фидбек на любое действие, тем самым помогая быстрее ориентироваться в большом коде. Именно с такой идеей Крис подался на Kickstarter и достаточно быстро собрал на разработку проекта 316 720 долларов при заявленной цели в 200 тысяч. Чем же конкретно идеи Криса так приглянулись бейкерам?

    Одной из самых крутых особенностей Light Table является возможность работать с документацией по ходу написания кода. Чтобы увидеть описание функции, достаточно просто навести на нее курсор. Редактор моментально найдет и выведет документацию по запрошенной функции или параметру (в случае с build-in методами) или покажет prepend-описание функции, оставленное прямо в коде. Чем-то это напоминает автокомплит, который используется в среде разработки Visual Studio от Microsoft, но значительно более глубокий и мощный.

    Второй киллер-фичей можно назвать мгновенное выполнение функций по ходу написания кода. Это позволяет в режиме отладки пробовать различные входные условия и видеть не только результат, но и как переменные проходят через весь код. Тоже достаточно полезная штука, особенно когда ты не уверен в результате выполнения какого-либо участка кода.

    Выбираем интерпретатор, и исполняем inline-код с его помощью

    Третья фишка Light Table — уникальная возможность организации кода в так называемые таблицы. Они представляют собой логически завершенные блоки кода, через которые можно наглядно представить взаимодействие отдельных функций программы. С помощью этой фичи очень удобно разделить файл на несколько независимых блоков-функций и работать с ними, соорудив некое подобие настоящего дашборда из кода. Также приятной особенностью является интеллектуальная подсветка блоков — в этом случае шансы запутаться в и без того наглядном workflow стремятся к нулю.

    Код может быть представлен в виде таблиц

    Несмотря на довольно непривычную философию, Light Table — это, несомненно, редактор нового поколения. Его фишка не в том, что он написан на модных технологиях, а в изменении самого подхода к процессу разработки сложного ПО. Наверное, при работе с простенькими JS-скриптами реальная мощь Light Table не почувствуется, но для проектов чуть посложнее он станет незаменимым инструментом. Нужно только привыкнуть. Но вот это как раз-таки будет непросто.

    Весь Lime можно описать одной-единственной, но известной фразой Бобука — блеск и нищета опенсорса. Проект, начатый в прошлом году Фредриком «quarnster» Энбомом (Fredrik Ehnbom), решает одну-единственную, но понятную задачу: создать опенсорный конструктор по образу и подобию Sublime Text. Причина такого желания понятна — автор, горячий поклонник Sublime, был недоволен вялым развитием проекта и отсутствием банального исправления багов прошлых версий. Идея оказалась близка нескольким десятками единомышленников, и вскоре свет увидела первая версия Lime.

    Первое, что отталкивает при знакомстве с этим редактором, — отсутствие хоть какого-нибудь подобия бинарных пакетов. В целом логика такого решения понятна: Lime — это и не цельное приложение, а набор из отдельного бэкенда на языке Go и пары фронтендов на выбор. Однако легче от этого не становится — попытка с наскока заставить Lime элементарно работать превращается в увлекательную возню с зависимостями Go, конфигами и прочими радостями жизни.

    Lime уже сейчас имеет на выбор два фроентенда. Скоро будет и третий на Dart

    Что касается работы в этом редакторе, на данный момент она откровенно неудобна, и написать здесь о чем-то уникальном, по сути, нечего. Lime пока не может похвастаться даже теми функциями, которые в других текстовых редакторах воспринимаются как должное. Создается впечатление, что разработчики пока уделяют куда больше внимания архитектуре приложения и чистоте кода, чем функционалу. До некоторой степени ситуацию спасает частичная совместимость с API Sublime (ну и некоторых частей TextMate, соответственно), но, несмотря на это, с юзабилити у Lime остаются большие проблемы.

    Несмотря на довольно подробный ман, со сборкой все равно бывают сложности

    В целом на сегодняшний день Lime оставляет двоякое впечатление. Наверное, это здорово, когда твой рабочий инструмент полностью опенсорный и настолько гибкий. Но давай будем честны с собой: скольким из нас когда-либо придет в голову переписать фронтенд своего текстового редактора? Скольким из нас вообще придет в голову заниматься разработкой текстового редактора под себя из-за каких-то неудобств вместо того, чтобы использовать этот инструмент по прямому назначению — а именно писать в нем свои программы? Большинству разработчиков (особенно тем, кто не болен Столлманом головного мозга) за глаза хватит функционала Sublime Text и его системы плагинов для решения повседневных задач. Да и, если честно, за несколько лет ежедневной работы в Sublime я не встречал каких-то сверхкритичных багов, для которых бы не смог найти своего workaround’а. Так что на данном этапе по-настоящему Lime подойдет лишь упертым фанатам опенсорса с огромным количеством свободного времени и желанием сделать этот мир чуточку лучше.

    Brackets от Adobe

    Brackets — достаточно молодой (разработка ведется с 2011 года), но интересный проект от Adobe. Его цель незамысловата — создать минималистичную и комфортную среду разработки, которая бы требовала минимум усилий со стороны девелопера. На моей памяти было уже немалое количество проектов со схожими целями. Давай посмотрим, получилось ли у Adobe с помощью комьюнити сделать что-то интересное и на этом поприще.

    На удивление, Brackets получился весьма неплохим. Все необходимое работает из коробки (после Lime даже это становится в некотором смысле плюсом). Проект действительно решает свою главную задачу — облегчает написание кода, хотя и делает это практически без каких-либо принципиально новых подходов. И кстати, в этом нет ничего плохого.

    Brackets написан на HTML/JS (спасибо, что не Flash или Adobe AIR :)), тесно интегрирован с Node.js. Внешне из коробки производит весьма благоприятное впечатление (правда, не без налета некоторой игрушечности). Что меня подкупило с нажатия первой клавиши — так это потрясающий автокомплит для HTML/CSS/JS/jQuery. Он действительно умный и к тому же содержит множество приятных мелочей (например, встроенный color-picker или тулзу для гуишного подбора transition’ов в CSS).

    Из коробки Brackets очень облегчает жизнь разработчика

    Но главной киллер-фичей для меня стало inline-редактирование связанных участков кода. Это возможность посмотреть и отредактировать, скажем, набор CSS-свойства по его классу или ID-шнику прямо из HTML-файла верстки в отдельной области. Brackets в реальном времени анализирует структуру твоего проекта, строит дерево зависимостей и позволяет писать взаимозависимые участки кода, практически не покидая основного контекста файла. Признаюсь, именно такой функционал я пилил пару лет назад в своем простеньком текстовом редакторе (уверен, не я один). Так что подобная фишка не может не радовать.Из остальных особенностей можно выделить быстрый доступ к документации (правда, не настолько детализированный, как у Light Table), JSLint из коробки и симпатичный менеджер плагинов. Хотя, конечно, таким обилием пакетов, как у Sublime, Brackets пока похвастаться не сможет.

    У Brackets действительно приятный менеджер пакетов

    В целом, несмотря на поддержку в некоторой степени, например, Ruby или Python, Brackets ориентирован в первую очередь на фронтенд разработчиков. Он отлично справится с нуждами верстальщиков, в чем-то оставляя позади даже специализированные IDE. Ничего революционно нового, кроме inline-редактирования кода, ты в нем не найдешь. Однако то, что есть, сделано на совесть и с душой. Если ты преимущественно верстаешь или пишешь клиентский код на не слишком замороченном стеке, вполне возможно, Brackets придется тебе по душе.

    Zed — это довольно хипстерский текстовый редактор, который также пытается переосмыслить современный процесс разработки ПО. Если Light Table пытается изменить сам принцип разработки, то Zed в основном ограничивается экспериментами с интерфейсом. Разработка была начата в 2011 году, и на сегодняшний день на официальном сайте Zed доступен в виде бинарников под основные платформы, а также в качестве приложения для Chrome Web Store.

    Первое, что бросается в глаза при знакомстве с Zed, — отсутствие привычных элементов интерфейса вроде дерева проекта или вкладок. Достаточно спорный шаг, весь зачастую при разработке значительно легче ориентироваться в структуре проекта именно по дереву. Но вот в отсутствии табов некое рациональное зерно есть: обычно при работе с большими проектами количество открытых вкладок разрастается экспоненциально, и уже через полчаса работы приходится постоянно ходить по ним, закрывая то, с чем ты не работаешь в данный момент. В Zed же навигация по проекту осуществляется или с помощью прыжка напрямую к нужному файлу в проекте по его названию ( Ctr/Cmd + E ) через небольшую консоль в верхней части приложения.

    Второй запоминающейся особенностью Zed является упор на многоколоночный интерфейс. Редактор поддерживает несколько фиксированных вариантов сплита рабочего пространства — 50/50%, 25/75% и так далее. Стоит отметить, что вторая (или даже третья) колонка предназначена не только для одновременного редактирования нескольких файлов, но также и для моментального предпросмотра кода на языках, требующих пропроцессинга (таких как Markdown или CoffeeScript).

    При работе с Zed очень чувствуется его ориентированность на удаленное редактирование. Так, из коробки он имеет шикарную поддержку редактирования файлов из Dropbox или напрямую на удаленном сервере и поддерживает сессии. Но вот именно как редактор Zed весьма беден. Его встроенное автодополнение базируется на словаре, он не имеет удобных средств работы с расширениями, не позволяет настроить UI так, как хотелось бы. Хотя, наверное, Zed просто не об этом.

    Из коробки Zed ориентирован на удаленное редактирование

    Кстати, нельзя не отметить, что Zed весьма задумчив. Временами приложение достаточно надолго застывает и теряет всякую отзывчивость, что, конечно, не добавляет удобства к и так довольно необычному экспириенсу.

    Навигация осуществляется с помощью GoTo-панели

    В общем, Zed странный, и он однозначно не для всех. Если ты не заморачиваешься с бесконечной настройкой пользовательского интерфейса, тебе важна переносимость, возможность стабильного редактирования файлов на удаленном сервере и ты готов попробовать что-то необычное, можешь поиграться. Но для повседневного написания кода Zed явно не подойдет.


    Обзор редакторов кода

    Программисты много времени проводят за написанием и отладкой кода. Для того чтобы написать рабочий код хватит простого приложения, которое умеет редактировать текстовое содержимое файла. Но так писать код сложно, долго, и в процессе разработки допускается множество ошибок, которые впоследствии тяжело найти.

    Исправить эти недостатки помогают современные редакторы. В этой статье рассмотрим, как редакторы помогают ускорить процесс разработки и повысить качество кода. А также посмотрим на каждый редактор в отдельности и выясним, чем они отличаются и какие у каждого из них преимущества.

    Существуют как платные редакторы, так и бесплатные. На сегодняшний день наиболее популярные из них:

    Ускорение процесса разработки

    Большинство современных редакторов имеют ряд особенностей, необходимых для разработчика:

    Рассмотрим каждую из них подробнее.

    Подсветка синтаксиса

    Выделение однотипных конструкции отдельным цветом помогает быстрее визуально найти нужный участок кода. Это делает код более читаемым и понятным для разработчика.

    Автоматические отступы

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

    Файл, в котором корректно выставлена вложенность, легко читается, также это даёт программе возможность скрывать блоки кода. Например, чтобы лучше видеть границы участка и случайно не затронуть соседние, можно удобно сгруппировать блоки кода и оставить видимым только тот, который нужен.

    Автодополнение

    Во время разработки часто приходится искать справочную информацию. Благодаря встроенной возможности автодополнения можно не тратить на это время. Программа на ходу анализирует написанный код и предлагает варианты продолжения.

    Также можно быстро получить справочную информацию по нужной конструкции, узнать о количестве аргументов, которые принимает в себя функция и многое другое.

    Разделение рабочей области

    Рабочую область редактора можно разделить на два и более секторов. Например, так можно разделить файл разметки и стилей, для того чтобы не тратить время на переключение между ними.

    Разделение рабочей области.

    Мини-карта

    Для удобной навигации в документе можно использовать миникарту. Обычно она находится в правой колонке и отображает структуру файла. При нажатии на миникарту отобразится нужная часть документа.

    Внешний вид

    Для тех, кто любит настраивать инструмент под себя, в настройках есть множество регулировок: можно изменять размер шрифта, цветовые схемы, правила переноса текста и многое другое. Это поможет сделать процесс разработки ещё комфортнее.

    Проекты

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

    Для разных редакторов выделение проектов даёт дополнительные возможности. К примеру, если создать проект в WebStorm, то программа считает всё содержимое директории проекта. После анализа редактор будет выдавать подсказки, такие как ссылка на несуществующий файл.

    Проекты в редакторе.

    Такой анализ даёт возможность безопасно проводить рефакторинг кода, удалять файлы и прочее.

    Интеграция приложений

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

    Обогатить функциональность можно через добавление плагинов. Рассмотрим некоторые подобные возможности.

    Система контроля версий

    Работать с системой контроля версий для разработчика — обычное дело. Часто все команды прописываются и выполняются через консоль. Для ускорения процесса разработки часть рутинных операций, такие как push , pull , commit и другие можно выполнять через редактор.

    Помимо этого, программа может подсказать, в каких местах были произведены изменения, и как поменялся код по сравнению с предыдущей версией.

    Также в удобной форме можно посмотреть: историю коммитов, кто, когда и как изменял файлы и многое другое.

    К примеру, через Atom или WebStorm можно сделать commit изменений, выполнить push в удалённый репозиторий и после создать pull request в сервисе GitHub. И все эти действия делаются в рамках редактора.

    Возможности редактора при работе с Git.

    Emmet

    Во многие редакторы по умолчанию встроен плагин emmet. С его помощью можно из короткой строки развернуть большой кусок кода.

    Используя подобную технику можно в разы ускорить написание разметки.

    Консоль

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

    Дебаггер

    Ещё один удобный инструмент — встроенный дебаггер, позволяющий отлаживать код. Можно выставлять точки останова и искать, в каком месте программы происходит неожиданное поведение.

    Единый стиль написания кода в команде

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

    • Через editorconfig можно прописать часть настроек для редактора. Например, выбрать, с помощью чего производить отступы — табы или пробелы, указать тип окончания строк и прочее;
    • Через плагин eslint редактор на лету может проверять JavaScript код на соответствие заданным правилам. В случае ошибки редактор укажет на место, где была допущена ошибка и расскажет, какое правило нарушено.

    Единый стиль кода.

    Библиотека плагинов

    Какая-то часть из вышеперечисленного по умолчанию встроена в редакторы, а какую-то нужно добавлять, устанавливая плагины. У всех программ, которые рассматриваются в этой статье, есть возможность интегрировать плагины непосредственно в среду разработки.

    Также большое значение имеет количество людей, которое использует редактор. Чем популярнее приложение, тем больше сторонние разработчики создают и обновляют плагины для него. А это, в свою очередь, положительно сказывается на опыте использования инструмента конкретным пользователем.


    Горячие клавиши

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

    Sublime Text 3

    Скачать редактор с официального сайта можно здесь.

    Расширения для редактора

    Для Sublime Text 3 написано множество пакетов, которые делают работу в редакторе более комфортной. Далее рассмотрим ряд таких расширений и посмотрим, как их устанавливать в программу.

    Для того чтобы добавить пакет, нужно открыть интерфейс для ввода команд. Сделать это можно через пункт меню Tools → Command Palette или вводом горячих клавиш command (control) + shift + p . После этого в интерфейсе для ввода команд нужно выбрать пункт Package Control: Install Package

    После этого программа покажет список пакетов. Здесь можно выбрать и установить нужный пакет. Посмотреть подробное описание каждого расширения для Sublime Text 3 можно на сайте Package Control.

    Установка расширений в Sublime Text 3.

    Условно пакеты можно разделить на несколько типов.

    Ускоряющие разработку:

    • Emmet. Плагин, ускоряющий написание разметки и стилей.
    • BracketHighlighter. Дополнительно добавляет подсветку границ скобок, элементов и прочего. Помогает лучше ориентироваться в коде.

    Добавляющие функциональность:

    • SideBarEnchacements. Увеличивает количество действий, которое можно сделать в боковой панели при работе с файлами и папками.
    • Sublime​Code​Intel. Делает редактор «умнее». Добавляет автодополнение для разных языков и другие полезные возможности.
    • Git и GitGutter. Добавляют интеграцию с системой контроля версий Git в редактор.
    • EditorConfig. Полезный пакет для настройки параметров редактора.

    Проверяющие синтаксис:

    Сперва для редактора следует установить пакет SublimeLinter. Также на компьютере должен быть установлен Node.js. После этого нужно установить интересующие плагины для проверки. В большинстве они называются SublimeLinter-нужный пакет . Например:

    • SublimeLinter-eslint. Проверяет JavaScript-код. Для работы нужно глобально установить npm-пакет eslint . Подробнее в инструкции по ссылке.
    • SublimeLinter-stylelint. Проверяет CSS. Для работы нужно глобально установить npm-пакеты: postcss и stylelint .

    Изменяющие внешний вид:

    Если недостаточно стандартных встроенных тем, то можно установить дополнительные. Примеры тем можно посмотреть на официальном сайте.

    Продукт, произведённый командой GitHub Inc. Приятный на вид, кроссплатформенный бесплатный редактор. Имеет встроенную интеграцию с Git и GitHub.

    Скачать с официального сайта можно здесь.

    Расширения для редактора

    Для того чтобы установить пакет в Atom, нужно перейти в настройки редактора и выбрать пункт Install . После этого в поле ввода нужно ввести название интересующего расширения.

    Установка расширений в Atom.

    Список популярных расширений можно посмотреть на официальном сайте.

    Условно плагины можно разделить на несколько типов.

    Ускоряющие разработку:

    • Emmet. Плагин, ускоряющий написание разметки и стилей.

    Добавляющие функциональность:

    • Minimap. Добавляет поддержку миникарты в Atom.
    • PlatformIO IDE Terminal. Встраивает терминал в редактор.
    • Atom-Beautify. Форматирует текст по заданным настройкам и приводит его к единообразию.
    • Editorconfig. Полезный пакет для настройки параметров редактора.

    Проверяющие синтаксис:

    Для того чтобы редактор мог подсвечивать найденные ошибки, нужно установить плагин Linter. После этого нужно выбрать плагин, который добавляет проверку для конкретного языка. Например:

    Изменяющие внешний вид:

    • File Icons — заменяет стандартные иконки файлов.
    • Кастомные темы для Atom на официальном сайте.

    Visual Studio Code

    Бесплатный кроссплатформенный редактор компании Microsoft. Является одним из самых популярных редакторов на данный момент. Скачать можно здесь.

    В базовой версии есть интеграция с Git и режим отладки кода. Поддерживает, в том числе и через дополнения, большое количество языков.

    Расширения для редактора

    VS Code в базовой версии содержит большое количество плагинов. К примеру, консоль, emmet и мини-карта в нём присутствуют с самого начала. Добавить новые пакеты можно через интерфейс программы. Для этого во вкладке активного меню нужно выбрать пункт extensions и в поле ввода ввести интересующий плагин. После этого его можно установить.

    Установка расширений в VS code.

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

    Добавляющие функциональность:

    • Для удобной работы с системой контроля версий Git можно добавить плагины Git History и GitLens.
    • Project Manager — добавляет редактору возможность работать с несколькими проектами.
    • Settings Sync — синхронизирует настройки и установленные плагины между программами на разных компьютерах.
    • Beautify — форматирует текст по заданным настройкам и приводит его к единообразию.

    Проверяющие синтаксис:


    • ESLint — проверяет JavaScript код по заданным параметрам.
    • vscode-stylelint — проверяет CSS.

    Изменяющие внешний вид:

    • Vscode-icons — заменяет стандартные иконки файлов.
    • Посмотреть на кастомные темы для Vscode можно на официальном сайте.

    WebStorm

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

    Продукт платный и доступен к использованию по подписке, установить и оформить подписку можно здесь. Каждый из продуктов отвечает за определённую сферу. WebStorm, к примеру, больше подходит для фронтенд-разработки, а PHPStorm — для написания серверного кода на языке PHP.

    Расширения для редактора

    Из коробки редактор поддерживает большинство возможностей, которые рассматривались в этой статье. Однако, при необходимости можно обогатить функциональность программы через добавление расширений.

    Это можно сделать через Настройки → Plugins . В этом меню отобразятся все плагины, которые установлены в программе.

    Установка расширений в WebStorm.

    Установить новые можно через пункт Install Jetbrains plugin . Из интересных можно выделить:

    Вывод

    У всех редакторов, которые мы рассмотрели, есть свои особенности и преимущества. При выборе программы стоит отталкиваться от задачи.

    Если для работы важна скорость редактора, то тут лучшим выбором будет Sublime Text. Он легковесный и мало тратит ресурсов компьютера.

    Если приоритетно удобство или вы совсем новичок в разработке, то тут хорошо подойдёт Atom. У него приятный интерфейс и хорошо проработана интеграция с сервисами Git и GitHub.

    Для опытных разработчиков отличным решением будет WebStorm. Программа требует минимальных настроек для комфортной разработки и обладает богатой функциональностью.

    Некоторой золотой серединой выступает VS Code. C одной стороны, он из коробки обладает большим количеством возможностей, с другой — интуитивно понятный и легко настраиваемый. При этом программа достаточно быстро работает.

    Так как при разработке очень много времени приходится проводить в редакторе, стоит хорошо изучить его особенности, понять, что он умеет делать и как может помочь решить типовые задачи.

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

    12 лучших Windows и Mac текстовых редакторов для редактирования файлов WordPress

    Всем доброе утро! Меня частенько спрашивают, какой текстовый редактор лучше всего подходит для верстки файлов WordPress?

    Конечно, вы можете пользоваться стандартным текстовым редактором наподобие Блокнота, но есть масса других редакторов, где доступны такие функции как подсветка синтаксиса, расширенный поиск и замена, интеграция с FTP и многое другое, именно поэтому я решил сделать обзор 12-ти лучших текстовых редакторов, которые подходят для пользователей Mac и Windows.

    Notepad++

    Notepad ++ — это бесплатный текстовый редактор с открытым кодом для пользователей Windows. Он прост и понятен даже новичкам, но при этом достаточно функционален даже для самых продвинутых пользователей. Здесь есть подсветка синтаксиса с поддержкой многих языков, включая PHP, JavaScript, HTML, CSS. В редактор встроен FTP-плагин, который позволяет подключиться к серверу и редактировать файлы непосредственно, не выходя из редактора.

    TextWrangler

    TextWrangler – это, можно сказать, облегченная версия очень популярного текстового редактора BBEdit. Данный бесплатный редактор мощный и многофункциональный. Здесь достаточно интуитивный пользовательский интерфейс, так что просмотр файлов и работа над проектами не доставит хлопот. TextWrangler оснащен продвинутым инструментом поиска и замены, в нем можно напрямую редактировать и сохранять файлы в FTP и SFTP серверы. Здесь также доступна функция подсветки синтаксиса для многих языков программирования; он полностью поддерживает UTF-8 и даже позволяет конвертировать кодировку символов текстовых документов.

    Coda, пожалуй, один из самых любимых веб-разработчиками текстовых редакторов для Mac. Он славится своим смехотворно красивым интерфейсом и мощными продуманными функциями. Через Coda можно редактировать локальные или удаленные файлы, управлять проектами, работать с несколькими файлами одновременно, легко переключаясь между вкладками. Редактор оснащен терминалом, отладчиком, набором предварительного просмотра и инспектирования и многими другими удивительными функциями.

    Стоимость одной лицензии для Coda $ 99, но он, поверьте, того стоит.

    Sublime Text

    Sublime Text – это кросс-платформенный текстовый редактор, подходящий для пользователей Mac, Windows и Linux. Здесь есть все функции, которые ждешь от мощного редактора, и даже много других дополнительных и не совсем обязательных.

    У Sublime Text очень милый интерфейс, впрочем, вы можете его настроить под свои нужды и вкусы. Здесь есть расширенные функции редактора кода, которые позволяют делать автозаполнение, автодополнение, вызов контекстного меню, множественный выбор, сплит редактирование и многое другое.

    Доступны трехпользовательская и однопользовательская лицензия стоимостью в $70. Пользуюсь сам и рекомендую, очень приятно работать в этом редакторе кода. Советую!

    TextMate

    TextMate – это что-то вроде операционной системы Apple, но только в мире текстовых редакторов. Это простой, многофункциональный редактор для Mac. Обладает эргономичным интерфейсом, продвинутыми функциями поиска и замены, автодополнением, складными блоками кода – и это лишь малая часть доступных функций. Стоимость редактора $60, но можно найти версию и для бесплатного скачивания.

    Atom – это профессиональный кросс-платформенный текстовый редактор с открытым исходным кодом. Также как и в WordPress здесь можно отправлять пакеты и темы для программного обеспечения. У редактора симпатичный интерфейс, который, впрочем, можно изменить, установив нужную тему. Оснащен встроенным менеджером пакетов, умным автодополнением, файловым браузером, мульти окнами, функцией найти и заменить.

    BBEdit

    BBEdit – это замечательный текстовый и HTML редактор для Mac. Здесь есть все необходимые функции мощного редактора. Подсветка синтаксиса, Расширенный поиск и замена, автодополнение, быстрый поиск, несколько вкладок, разделяемые окна редактирования и многое-многое другое.

    Стоимость редактора BBEdit $ 49.99, но бесплатно можно скачать пробную версию.

    UltraEdit

    UltraEdit – это мощный текстовый и HTML редактор, подходящий для пользователей Mac, Windows, и Linux. Одни из доступных функций – автодополнение, запись и воспроизведение макросов, закладки, блочное выделение и редактирование текста, подсветка синтаксиса для наиболее популярных языков программирования.

    Стоимость редактора $79.5. Можно также найти и бесплатные пробные версии.

    Vim – это один из мощнейших текстовых редакторов с открытым исходным кодом; подходит для пользователей Mac, Windows и Linux. Является усовершенствованной и обновленной версией редактора Vi, обладает огромным количеством функций. Он настолько мощный и многофункциональный, что его по праву сравнивают с IDE, т.е. с системой программных средств, которая используется для разработки программного обеспечения.

    Brackets

    Brackets был разработан компанией Adobe для того, чтобы вынести текстовые редакторы на новый уровень. Его позиционируют как продвинутый текстовый редактор, понимающий веб-дизайн. Редактор открывает PSD-файлы, что упрощает и ускоряет процесс написания кода. Это бесплатный кросс-платформенный редактор с открытым исходным кодом, подходящий для пользователей Mac, Windows и Linux.

    CoffeeCup HTML Editor

    CoffeeCup HTML Editor – это простой в использовании HTML редактор для Windows. Он поддерживает PHP, HTML, Markdown, CSS. Здесь есть такие функции как автодополнение, проверка синтаксиса, семантический код и многое другое. Скажу сразу, это далеко неидеальный текстовый редактор для многих языков программирования, но если вы хотите освоить и поднатореть в работе с

    PHP, HTML и CSS, то редактор Coffee Cup HTML это то, что вам нужно. Стоимость $69 с ограниченной бесплатной пробной версией для скачивания.

    Espresso

    Espresso – это программа для веб-разработчиков, работающий на Mac. Она оснащена мощным текстовым редактором и CSSEdit. Здесь очень симпатичный интерфейс и множество таких продвинутых функций как перетащить и вставить фрагмент кода, свертывание кода, навигатор, live-редактирование и X-ray просмотр. Стоимость $75.

    Надеюсь, моя статья помогла вам определиться с лучшим текстовым редактором. Возможно, вам также будет интересно почитать статью — программы необходимые для работы в интернете.

    Если вам понравилась статья, то не забывайте с ней делиться. Всем приятного изучения и увидимся в следующих выпусках. А пока..

    Цукерберг рекомендует:  5 плагинов и советов для более безопасного блога
    Понравилась статья? Поделиться с друзьями:
    Все языки программирования для начинающих