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

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

Обзор бесплатных редакторов HTML

Не имеет значения кодо-ориентированный или WYSIWYG, идеальный HTML редактор должен проверять код на соответствие стандартам HTML, иметь собственный FTP клиент , позволять просматривать web-страницу в различных браузерах, обеспечивать поддержку мета-тегов, поддерживать базовые инструменты для работы с изображениями . И при всем при этом оставаться бесплатным.

WYSIWYG HTML редакторы

Давайте посмотрим на несколько WYSIWYG редакторов.

Amaya

		Полное соответствие стандартам
		Некоторые возможности не просты для освоения начинающими

Руководство по быстрому выбору - Текстовые HTML редакторы (скачать)

NetBeans

		Хорошая поддержка CSS, включая рефакторинг стилей. Проверка тагов. Кастомизация подсветки синтаксиса. Проверка кода. Автоматическое выставление отступов. Быстрый и мощный. Кастомизация графического интерфейса. Работа с PHP. Экспорт настроек. Хорошая поддержка. Большое количество документации. Кроссплатформенность.
		На первый взгляд достаточно грамоздкий редактор.

HTML-Kit 292

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

Aptana Studio

		Полноценная IDE. Множество плагинов.
		В основном сфокусирован на разработке AJAX приложений. Может немного испугать новичков.

Однажды мне потребовался WYSIWYG редактор, я помнил как он выглядит, его функции, но не помнил названия. Через 45 минут я все же его нашел… Тогда я поставил перед собой задачу помочь многим, в том числе и себе: сделать сводный список всех чуть более известных WYSIWYG редакторов.

Вступление

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

TinyMCE

Один из самых распространенных визуальных редакторов, обладает недюжинным функционалом. Есть множество дополнений, по умолчанию установлено множество плагинов.
(Браузеры: Mozilla 1.3+, MSIE 5.5+, Opera 9.0+, Safari, Chrome)
[Официальный сайт | Демо ]

CKeditor

Полный аналог TinyMCE.

[Официальный сайт ]

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

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

[Официальный сайт | Демо ]

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. Как справедливо заметил , один из лучших визуальных редакторов. Обладает исчерпывающим функционалом, поддерживает подавляющим большинством браузеров.
[Демо ]

MooEditable

Набор функций сильно ограничен, однако порой больше и не требуется.
[Демо ]

OpenWysiwyg

Кросс-браузерный полноценный редактор со всеми требуемыми функциями. Он даже включает в себя привлекательные выпадающие меню и кнопки. К сожалению, Chrome не будет поддерживать его.
(IE 5.5+, Firefox 1.0+, Mozilla 1.3+ and Netscape 7+)

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

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

• Визуальные, работающие по принципу «Получаешь то, что видишь» - WYSIWYG (What You See Is What You Get). При работе с WYSIWYG материал в конечном результате будет выглядеть так же, как в процессе редактирования.
• Невизуальные (текстовые). Код для таких редакторов нужно писать самостоятельно, поэтому этими инструментами пользуются, в основном, профессиональные веб-дизайнеры, отключающие опцию «по умолчанию».

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

Какой редактор лучше

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

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

Чем хороши WYSIWYG-редакторы

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

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

Визуальный редактор можно совмещать с тегами из текстового HTML - это ощутимо облегчает работу веб-дизайнеров.

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

Основные функции

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

Форматирование текста

	Формат...	Выделение заголовка текста (тег h1), подзаголовков (тег h2), подзаголовков 3 уровня (тег h3) и обычного текста (используется по умолчанию) (тег P). Указанное форматирование оказывает сильное влияние на продвижение страницы в поисковых системах. Поэтому другие виды форматирования, имеющиеся в этой функции, использовать не рекомендуется.
	Полужирный	Выделение фрагмента текста полужирным шрифтом (тег strong). Выделять полужирным шрифтом следует наиболее важные фразы, предложения или целые абзацы. Тег strong пользуется поисковыми системами при ранжировании сайта, однако его влияние не так велико как у заголовков.
	Нумерованный список	Создание нумерованных списков (теги ol, li). Создавать такие списки следует в первую очередь для удобства читателя, что положительным образом скажется на поведенческих факторах.
	Маркированный список	Создание маркированных списков (теги ul, li). В отличие от нумерованных списков здесь последовательность пунктов значения не имеет.
	Цитата	Помечаем фрагмент текста как цитату (тег blockquote). В тег blockquote следует заключать текст, заимствованный их других источников.
	Ссылка	Вставка гиперссылки на другой сайт или страницу сайта (тег a). Помогает читателям получить больше информации при переходе по ссылке. А поисковым системам повысить рейтинг страницы, на которую ведёт ссылка.
	Изображение	Вставка изображения. Картинка предварительно должна быть загружена в интернет и иметь Адрес. В диалоговом окне необходимо указать "Альтернативный текст".
	Таблица	Вставка таблицы. Если в тексте имеются структурированные данные, то их лучше представить именно в виде таблицы.
	Специальный символ	Вставка символов, которые отсутствуют на стандартной клавиатуре. Например: ®, ™, ¥, ½.

И это всё? Почему так мало функций?

Код HTML весьма богат на функционал, и в него можно добавить практически всё. Вот только встаёт вопрос, действительно ли это нужно?

Например такие вещи как формы (тег form), текстовое поле, чекбокс, радиокнопка (тег input) и прочее могут быть на сайте если только они адекватно взаимодействуют с "движком" сайта. То есть выполнять предназначенную для них функцию: оставить комментарий, голосовать и пр. А для этого необходимы навыки программирования. В противном случае данный функционал будет только вводить пользователей в заблуждение, и вызывать раздражение при пользовании Вашим сайтом.

Если, помимо вышеописанного, Вы хотите украсить свой текст такими элементами оформления как:

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

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

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

WYSIWYG html онлайн редактор

Наш html редактор обладает свойством WYSIWYG, слово является аббревиатурой от англ. W hat Y ou S ee I s W hat Y ou G et, дословно переводится «что видишь, то и получишь». Это свойство позволяет в процессе редактирования отображать содержание материала максимально приближенное к тому, что Вы получите на своём сайте при вставке полученного из "источника" (кнопка ) фрагмента html кода.

Будь мудрым - играй в нормальные игры!!!

- Сочетание стратегии и RPG;
- Крутая графика в Full HD без тормозов;
- Большой мир, полная свобода;
- Щедрые подарки новым игрокам.

Однако следует помнить, что на Вашем сайте имеются стили оформления различных элементов текста (заголовки, списки, абзацы, изображения). Как правило эти стили хранятся в файле style.css. Без подключения этого файла, т.е без размещения полученного html кода на своём сайте нельзя быть на 100% уверенным в достоверности видимого результата. Это утверждение справедливо ко всем визуальным редакторам кода.

Word to html конвертация

Наш сервис можно использовать для конвертации текста из файла word в формат html. Для этого нужно скопировать необходимый фрагмент из word, и, нажав на нашем сервисе кнопку " Вставить из Word", вставить скопированный фрагмент в появившееся диалоговое окно.

В отличи от других аналогичных конвертеров наш сервис очищает форматирование word, оставляя только самое необходимое:

• Заголовок текста (тег h1).
• Подзаголовок (теги h2, h3).
• Абзац/обычный текст (тег P).
• Полужирный шрифт (тег strong).
• Нумерованный список (теги ol, li).
• Маркированный список (теги ul, li).
• Курсив (тег em).
• Ссылка (тег a).
• Таблица.
• Специальный символ.

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

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

Онлайн-редакторы кода

1. CodePen

Он предлагает поддержку HTML , CSS и JavaScript и огромного количества препроцессоров. Haml , Markdown , Slim и Jade поддерживаются, в качестве HTML-препроцессоров . Для CSS поддерживаются Less , SCSS , Sass и Stylus . Для JavaScript поддерживаются CoffeeScript , TypeScript , LiveScript и Babel .

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

CodePen Pro поддерживает совместный режим, позволяющий дополнять код в режиме реального времени. А также режим Professor Mode , с помощью которого группа студентов может следить за вами, когда вы поясняете код, а вы можете переписываться с ними в чате.

2. JSFiddle

Еще один популярный редактор CSS онлайн . Им успешно пользуются разработчики уже в течение довольно долгого времени, и он был первым до появления CodePen . JSFiddle — это простой в использовании онлайн-редактор кода с бесплатным совместным редактированием, текстовым и голосовым чатом. Вам даже не нужно регистрироваться, чтобы использовать функцию совместной работы.

JSFiddle также поддерживает SCSS и CoffeeScript . С помощью JSFiddle довольно просто совместно работать над кодом или размещать демо-версии.

3. Liveweave

Это online CSS редактор с функцией предварительного просмотра в режиме реального времени. Liveweave содержит встроенные контекстно-зависимые подсказки по коду HTML5 , CSS3 , JavaScript и JQuery . Он также позволяет загрузить ваш проект в виде архива, что очень удобно.

В Liveweave довольно просто подключать к проектам внешние библиотеки, такие как JQuery , AndgularJS , Bootstrap и т.д. Он также инструмент линейку, что помогает в разработке адаптивного веб-дизайна. Liveweave предлагает функцию «Team Up «, которая предоставляет те же возможности, что и режим совместного редактирования в JSFiddle .

4. Plunker

Это интернет-сообщество (как и CodePen ) для создания кода, совместной работы и обмена идеями в области веб-разработки. Сервис представляет собой онлайн-редактор с открытым исходным кодом под лицензией MIT . Исходный код Plunker можно найти на GitHub .

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

5. JS Bin

Облачная среда для совместной работы с JavaScript кодом. Она включает в себя поддержку целого ряда препроцессоров, таких как SCSS , Less , CoffeeScript , Jade и других. Также доступна консоль для отладки и проверки кода, которая функционирует как консоль в Google Chrome или Firefox .

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

6. CSS Deck

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

7. kodtest

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

Демонстрация онлайн-редакторов кода

Ниже представлена демо-версия, созданная мной на CodePen . Вы можете переключить вкладки, чтобы посмотреть HTML , CSS и JS-код . Или поэкспериментировать, перемещая фигуры на вкладке «Результат ».

Посмотреть демо

Заключение

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

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

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

Перевод статьи «7 Free Online Code Editors for Front-End Web Development » был подготовлен дружной командой проекта Сайтостроение от А до Я.