WYSIWYG-редакторы — что это и как их использовать

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

WYSIWYG («визивиг») — сокращение английских слов  «что видишь, то получаешь»  — это визуальный редактор, форма работы прикладного ПО или веб-интерфейса, в котором работа происходит в виде конечного редактирования. 

WYSIWYG-редакторы используют фреймы со свойством designMode в состоянии «On», что поддерживает страницу в постоянном режиме редактирования. В момент сохранения изменений через свойство innerHTML забирается HTML-код из фрейма, который  отправляется на сервер и там сохраняется.

Посмотрите, как в CMS MODx Revo текст редактируется в WYSIWYG-редакторе TinyMCE, который выглядит так:

А на сайте контент отображается таким образом (подключается шапка, футер и другие элементы оформления):

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

Вот его основные инструменты:

Любая веб-страница создается на языке разметки гипертекста HTML. Например, на сайте из нашего примера страница  для поискового робота и браузеров выглядит таким образом:

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

Тем и удобен WYSIWYG editor, что он позволяет вносить изменения в контент при помощи простых инструментов без знания HTML и сразу же видеть эти изменения так, как они будут отображаться на сайте.

К тому же, современные WYSIWYG-редакторы стали лучше. Многие из них создают «чистый» код. 

WYSIWYG-редакторы — только для работы контент-менеджера?

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

Таблица 1. WYSIWYG-редакторы и их виды 

ТОП 7 бесплатных WYSIWYG редакторов для  работы с содержимым сайта

NicEdit

Это альтернатива сложным визуальным редакторам, которая легко интегрируется в CMS.

Объемный, несколько сложен для изучения. 

TinyMCE

Пример работы TinyMCE вы видели выше, когда мы рассказывали о работе в CMS MODx. Имеет  открытый исходный код, но опция API сложна в ознакомлении. Написан на JavaScript. Легко интегрируется в сайт и настраивается. Считается «полным» редактором с широким функционалом, генерирует чистый код.

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

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

CKEditor

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

Реализована работа с API, можно настроить горячие клавиши. Файловый менеджер скачивается и легко устанавливается.

YUI Rich Text Editor

Визуальный редактор для сайтов от компании Yahoo,  поставляется в нескольких версиях, отличается хорошей эргономикой (нет лишних кнопок). 

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

MarkItUp!

JQuery-плагин, который поддерживает синтаксис HTML, BBcode, Wiki. Не является общепринятым WYSIWYG-редактором, но предлагает его функции. Простой в работе и очень компактный.

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

WYMeditor

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

Из недостатков стоит отметить, что нет работы с таблицами, а также файлового менеджера. Визуально отображается весь длинный текст на экране («простыня»), а не та его часть, с которой работает контент-менеджер.

OpenWysiwyg

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

Прекрасно умеет работать с огромными таблицами. Минус — в Google Chrome не работает и в CMS не интегрируется. 

Платные и бесплатные редакторы для разработки сайтов и html-страниц

Если бесплатный визуальный редактор в большинстве случаев предназначается для работы с содержимым сайта и встраивается в CMS, то платные WYSIWYG editors помогают html-кодерам и программистам создавать веб-проекты.

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

Таблица 2. Бесплатные  редакторы для создания сайтов (без интеграции с CMS)

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

Kors

Это различные экономичные по стоимости редакторы в режиме WYSIWYG, созданные компанией Kors. Стоимость использования — всего от 700 рублей в год. Есть бесплатная версия «Мини-сайт». 

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

Можно работать с HTML-кодом напрямую. Редактирование страницы и ее выгрузка на сайт по FTP максимально упрощены. 

Adobe Dreamweaver

Adobe Dreamweaver CS4 на русском языке — это замена Macromedia Dreamweaver 8, Adobe GoLive CS2, Adobe Dreamweaver CS3, Macromedia HomeSite 5, которые в настоящее время уже не продаются.

Цена на программный продукт — около 15 000 рублей.

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

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

Также привязаны расширения Adobe Bridge, Fireworks, Flash и другие. Весь функционал управляется приложением Extension Manager. 

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

В программе предусмотрены три режима: работа с кодом HTML, дизайн (визуальное отображение) и просмотр. Также окно можно разделить на два (как в нашем примере): дизайн и код.

Использовать «Дримку» в качестве HTML-редактора для ежедневной работы с контентом сайта нецелесообразно. Ее назначение — создание сайтов. Поэтому контент-менеджер использует лишь малую часть предложенных разработчиком функций. 

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

Web Page Maker

Цена — 49$. Дается 15 дней на бесплатное знакомство с программным продуктом.

ПО простое, поставляется на английском языке, но есть вариант с русским интерфейсом.

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

Можно создать страницу на предлагаемом шаблоне или самостоятельно. Предусмотрено использование CSS, Java, ссылок, таблиц, рисунков, Flash, Media, фреймов, форм.  

WebSite X5

Версии программы периодически обновляются, поэтому цена — величина непостоянная (от 4 000 руб.). Ранее бесплатная версия  Free служила для предварительного знакомства с ПО и отличалась строгими ограничениями.

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

В последних версиях есть возможность создания интернет-магазинов, блогов, RSS, адаптивных сайтов.

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

Создает элементы на основе табличной верстки (устаревший метод организации HTML-страниц). Но после публикации сайта табличный код преобразуется в современный блоковый (на адаптивном DIV).

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

WebSite X5 отличается широким функционалом, быстро работает, вы найдете много обучающего материала в интернете.

WebsitePainter

Цена — 39$.  Русифицированный визуальный редактор. Простой, быстрый, без лишних элементов, функциональный, помогает создавать страницы любой сложности.

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

Сайт создается в виде одного файла *.wsp. Он публикуется сразу на сервер посредством  встроенной программы, при этом создается необходимый комплект из нескольких файлов.

Полезные советы

• Перед размещением в редакторе хорошо форматируйте текст. Используйте заголовки разных уровней, списки, выравнивание картинки относительно текста.
• Если вы вставляете контент из MS Word — смотрите код и очищайте его от мусора. В отдельных редакторах предусмотрена очистка форматирования или специальная вставка из Word.
• Используйте CSS-стили. Для уменьшения веса кода не стоит выбирать синий цвет для жирного текста или зеленый для заголовка в самом редакторе. Воспользуйтесь таблицей стилей. 
• Не применяйте подчеркивание слов. Люди будут думать, что это ссылки.
• Вставляйте ссылки с URL от корня сайта — например, не http://www.вашдомен//3747234/ssilka.html, а  /3747234/ssilka.html.
• Перед вставкой каждое изображение заранее обрабатывайте в графическом редакторе, придавая ему необходимый размер и требующийся формат.
• Какие форматы картинок можно использовать:
• JPEG — для фото и изображений с широкой цветовой гаммой;
• GIF — для чертежей, схем;
• PNG — для сжатия без потери качества или для картинок на прозрачном фоне.

Выводы 

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

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

При использовании WYSIWYG разработчик не видит код полностью. Поэтому при работе с ним рекомендуется одновременно открывать два окна (редактор + сайт) и следить за изменениями онлайн. 

Поэтому для профессиональной разработки сайтов мы рекомендуем пользоваться профессиональными платными визуальными редакторами типа Dreamweaver, а в CMS интегрировать бесплатное ПО, которое облегчит работу с контентом и выдаст чистый программный код, например, TinyMCE.