Краткий список WYSIWYG редакторов / Habr
Однажды мне потребовался WYSIWYG редактор, я помнил как он выглядит, его функции, но не помнил названия. Через 45 минут я все же его нашел… Тогда я поставил перед собой задачу помочь многим, в том числе и себе: сделать сводный список всех чуть более известных WYSIWYG редакторов.
Вступление
Данный топик представляет собой обширный список визуальных редакторов, почти или частично пригодных для использования. Цель, которой я руководствовался, заключался в том, чтобы систематизировать существующие данные, разбросанные по интернету.
TinyMCE
Один из самых распространенных визуальных редакторов, обладает недюжинным функционалом. Есть множество дополнений, по умолчанию установлено множество плагинов.
(Браузеры: Mozilla 1.3+, MSIE 5.5+, Opera 9.0+, Safari, Chrome)
[Официальный сайт | Демо]
CKeditor
Полный аналог TinyMCE.
(Браузеры: Firefox 1.5+, Opera 9.50+, Safari 3.0+, Camino 1.0+, Internet Explorer 5.5+, Google Chrome)
[Официальный сайт]
CLEditor
Незамысловатый визуальный редактор, особенных функционалом не балует. Но сделан вполне добротно, качественно реализованы все функции.
(Браузеры: Firefox 1.5+, Opera 9.50+, Safari 3.0+, Camino 1.0+, Internet Explorer 5.5+, Google Chrome)
[Официальный сайт]
NicEdit
Редактор очень похож на CLEditor. Обладает стандартным функционалом.
(Браузеры: Firefox 1.5+, Opera 9.50+, Safari 3.0+, Internet Explorer 5.5+, Google Chrome)
[Официальный сайт]
elRTE
Очень качественный визуальный редактор. Обладает широким функционалом. Сделан очень качественно.
(Браузеры: Firefox 3.5+, Opera 10+, Safari 3.0+, Internet Explorer 7+, Google Chrome)
[Официальный сайт | Демо]
Spaw
Очень средний визуальный редактор. Обладает стандартным функционалом.
(Браузеры: Firefox 1.5+, Opera 9+, Safari 3.0+, Internet Explorer 5.5+, Google Chrome)
[Официальный сайт | Демо]
Xinha
Неплохой визуальный редактор, отличительная особенность — множество встроенных action’ов. Т.е. настроить его под свои нужды не составит трудностей.
(Браузеры: Firefox 1.5+, Opera 9+, Safari 3.0+, Internet Explorer 5.5+, Google Chrome)
[Официальный сайт | Демо]
Imperavi (Платный)
Достаточно милый редактор, функционал не большой, но его вполне хватает. Существует ряд ошибок связанных с переходом от html к визуальному редактору и обратно. (убираются align’ы) Важно заметить, что Imperavi работает как плагин к JQuery.
Имеется неплохая документация.
(Браузеры: Firefox 1.5+, Opera 9+, Safari 4+, Internet Explorer 7+, Google Chrome)
[Официальный сайт | Демо]
Markitup
Markitup больше похож на удобный редактор html, который больше подойдет профессионалу, нежели рядовому пользователю. Но если вы знаете html, то он может оказаться вполне удобным.
(Браузеры: Firefox 3+, Opera 9+, Safari 3+, Internet Explorer 6+, Google Chrome)
[Официальный сайт | Демо]
Aloha Editor
Неплохой редактор, очень удобен. Однако существует огромный минус, который затмевает почти все плюсы — это отказ от поддержки старых и не очень браузеров (доступны только последние версии браузеров).
(Браузеры: Требуется поддержка HTML5, Opera не поддерживается)
[Официальный сайт | Демо]
Mercury editor
Mercury представляет собой цельную веб-страницу, и может быть использован для редактирования целой страницы или отдельных определенных областей. Он поддерживает функцию предварительного просмотра отредактированного содержимого, а также размещение ссылок, изображений, видео и таблиц. Загрузка файлов может быть осуществлена посредством интерфейса drag’n’drop.
Редактор также поддерживает совместную работу нескольких человек. Mercury может быть установлен в качестве отдельного Rails, либо за счет внедрения в код страницы. (Требуется JQuery)
И минус в том, что поддерживаются только следующие браузеры: Chrome 10+, Safari 5+, Firefox 4+.
[Официальный сайт | Демо на главной странице]
YUI Rich Text Editor
Визуальный редактор от Yahoo. Как справедливо заметил sdevalex, один из лучших визуальных редакторов. Обладает исчерпывающим функционалом, поддерживает подавляющим большинством браузеров.
[Демо]
MooEditable
Набор функций сильно ограничен, однако порой больше и не требуется.
OpenWysiwyg
Кросс-браузерный полноценный редактор со всеми требуемыми функциями. Он даже включает в себя привлекательные выпадающие меню и кнопки. К сожалению, Chrome не будет поддерживать его.
(IE 5.5+, Firefox 1.0+, Mozilla 1.3+ and Netscape 7+)
[Официальный сайт | Демо]
html-5-wysiwyg
Визуальный редактор на HTML5 со всеми вытекающими из этого последствиями. По большей части, редактор является демонстрацией возможностей HTML-5, нежели готовым продуктом.
(Как следует из названия, требуется поддержка HTML5)
[Страничка на code.google.com]
jWysiwyg
Леговесный плагин для jquery.
[Официальный сайт | Демо]
Реформатор
Визуальный редактор от студии Артемия Лебедева.
[Официальный сайт | Демо]
Итог
Надеюсь топик окажется вам полезным. Если вы нашли, что какой-либо визуальный редактор отсутствует, всенепременно напишите мне об этом, я буду вам очень благодарен.
UPD 0: поправил название
UPD 1: дополнил описание YUI Rich Text Editor (спасибо sdevalex).
UPD 2: добавил jWysiwyg (спасибо mr47).
UPD 3: добавил Реформатор (спасибо kuber).
UPD 3: добавил Реформатор (спасибо kuber).
UPD 4: исправлено: Imperavi стал платным
P.S: 1. если какой не назвал, пишите, исправлю. 2. Если топик не актуален, напишите, уберу.
habr.com
WYSIWYG визуальные редакторы » Скрипты для сайтов
Подборка WYSIWYG редакторов, которые вы можете использовать на своих сайтах. Надеюсь подборочка придется вам по вкусу. Присутствуют редакторы использующие jQuery.
CKEditor
Один из самых популярных и развивающихся редакторов, продолжатель редактора FCKEditor запущенного в 2003 году. Редактор был перезапущен в 2009 году с названием CKEditor с совершенно новым дизайном. За годы появилось много плагинов, как для самого редактора, так и для CMS систем, в которые он бы просто интегрировался.
CKEditor редактор с открытым исходным кодом, но можно и приобрести лицензии стоимостью от 99$ для тех. поддержки.
Большое, активное сообщество разработчиков.
Сейчас есть две версии 4 и 5-я.
CKEditor 5 — можно сказать новый редактор, переписан по новой MVC архитектуре на ES6 языке.
Сайт | Демо | Документация | Скачать готовый | Собрать свой редактор
TinyMCE
TinyMCE — это визуальный редактор с открытым исходным кодом, с плагинами и профессиональной тех. поддержкой за отдельную плату. Активное сообщество и подробнейшая документация позволит вам без труда быстро начать работу с этим редактором.Более 5000 звезд на Github
Сайт | Демо | Скачать | Github
Froala Editor
Редактор Froala платный, ценник начинается с 99$, что включает бесплатные обновления за год. Однако можно скачать редактор с минифицированным кодом, и по тестировать его на этапе разработки. Froala включает в себя гибкий API, возможности расширения за счет более 30 плагинов.Сайт | Демо | Документация | Скачать
Quill
Quill дебютировал, как полноформатный редактор с открытым исходным кодом с версией 1.0.0 в 2016 году, и с того момента уже собрал на Github более 18000 звезд. Развивается. Может похвастаться современным пользовательским интерфейсом, а также поддержкой всех современных браузеров и новых версий iOS и Android.AlloyEditor
AlloyEditor построен на базе CKEditor. Идея заключалась в том, чтобы отделить ядро (CKEditor) от пользовательского интерфейса. Это означает, что вы получаете полную мощь CKEditor с современным пользовательским интерфейсом, который может быть полностью настроен. Подробная документация охватывает все возможности вариантов использования,полную информацию обо всех функциях и API.Более 800 звезд на Github
Сайт | Демо | Скачать
Trumbowyg
Легкий jаvascript редактор визуального кода, всего 20kB. Приятный дизайн, хорошее API, локализация. Более 2300 звезд на GithubСайт | Демо | Скачать
Medium Editor
Инлайновый визуальный редактор. При выделении текста, всплывает toolbar с доступными кнопками редактирования. Доступны плагины расширения функционала от сообщества разработчиков. Весит всего 28Кб и написан на чистом jаvascript.Более 12200 звезд на Github
Сайт | Демо | Скачать
SummerNote
Простой редактор с поддержкой Bootstrap или без него. Более 7000 звезд на Github.Сайт | Демо | Скачать
CLEditor
Проект не развивается с 2014 года.Сайт | Демо | Скачать
HtmlBox
Сайт | Демо | Скачать
jHtmlArea — WYSIWYG HTML Editor for jQuery
Сайт | Демо | Скачать
jQuery WYSIWYG Rich Text Editor
Lightweight Rich Text Editor (RTE / WYSIWYG) для jQuery
Сайт | Демо | Скачать
markItUp! universal markup jQuery editor
Сайт | Демо | Скачать
NicEdit
Сайт | Демо | Скачать
openWYSIWYG
Сайт | Демо | Скачать
Web Wiz Rich Text Editor (RTE)
Сайт | Демо | Скачать
Whizzywig web based rich text editor
Сайт | Демо | Скачать
WYMeditor
Сайт | Демо | Скачать
Xinha
Сайт | Демо | Скачать
pcvector.net
9 лучших WYSIWYG HTML редакторов 2016 года
75.7KВизуализация кода уже давно не является приоритетной задачей для разработчиков. В этой статье приводится список из 9 WYSIWYG редакторов, которые используются для этих целей. Рекомендуем ознакомиться с ним на тот случай, если при реализации вашего проекта возникнет подобная задача.
В этом разделе статьи вы найдете несколько замечательных редакторов, которые сделают вашу работу проще и быстрее. А какой же лучший из них?
Выбор редакции: Atom.io
Если бы мы могли порекомендовать вам только один инструмент, мы бы выбрали этот…
На протяжении многих лет было создано много редакторов, но лишь немногие из них остались на высоком уровне или становились еще лучше. Atom.io используется всеми моими друзьями программистами, и я тоже выбираю его.
Если вам нужен лучший редактор HTML WYSIWYG, который в 10 раз сократит время, затрачиваемое на составление кода или его редактирование, то это Atom. Попробуйте его, и вы будете мне благодарны. Atom.io является бесплатным, и он создан командой Github.
Еще один инструмент, заслуживающий похвалы — это Coda, очень крутой редактор для пользователей Mac. У него совершенный и красивый интерфейс, но он стоит $ 99. В данный момент я отдаю предпочтение Atom!
Теперь обзор остальных редакторов.
Демо-версия | Скачать
NicEdit является альтернативой более объемным и сложным визуальным редакторам, он имеет небольшой размер. Также он может похвастаться многими необходимыми для редактора функциями, и этот WYSIWYG редактор онлайн легко интегрировать на сайт.
Демо-версия | Скачать
TinyMCE — это WYSIWYG HTML редактор с открытым исходным кодом, написанный на JavaScript. Он легко интегрируется и легко настраивается с помощью тем и плагинов. TinyMCE является одним из наиболее «полных» редакторов, предлагающих функционал, похожий на MSWord.
Демо-версия | Скачать
CKEditor — это обновленная версия FCKEditor, который ранее был лидером отрасли. В его основу было положено стремление исправить ошибки FCKEditor. Результатом стал визуальный редактор с высокой производительностью, который предлагает функции редактирования, сравнимые по своему уровню с MSWord и Open Office.
Демо-версия | Скачать
WYSIWYG редактор для сайта YUI Rich является элементом управления интерфейса от Yahoo, он превращает простую текстовую панель в полнофункциональный WYSIWYG-редактор. Инструмент поставляется в нескольких версиях различного уровня сложности и с различными функциями, но в каждой из них авторам удается добиться отличной эргономики (без нагромождения кнопок, засоряющих интерфейс).
Демо-версия | Скачать
Markitup – JQuery-плагин, который позволяет превратить текстовые области в редакторы разметки по вашему усмотрению. Синтаксис HTML, Wiki и BBcode — это всего лишь некоторые из поддерживаемых опций. Markitup не является WYSIWYG-редактором, но это не значит, что он не предлагает все необходимые функции. Также он компактный и простой в работе.
Демо-версия | Скачать
FreeTextBox — онлайн HTML редактор WYSIWYG, специально предназначенный для ASP.NET. Внешний вид редактора очень похож на Microsoft Word. В бесплатной версии не реализовано несколько продвинутых функций, но и доступного набора более чем достаточно для полноценной работы.
Демо-версия | Скачать
MooEditable предоставляет простой, но эффективный функционал, который реализован на основе хорошо написанной JavaScript-библиотеки. Если вы поклонник Mootools, то не будете иметь с этим никаких проблем.
Демо-версия | Скачать
OpenWYSIWYG — это кроссбраузерный простой WYSIWYG редактор со всеми необходимыми функциями. Он имеет красивый пользовательский интерфейс, включающий в себя всплывающие элементы и кнопки. Одной из его отличительных особенностей является качественно реализованная работа с таблицами. В то же время, в Google Chrome OpenWYSIWYG до сих пор не поддерживается.
Демо-версия | Скачать
jHtmlArea — это еще один WYSIWYG-редактор, разработанный как плагин для популярной библиотеки JQuery. Он прост в использовании, и содержит только самые необходимые опции. Это позволяет очень легко настраивать все его компоненты: от внешнего вида до языка.
Если вы уже использовали один из перечисленных в этой статье инструментов или знаете лучший WYSIWYG редактор, напишите об этом в комментариях. Мы хотели бы узнать ваше мнение по этому поводу!
Данная публикация представляет собой перевод статьи «10 Best WYSIWYG HTML Editor Collection From 2016» , подготовленной дружной командой проекта Интернет-технологии.ру
www.internet-technologies.ru
Текстовый редактор для сайта — wysihtml5 | XoZblog
Здравствуйте, уважаемые читатели XoZbloga! В этой статье расскажу Вам о wysihtml5 — текстовом редакторе для сайта с открытым исходным кодом. wysihtml5 использует сложные концепции безопасности и стремится создать правильную и чистую разметку HTML5, предотвращая добавление ненужных тегов и встроенных стилей, которыми так часто грешат другие текстовые редакторы. В тоже время очень быстрый и легкий в работе. Поддерживается даже речевой ввод для Chrome! Одним словом хороший текстовый редактор, который можно настроить для своих нужд!
Советую сразу скачать исходники с github, я качал последнюю версию 0.3.0 там в архиве есть папочка website с аналогичным редактором как в демо. Просто так сразу будет наглядней. Предлагаю просто рассмотреть как же просто подключается и настраивается wysihtml5.
Шаг 1: Подключение скриптов
Для начала использования данного текстового редактора скачиваем исходные файлы, создаем отдельную директорию на своем сайте (например path-to-wysihtml5), и заливаем их туда. После в той странице где намечается присутствие редактора подключаем 2 файла:
1 | <!— wysihtml5 анализатор правил —> |
Шаг 2: Создание тулбара (кнопок)
Теперь можно наладить кнопки редактора. Достаточно большой выбор различных команд форматирования текста. Вот здесь полный список, и способ их настройки. Тулбар должен иметь свой идентификатор, чтобы можно было настроить доступ для JavaScript
1 | <div> |
Шаг 3: Создание текстовой области (textarea)
Все, теперь уже можно и текстовую область вставить, которую wysihtml5 преобразует в текстовый редактор. Область должна иметь свой идентификатор, чтобы можно было настроить доступ для JavaScript:
1 | <form><textarea placeholder=»Введите текст и отредактируйте его…» autofocus></textarea></form> |
Шаг 4: Инициализация редактора
Здесь мы отмечаем в качестве параметров id текстовой области и панель с кнопочка (тулбар). Однако есть и другие параметры.
1 | <script> |
Вот так вот интегрируется wysihtml5. Теперь «если что» буду им пользоваться. Понравился ли Вам этот редактор? Может Вы знаете подобные текстовые редакторы, оставляйте комментарии!
Чтобы оставаться в курсе свежих статей и уроков подписывайтесь на страницу ВКонтакте или подпишитесь на почтовую рассылку. Если статья Вам понравилась сделайте пожалуйста tweet или like — поделитесь с друзьями 🙂 Спасибо за прочтение. До связи!
P.S.: Энергосбережение все глубже входит в нашу повседневную жизнь. Одним из основных направлений в области сбережения электроэнергии является освещение жилых домов. Тут Вы сможете найти подходящие светодиодные лампы для дома. Большой выбор, доступные цены и доставка по всей России.
Источник статьи/урока: http://xozblog.ru
Правила перепечатки
Чтобы оставаться в курсе свежих статей и уроков подписывайтесь на еженедельную почтовую рассылку или на новостную ленту RSS. Спасибо!
xozblog.ru
Обзор редакторов кода — Блог Академии — HTML Academy
Программисты много времени проводят за написанием и отладкой кода. Для того чтобы написать рабочий код хватит простого приложения, которое умеет редактировать текстовое содержимое файла. Но так писать код сложно, долго, и в процессе разработки допускается множество ошибок, которые впоследствии тяжело найти.
Исправить эти недостатки помогают современные редакторы. В этой статье рассмотрим, как редакторы помогают ускорить процесс разработки и повысить качество кода. А также посмотрим на каждый редактор в отдельности и выясним, чем они отличаются и какие у каждого из них преимущества.
Существуют как платные редакторы, так и бесплатные. На сегодняшний день наиболее популярные из них:
Ускорение процесса разработки
Большинство современных редакторов имеют ряд особенностей, необходимых для разработчика:
Рассмотрим каждую из них подробнее.
Подсветка синтаксиса
Выделение однотипных конструкции отдельным цветом помогает быстрее визуально найти нужный участок кода. Это делает код более читаемым и понятным для разработчика.
Подсветка синтаксиса.Автоматические отступы
При написании кода не хочется самому после переноса строки отбивать нужную вложенность. К счастью, этот процесс зачастую автоматизирован. При переносе строки программа автоматически выставит уровень вложенности.
Файл, в котором корректно выставлена вложенность, легко читается, также это даёт программе возможность скрывать блоки кода. Например, чтобы лучше видеть границы участка и случайно не затронуть соседние, можно удобно сгруппировать блоки кода и оставить видимым только тот, который нужен.
Автоматические отступы.Автодополнение
Во время разработки часто приходится искать справочную информацию. Благодаря встроенной возможности автодополнения можно не тратить на это время. Программа на ходу анализирует написанный код и предлагает варианты продолжения.
Также можно быстро получить справочную информацию по нужной конструкции, узнать о количестве аргументов, которые принимает в себя функция и многое другое.
Автодополнение.Разделение рабочей области
Рабочую область редактора можно разделить на два и более секторов. Например, так можно разделить файл разметки и стилей, для того чтобы не тратить время на переключение между ними.
Разделение рабочей области.Мини-карта
Для удобной навигации в документе можно использовать миникарту. Обычно она находится в правой колонке и отображает структуру файла. При нажатии на миникарту отобразится нужная часть документа.
Внешний вид
Для тех, кто любит настраивать инструмент под себя, в настройках есть множество регулировок: можно изменять размер шрифта, цветовые схемы, правила переноса текста и многое другое. Это поможет сделать процесс разработки ещё комфортнее.
Проекты
Для того чтобы каждый раз не искать в системе расположение рабочей папки, можно сохранить эту информацию в редакторе, создав проект. При работе это удобно тем, что позволяет оперативно переключаться между ними.
Для разных редакторов выделение проектов даёт дополнительные возможности. К примеру, если создать проект в WebStorm, то программа считает всё содержимое директории проекта. После анализа редактор будет выдавать подсказки, такие как ссылка на несуществующий файл.
Проекты в редакторе.Такой анализ даёт возможность безопасно проводить рефакторинг кода, удалять файлы и прочее.
Интеграция приложений
Помимо выполнения основной функции — предоставления комфортных условий для написания кода — редакторы могут включать в себя функциональность сторонних приложений. Это делает из простой программы интегрированную среду разработки. В базовую версию у разных редакторов входит разное количество таких приложений.
Обогатить функциональность можно через добавление плагинов. Рассмотрим некоторые подобные возможности.
Система контроля версий
Работать с системой контроля версий для разработчика — обычное дело. Часто все команды прописываются и выполняются через консоль. Для ускорения процесса разработки часть рутинных операций, такие как push, pull, commit и другие можно выполнять через редактор.
Помимо этого, программа может подсказать, в каких местах были произведены изменения, и как поменялся код по сравнению с предыдущей версией.
Изменения.Также в удобной форме можно посмотреть: историю коммитов, кто, когда и как изменял файлы и многое другое.
История изменений.К примеру, через Atom или WebStorm можно сделать commit изменений, выполнить push в удалённый репозиторий и после создать pull request в сервисе GitHub. И все эти действия делаются в рамках редактора.
Возможности редактора при работе с Git.Emmet
Во многие редакторы по умолчанию встроен плагин 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. Увеличивает количество действий, которое можно сделать в боковой панели при работе с файлами и папками.
- SublimeCodeIntel. Делает редактор «умнее». Добавляет автодополнение для разных языков и другие полезные возможности.
- Git и GitGutter. Добавляют интеграцию с системой контроля версий Git в редактор.
- EditorConfig. Полезный пакет для настройки параметров редактора.
Проверяющие синтаксис:
Сперва для редактора следует установить пакет SublimeLinter. Также на компьютере должен быть установлен Node.js. После этого нужно установить интересующие плагины для проверки. В большинстве они называются SublimeLinter-нужный пакет. Например:
- SublimeLinter-eslint. Проверяет JavaScript-код. Для работы нужно глобально установить npm-пакет
eslint. Подробнее в инструкции по ссылке. - SublimeLinter-stylelint. Проверяет CSS. Для работы нужно глобально установить npm-пакеты:
postcssиstylelint. - Emmet. Плагин, ускоряющий написание разметки и стилей.
- Minimap. Добавляет поддержку миникарты в Atom.
- PlatformIO IDE Terminal. Встраивает терминал в редактор.
- Atom-Beautify. Форматирует текст по заданным настройкам и приводит его к единообразию.
- Editorconfig. Полезный пакет для настройки параметров редактора.
- Для удобной работы с системой контроля версий Git можно добавить плагины Git History и GitLens.
- Project Manager — добавляет редактору возможность работать с несколькими проектами.
- Settings Sync — синхронизирует настройки и установленные плагины между программами на разных компьютерах.
- Beautify — форматирует текст по заданным настройкам и приводит его к единообразию.
- ESLint — проверяет JavaScript код по заданным параметрам.
- vscode-stylelint — проверяет CSS.
Изменяющие внешний вид:
Если недостаточно стандартных встроенных тем, то можно установить дополнительные. Примеры тем можно посмотреть на официальном сайте.
Atom
Продукт, произведённый командой GitHub Inc. Приятный на вид, кроссплатформенный бесплатный редактор. Имеет встроенную интеграцию с Git и GitHub.
Скачать с официального сайта можно здесь.
Расширения для редактора
Для того чтобы установить пакет в Atom, нужно перейти в настройки редактора и выбрать пункт Install. После этого в поле ввода нужно ввести название интересующего расширения.
Установка расширений в Atom.Список популярных расширений можно посмотреть на официальном сайте.
Условно плагины можно разделить на несколько типов.
Ускоряющие разработку:
Добавляющие функциональность:
Проверяющие синтаксис:
Для того чтобы редактор мог подсвечивать найденные ошибки, нужно установить плагин Linter. После этого нужно выбрать плагин, который добавляет проверку для конкретного языка. Например:
Изменяющие внешний вид:
Visual Studio Code
Бесплатный кроссплатформенный редактор компании Microsoft. Является одним из самых популярных редакторов на данный момент. Скачать можно здесь.
В базовой версии есть интеграция с Git и режим отладки кода. Поддерживает, в том числе и через дополнения, большое количество языков.
Расширения для редактора
VS Code в базовой версии содержит большое количество плагинов. К примеру, консоль, emmet и мини-карта в нём присутствуют с самого начала. Добавить новые пакеты можно через интерфейс программы. Для этого во вкладке активного меню нужно выбрать пункт extensions и в поле ввода ввести интересующий плагин. После этого его можно установить.
Установка расширений в VS code.Посмотреть список популярных плагинов можно через интерфейс редактора, либо на официальном сайте. Рассмотрим ряд полезных плагинов, которые могут помочь при разработке. Условно их можно разделить на несколько типов.
Добавляющие функциональность:
Проверяющие синтаксис:
Изменяющие внешний вид:
WebStorm
Продукты JetBrains являются полноценными интегрированными средами для разработки. При минимальной настройке редакторы обладают большим количеством возможностей, на изучение которых нужно время. Базово имеет интеграцию с системами контроля версий, есть отладчик кода, статически анализирует содержимое проекта и в случае ошибок указывает на них.
Продукт платный и доступен к использованию по подписке, установить и оформить подписку можно здесь. Каждый из продуктов отвечает за определённую сферу. WebStorm, к примеру, больше подходит для фронтенд-разработки, а PHPStorm — для написания серверного кода на языке PHP.
Расширения для редактора
Из коробки редактор поддерживает большинство возможностей, которые рассматривались в этой статье. Однако, при необходимости можно обогатить функциональность программы через добавление расширений.
Это можно сделать через Настройки → Plugins. В этом меню отобразятся все плагины, которые установлены в программе.
Установка расширений в WebStorm.Установить новые можно через пункт Install Jetbrains plugin. Из интересных можно выделить:
Вывод
У всех редакторов, которые мы рассмотрели, есть свои особенности и преимущества. При выборе программы стоит отталкиваться от задачи.
Если для работы важна скорость редактора, то тут лучшим выбором будет Sublime Text. Он легковесный и мало тратит ресурсов компьютера.
Если приоритетно удобство или вы совсем новичок в разработке, то тут хорошо подойдёт Atom. У него приятный интерфейс и хорошо проработана интеграция с сервисами Git и GitHub.
Для опытных разработчиков отличным решением будет WebStorm. Программа требует минимальных настроек для комфортной разработки и обладает богатой функциональностью.
Некоторой золотой серединой выступает VS Code. C одной стороны, он из коробки обладает большим количеством возможностей, с другой — интуитивно понятный и легко настраиваемый. При этом программа достаточно быстро работает.
Так как при разработке очень много времени приходится проводить в редакторе, стоит хорошо изучить его особенности, понять, что он умеет делать и как может помочь решить типовые задачи.
С опытом приходит понимание того, каким должен быть ваш рабочий инструмент. Современные программы обладают широким спектром особенностей и продолжают развиваться. Изучайте их и не бойтесь пробовать новое.
htmlacademy.ru
Выбор текстового редактора или «хочу все в одном» / Habr
Всем привет! Я бы хотел обсудить насущную лично для меня проблему — выбор текстового редактора. В наше время мы имеем очень большое многообразие выбора, но чем больше продуктов, тем сложнее выбрать подходящий именно для ваших целей, вашего удобства. В этой статье я попробую поделиться своими мыслями по этому поводу и рассказать, на какие редакторы и IDE пал мой выбор.
Я достаточно молод и неопытен в сфере IT, чтобы приводить какие-то сверх-доводы, поэтому все ниже-перечисленное будет лично моими субъективными мыслями и рассуждениями. Если кто-то не согласен со мной — я буду только рад поддержать дискуссию и обсудить все это в комментариях.
Сейчас я работаю под Windows, в будущем, возможно, перейду на Mac OS, поэтому при выборе текстового редактора/IDE я сразу выделял кросс-платформенность. Рассматривал чуть больше вариантов, чем перечислю тут, ибо решил выделить только самые приглядевшиеся. Буду стараться кратко описывать взгляд на разные стороны перечисленных программных продуктов.
Под стандартными задачами я подразумеваю банальные задачи верстки, т.е. HTML, CSS, может JavaScript. Я не буду подчеркивать те вещи, которые есть везде, например: смена цветовых тем, система контроля папки проекта и т.д.
Sublime Text
Официальный сайт
Насколько я знаю люди делятся на два типа: те кто используют Sublime и те кто не используют Sublime. Я вот отношусь ко вторым; попробую объяснить почему.
Интерфейс
Для меня это играет очень большую роль, когда интерфейс приятен и понятен. Этот редактор почему-то не вызвал у меня таких чувств. Субъективно дизайн и оформление на уровне 2010, так что тут «минус».
Функционал
Ну тут набор довольно впечатляющий, хотя не хватает LESS, SCSS подсветки синтаксиса. В целом функционал хороший.
Быстродействие
Работает быстро, тут однозначно на 5+, работал в нем достаточно продолжительное время и с большими файлами, никаких лагов не наблюдал.
ATOM
Официальный сайт
На вид — отличный редактор от команды GitHub. Он меня очень быстро успел заинтересовать, но разочаровать успел еще быстрее.
Интерфейс
Тут вроде все отлично, в фулл-сайз режиме выглядит отлично, разработчики видимо старались. Написано это дело на CoffeeScript, и все лежит на GitHub в open-source, так что если этот редактор вам по душе и вы знакомы с CoffeScript, то можете дополнять его своими идеями.
Функционал
В целом как обычно, ничего сверх-примечательного, правда в какой-то момент почувствовал, что нет кнопочки «поменять местами» при поиске с заменой по документу. Мелочь, но огорчила.
Быстродействие
Тут то все и погорело. Лагает просто зверски, с большими документами огромные проблемы, хотя-бы css файл того же Bootstrap он загружал секунд 12. Периодически вылетает, но может эта проблема только на Windows, так что если использовали его на Mac, то можно это обсудить в комментариях.
Brackets
Официальный сайт
Отличный open-source продукт от Adobe, который имеет уже множество плагинов, расширений, дополнений. На мой взгляд — перспективная вещь. Написан на HTML, CSS, JavaScript. На нём я и остановил свой выбор.
Интерфейс
В стиле Adobe. Все очень просто и понятно, но при этом стильно; интерфейс заставляет влюбиться.
Функционал
Как обычно, стандарт, но к счастью полная поддержка LESS, SCSS. И внимание(для тех кто проспал): тут есть некое подобие парсинга PSD. Т.е. редактор анализирует ваш PSD макет и вы свободно можете исходя из PSD сделать разметку стилей вашей страницы. Революционная вещь на мой взгляд. Adobe такие Adobe.
Быстродействие
Как и в SublimeText все прекрасно, никаких заметных лагов и проблем, все очень быстро, на уровне Барри Аллена.
Забудем о разметке. В веб есть еще такая вещь, как динамичность, т.е. веб-программирование, без которого любой сайт (только, если это не лендинг или еще какая-то статичная вещь) становится скучным, поговорим о мозгах веб-приложений.
PHP
Тут слишком много я не выбирал, погуглив и посмотрев некоторые редакторы и IDE понял, что однозначно это PHP Storm от JetBrains. Ранее интерфейс в нем отталкивал, но сейчас все очень даже на высоте. Авто-дополнение кода, подобное IntelliSense, удобство работы с фреймворками и т.д. В общем, достойнейший продукт.ASP, node.js
Тут меня привлек недавно немного/немало нашумевший продукт от Microsoft — Visual Studio Code.
Отличный редактор для ASP.NET и node.js приложений. Знаменитый IntelliSense, возможность работы с классами и объектами по reference. Все в стиле Microsoft. Имеется встроенный отладчик. Так-же хочу подчеркнуть, что по моему мнению — это отличная замена MonoDevelop для .NET разработчиков вне Windows(тут то есть Visual Studio).
Редактор пока в стадии разработки, но работа ведется достаточно быстро, учитывая что это Microsoft.
Резюмируя вышесказанное, я сделал свой выбор. Останавливаться на таких же критериях, как и я, вам необязательно. Буду рад обсудить все в комментариях к статье.
Спасибо за внимание!
habr.com
HTML редактор онлайн — Be1.ru
02.07.2019 12:00
Обновили дизайн старого инструмента!
Мы до неузнаваемости обновили инструмент определяющий IP адрес компьютера, теперь в нем куча плюшек и современный дизайн! Ссылка на инструмент: https://be1.ru/my-ip/
13.06.2019 14:34
Добавили новый SEO-инструмент!
Он умеет быстро и бесплатно определять систему управления контентом (CMS) сайта.
07.05.2019 10:05
Мы переехали на новый сервер!
В связи с невероятной популярностью проекта, нам стало слишком тесно на нашем сервере. Смена сервера даст более стабильную и быструю работу проекта. В ближайшие дни мы будем писать сотни строк кода по 20 часов в сутки, чтобы перенастроить наши скрипты под новый сервер. Просим понять, простить и помочь найти баги, сообщить о которых Вы можете в форме связи раздела FAQ.
26.03.2019 10:47
Падение сервера 25.03.18
Остановка в работе сервиса связанна c DDoS атакой, в данный момент работа Be1 полностью восстановлена. Будем укрепляться и ждать следующую волну. Извините за временные неудобства.
19.02.2019 10:00
Новое расширение для анализа сайтов!
Наше расширение помогает бесплатно в один клик провести глубокий SEO-анализ сайта. Рекомендуем: https://be1.ru/goto/extension
14.12.2017 12:07
Обновления для Антиплагиата!
Функциональность инструмента Антиплагиат обновилась — исчезла строка «Исключить URL». Теперь эта функция работает автоматически при использовании вкладки «Проверить URL». Также, первая проверка инструмента осуществляется намного быстрее. Однако, если Вы нацелены проверить всё до деталей, нажимайте кнопку «Расширенная проверка».
24.11.2017 14:26
Black Friday! 40% скидка на рекламу!
Успейте заказать рекламу с максимальной скидкой! Оформить заявку можно на странице https://be1.ru/advertising/
15.11.2017 11:14
Теперь мы умеем определять региональную привязку сайта!
Инструмент позволяет узнать к каким регионам Яндекс причислил проект. Проверить можно любой сайт в интернете, даже конкурента, иметь при этом доступ в Яндекс.Вебмастер сайта не нужно.
09.11.2017 12:07
Инструмент проверки позиций получил дополнительный функционал!
В связи с тем, что инструментом начало пользоваться много пользователей, мы решили сделать его лучше, удобнее, функциональнее. Добавили зарегистрированным пользователям возможность сохранять проект, чтобы быстро ежедневно проверять позиции в 2 клика. Также начали вести историю позиций запросов и разработали возможность разбить запросы по релевантным страницам. Enjoy =)
08.11.2017 09:45
Аудит сайта доступен каждому!
Be1 начал предоставлять свою первую услугу, благодаря которой можно получить чёткую инструкцию как продвинуть свой сайт на ТОП-овые позиции! Получите отчёт за 3 дня с готовыми решениями.
be1.ru