Afftimes
ТОП выплаты вебам!

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

Как
0
16054
11 февраля, 2021

То, что вы видите в браузере, и то, что воспринимает сам браузер, здорово отличается между собой. Браузер понимает только язык 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-редакторы и их виды 

Вид редактораПримерыФункционал
Для разработки сайтов и html-страниц.Website Builder, MS Frontpage, Macromedia Dreamweaver, MS Sharepoint Designer.Работают онлайн или устанавливаются на ПК. Помогают создать  «основу» сайтов и html-страниц, облегчают и ускоряют их верстку.
Для работы с содержимым сайта.NicEdit, TinyMCE, CKeditor.Приходят на помощь контент-менеджеру. Интегрируются в CMS.

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

NicEdit

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

NicEdit

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

TinyMCE

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

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

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

TinyMCE

CKEditor

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

CKEditor

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

YUI Rich Text Editor

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

YUI Rich Text Editor

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

MarkItUp!

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

MarkItUp!

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

WYMeditor

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

WYMeditor

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

OpenWysiwyg

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

OpenWysiwyg

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

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

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

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

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

НазваниеДостоинстваНедостатки Особености
TurboSiteПростотаОграничения по визуальному редактированию.
KompoZer Встроенный файловый менеджер.Редко обновляется.Отсутствуют HTML5 и CSS3.
FilyaninРаботать быстро и просто.Подходит для работы с небольшими текстами.Редактор онлайн на одноименном сайте — скачивать его не нужно, он всегда под рукой.
MS Office SharePoint DesignerИспользуется CSS.Устанавливается отдельно от MS Office.Неудобная официальная справка к ПО.
Замена Microsoft Office FrontPage.
AmayaОткрытый исходный код.Нет HTML5.Не обновляется с 2012 года.

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

Kors

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

Kors. Функционал

Все программные продукты отличаются интуитивно понятным интерфейсом, не требуют знаний 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. 

Adobe Dreamweaver

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

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

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

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

Web Page Maker

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

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

Web Page Maker

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

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

WebSite X5

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

WebSite X5

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

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

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

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

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

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

WebsitePainter

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

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

WebsitePainter

Сайт создается в виде одного файла *.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.

Есть ли польза от WYSIWYG редакторов для копирайтера?

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

Есть ли WYSIWYG редакторы на русском языке?

Русифицированные есть, как платные, так и бесплатные.

Нужно ли использовать WYSIWYG редакторы, если вы сразу пишете в админке WordPress?

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

Оцените статью по 5-бальной шкале

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Читайте также

Комментарии (3)

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Поле обязательно для заполнения
Необходимо ввести валидный E-mail
Поле обязательно для заполнения
20% на топовый антик💰

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

ПОПРОБОВАТЬ СО СКИДКОЙ