9 лучших WYSIWYG HTML редакторов 2020 года


Оглавление (нажмите, чтобы открыть):

9 лучших WYSIWYG HTML редакторов 2020 года

Англоязычный вариант статьи на Smashing Magazine.

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

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

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

Что же означает WYSIWYG?
В таких редакторах можно изменять не исходный код ваших документов, а его представление, которое (по-возможности) будет опубликовано в итоговом документе. Таким образом, вместо написания блоков кода вручную, вы управляете проектированием при помощи компонентов, используя окно редактора. Это означает, что Вы видите что-то очень похожее на конечный результат, хотя документ или изображение еще только создается.
Примечание: эта статья содержит рецензии только desktop-ориентированные WYSIWYG-редакторы, которые работают под Windows, Linux или Mac. Она не дает обзор WYSIWIG-редакторов на JavaScript, но вы можете найти обширный обзор таких редакторов на здесь или здесь.

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

Dreamweaver также предоставляет различные полезные инструменты, такие как, библиотеки фрагментов кода, ftp управление, сервер отладки и комплексного кодирования. Например, Вы можете просматривать CSS информацию в единой, унифицированной CSS панели, что позволяет легко увидеть стили применительно к конкретным элементам, определить, где атрибуты определяются и редактировать существующие стили. Смотрите также наш список обучающих материалов по Dreamweaver. Цена: $ 400 (версия CS3).

Некоторые из многочисленных возможностей Dreamweaver:
* Расширенное CSS редактирование
* Integrated coding environment
* Spry framework для Ajax
* Проверка совместимости браузеров.
* Интеграция с Photoshop CS3 и Fireworks.
* Code snippets (например, CSS форматов)
* Управление FTP
* Поддержка XML
* Поддержка FLV
* Обучающие ресурсы (например, Adobe CSS Advisor)
* Многочисленные расширения для Dreamweaver.
Amaya
Amaya (Win / Mac / Linux)
Что действительно делает Амайя непохожей на остальных, то что это гибрид веб-браузера и редактора веб-страниц, таким образом, Вы можете просмотреть страницы в Интернете и редактировать Ваши страницы в одном и том же приложении. Созданный WWW-консорциомом, этот инструмент позволяет управлять веб-сайтами, изменять и обновлять их содержание, добавить новые изображения и ссылки. Конечно, если Амайя сможет отображать эти страницы.

Последняя версия редактора, Амайя 10, была выпущена в феврале 2008 года. Он способен работать с нескольких документах одномременно ((X)HTML, MathML(. Mml) и SVG (. Svg) документы, могут быть отображаться и редактироваться одновременно). Например Вы можете вставить математические формулы, с помощью pop-up: Амайя преобразует их через Math-ML «на лету».

Амайя также включает в себя объединенное приложение аннотаций (аннотации, внешние комментарии, примечания, замечания, которые могут быть прикреплены к любому веб-документу или отдельной части документа) и он поддерживает SVG, RDF и XPointer. Open-source.

Rapidweaver
RapidWeaver (Mac)
RapidWeaver является мощным, основанным на шаблонах, инструментом для создания веб-сайтов, который может генерировать страницы разного рода, такие как, например, текстовые страницы, блоги, контактные формы, графические галереи и Flash слайд-шоу, а также имеет встроенный в FTP-менеджер и интеграция с iPhoto и .Mac.

Редактор включает в себя подкастинг, встроенные комментарии, RSS-ленты, permalink и поддержку тегов. RapidWeaver также будет SEO-дружелюбен. Он также имеет много мощных функций, таких как модифицирование тем, php-рендеринг, mix and match WYSIWYG and HTML, smart publishing, XHTML and CSS based site output, просмотр исходного кода, встроенная проверка ошибок. Все шаблоны основаны на XHTML и CSS. Что является замечательным так это то, что RapidWeaver генерирует код валидный. Цена: $ 49.

Основная цель Adobe Contribute, является возможность редактирования веб-сайтов и блоги для пользователей не имеющих каких-либо технических знаний. Contribute CS3 позволяет авторам обновить существующие сайты и блоги, сохраняя целостность сайта. Contribute предлагает интеграцию с Dreamweaver, дает возможность размещения материалов с Microsoft Office и редактирования из IE 7 и Firefox.

С этим WYSIWYG-редактором, авторы могут изменять или обновлять любой веб-сайт или блог без необходимости изучать HTML. Цена: $ 169 (версия CS3).

Adobe Golive
Adobe Golive (Win / Mac)

В апреле Adobe прекратила разработку и продажу GoLive 9. Adobe GoLive рекомендует пользователям перейти на Dreamweaver, после чего Вам, вероятно, не следует рекомендовать GoLive (на самом деле удивительно мощный инструмент редактирования, (см. ниже) для ваших клиентов.

Некоторые Adobe GoLive 9 возможности:
* Designer styles
* Visual CSS layout
* Place command
* Adobe InDesign® integration
* Color management
* Platform support
* Site management tools
* Publish Server
* Smart Objects

Microsoft Expression Web
Microsoft Expression (Win)

В свое время подвергшийся резкой критике за его действительно плохой веб-редактор (Frontpage), Microsoft недавно создал редактор, Expression, который кажется, наследовал многое из его предшественников. Expression попытался создать комфортную обстановку для интернет-пользователей, с чертами, которые являются чрезвычайно похожими на Adobe Dreamweaver. Однако, при прямом сравнении Dreamweaver предлагает больше и производит более чистой код. Тем не менее, Expression производит достойный, совместимый со стандартами код и знает, как работать с CSS и CSS-макетами.

Studio edition с прочими программными приложениями (graphic design tool, video encoding tool т.д.) стоит прим. $500. Одна лицензия Expression стоит $350. Вы можете получить Expression, обновив Frontpage и тем самым сэкономив деньги. Trial-версию на 60 дней можно загрузить бесплатно, однако требуется регистрация.

Обратите внимание: Expression не преемник Frontpage, это довольно разные инструменты разработки. Microsoft Expression имеет большее сходство с Microsoft SharePoint Designer, это скорее конструктор ориентированный и направленный на обеспечение общей веб-разработки. Microsoft SharePoint Designer делает акцент на разработке и адаптации к SharePoint-based сайтах, его можно рассматривать как старшего брата Frontpage.

Некоторые Microsoft Expression возможности:
* ASP.NET 2.0 Integration
* Advanced CSS rendering
* XPath Expression Builder
* Build and format views of industry-standard XML data
* Tag Property Grid
* Accessibility Checking
* Real-time Standards Validation
* Full Schema Support

NVU(Win / Mac / Linux)

Этот редактор должен стать реальной альтернативой доминирующим продуктам: WYSYWIG-редактор для Linux, Microsoft Windows и Mac, мог бы соперничать с FrontPage и Dreamweaver. А в некоторых аспектах Nvu действительно предоставляет больше возможностей, чем можно было ожидать от абсолютно бесплатного программного обеспечения.

Nvu (произносится как N-view, от «new-view — новый взгляд») предлагает интегрированный FTP-менеджер, мощную поддержку для форм, таблиц и шаблонов, и он действительно очень прост в использовании. CaScadeS, хорошо известный редактор CSS, как дополнительный модуль интегрируется в Nvu и позволяет легко создавать и управлять стилями и видеть как применяются Ваши стили «на лету» в документе Вы изменяете.

Nvu является open source и выпускалась под Mozilla Public License (MPL). К сожалению, развитие NVU не продолжается в последние лет. Усовершенствованную версию NVU можно взять тут — KompoZer.

Некоторые из возможностей NVU:
* Сайт-манаджер позволяет просматривать сайты, которые вы создаете.
* Поддержка XML.
* Встроенный валидатор.

Kompozer
KompoZer (Win / Mac / Linux)

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

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

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

Namo WebEditor 2006
Namo WebEditor 2006 (Win)
Namo WebEditor сочетает в себе практически все инструменты, необходимые для создания веб-сайтов в простой и интуитивно понятный интерфейс. Элементы интерфейса являются чрезвычайно понятными, простыми и удобными в использовании. Вы можете переключаться между дизайн-редактором, HTML-браузером и просмотром фотографий. Вы можете также использовать ряд мастеров, чтобы автоматизировать рабочий процесс. Namo является мощным, однако его WYSIWYG-возможности ограничены. Редактор не обновлялся с 2006 года в связи с чем генерирование исходного кода иногда чрезвычайно странно. Веб-редактор Namo Pro поставляется с Flash-редактором, а также с графическими программами. Тест-версия доступна. Цена: $ 99,95.

Некоторые из Namo Webeditor возможностей:
* Code Helpers для авто закрытия тегов
* Quick Tag Editor
* Tag Selector
* HTML/CSS Reference

Evrsoft First Page 2006
Evrsoft First Page 2006 (Win)
На самом деле этот редактор очень недооценивается. Он не очень популярный и он не обновлялся с 2006 года, но у него есть много весьма полезных функций, которые можно было бы включить в современные WYSIWYG-редакторы. Например, функция Auto History — история помнит все атрибуты и значения, которые использовались и предлагает » правильное» значение автоматически.

Dual Preview Engine позволяет Вам просматривать веб-документы в нескольких браузерах с помощью First Page 2006. Вы можете просмотреть вашу работу в Internet Explorer, Mozilla или просматривать страницы в обоих браузерах бок о бок (горизонтальные / вертикальные панели). И в режиме реального времени просматривать код и редактировать документы.

First Page является бесплатной. Аналогичная бесплатная альтернатива (тоже не обновлялась с 2005): Selida HTML Editor.

Некоторые из возможностей First Page:
* CSS Class Support & Auto Detection
* Syntax Highlighting
* Tag Document Selection Tool
* Tag Auto Completion
* Tidy HTML Power Tools
* Preview in IE as you type
* Image Mapper
* CSS Style Sheet Designer
* Server Side Includes Support
* Highly customizable Toolbars and Interface
* FTP client
* Advanced Find & Replace In Files

Это преемник Microsofts Frontpage. SharePoint Designer является стандартом WYSIWYG-редактора. Помимо поддержки интерактивных страниц ASP.NET, он не предлогает что-то революционное. Бесплатные trial-версия доступна. Существует online-версия, которая требует Internet Explorer и большого терпения.

Некоторые из возможностей Sharepoint:
* support for interactive ASP.NET pages
* create Data Views from RSS, XMl, Office XML
* collaborate with the built-in Workflow Designer
* CSS tools
* track customized pages
* spelling checker
* SharePoint Server 2007 integration

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

В настоящее время доступена 10 версия NetObjects Fusion. Качество генерируемого исходного кода, возможно, изменилось, однако это не имеет большого значения. Существует trial-версия, которая требует от вас зарегистрироваться в магазине. Вот почему у нас нет screenshot-a этого продукта. Цена: ? 100.

Quanta Plus (Linux)
Quanta Plus является стабильным, имеет очень удобные и богатые функции среды веб-разработки. Quanta создал редактор предназначеный для эффективной и естесственной разработке и с максимальной для пользователя расширяемостью.

Редактор поддерживает как handcoding, так и WYSIWYG-интерфейс. Он имеет следующие возможности: авто завершение тегов по мере ввода и редактирования тегов в рамках диалогового интерфейса, управление проектами, возможность выполнять от отлаживать PHP-код. Он также имеет визуальный редактор CSS, автодополнение для CSS, предлагает высокую расширяемость и предварительный просмотр.

Редактор также интересные особенности для управления проектами, включая поддержку для локального и удаленного (через сеть) проектов. Проекты могут быть загружены с различных серверов с использованием различных протоколов. CVS поддержка включена, поддержка Subversion возможна за счет внешних подключаемых модулей. Quanta базируется на KDE. Выпускается в соответствии с GPL-лицензией.

Freeway (первоначально Uniqorn) поставляется в двух вариантах, Freeway Pro и Freeway Express. Freeway 5 Pro может быть использована для создания CSS макетов с использованием абсолютного позиционирования. В расширенным варианте, например, подключение к базе данных MySQL, используя скриптовый язык, такой как PHP, производится с помощью подключаемых модулей называемый «Actions». Некоторые Actions могут быть загружены бесплатно на нескольких веб-сайтах, но есть и коммерческие, такие как 3rd Party Actions.

Существует trial-версия, которая требует от вас заполнить довольно долгую веб-форму. Freeway был номинирован на Macworld 2008 Awards в номинации Creative Web Product года. Если вы используете Mac, то Freeway вместе с RapidWeaver является с первым вариантом, который заслуживает рассмотрения.

Некоторые из возможностей Freeway:
* Multiple Master Pages
* Layout Tools
* Link Map
* Link Styles
* Integrated .Mac upload
* Internet Explorer Compatibility
* Support for Sliced Background Images
* Built-in preview within Freeway (Safari/Webkit)
* Full EPS (Panther & later), Illustrator, Photoshop layered file import
* Freeway Shop
* Work with Blogger Templates

Seamonkey Composer
SeaMonkey Composer (Win / Mac / Linux)
Этот редактор является простой, но очень мощной альтернативой, крупных коммерческих приложений. Будучи наследником Netscape Composer, SeaMonkey Composer в действительности не имеют ничего общего с ним.

Редактор является мощным и одновременно простым и предлагает динамичные изображения и table resizing, быструю вставку и удаление из ячеек таблицы, расширеную CSS-поддержку, и поддержку позиционированных слоев. WYSIWYG-редактор встроен в SeaMonkey.

Create
Create (Mac)
Create сочетает в себе основные функции приложений таких как Illustrator, InDesign, Pages, GoLive, Canvas, Dreamweaver, QuarkExpress, и упорядочил их для удобного использования, он недорогой, предназначен для OS X. Среди прочего, вы можете добавить ссылки на текст и графику с помощью drag-n-drop, имееется инструмент который автоматически создает навигацию и индекс, и вы можете создавать PDF и веб-сайты из одного документа.

Мастер Йода рекомендует:  Краткий обзор обновления Node.js 7.8.0

WYSIWYG Web Builder
WYSIWYG Web Builder
Web Builder является высоко настраиваемым и расширяемым приложением с множеством функций, скриптов и шаблонов. Новые элементы дизайна могут быть добавлены с помощью drag’n’drop, имеется множество скриптов. Возможно редактирования изображений в рамках программного обеспечения.

PayPal eCommerce Tools интегрирован; имеется RSS Feed объект, блог с встроенным RSS и SiteMap генератор совместимый с Google. Редактор также имеет множество расширений, таких как защита паролем, RSS канал, RSS парсер, фотоальбом и lightboxes.

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

Обзор всех существующих WYSIWYG web редакторов для сайтов

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

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

В ТЕМУСТАТЬИ

UDP против TCP, или Будущее сетевого стека (highload обсуждение)

Обзор Elementor Pro: мощный визуальный конструктор для WordPress

Основные требования к WYSIWYG редакторам

Я попробовал собрать вместе требования, которые обычно хотелось бы видеть внедрёнными в WYSIWYG редакторы. Получился такой вот примерно список:

  • Лицензирование (желательно Открытая свободная для использования для использования лицензия);
  • Кроссбраузерность отображения;
  • Поддержка полной работы с ссылками (возможность их сокращения и обязательно подсвечивание);
  • Поддержка работы с таблицами, в удобном формате вставки и создания таблиц;
  • Создание цитат, поддержка заголовков, списки, фон, цвет шрифта и выбора шрифта;
  • Поддержка копирования картинок и изображений, возможность универсально вставлять картинки;
  • Поддержка вставки различных форматов файлов: pdf и прочее;
  • Наличие смайлов, поддержка emoji;
  • Удобный интерфейс работы с редактором;
  • Наличие справочной страниц для работы;
  • Просмотр и редактирование исходного кода;
  • Поддержка html редактирования страницы контента;
  • Выравнивание текста, поддержка операций форматирования текста;
  • Наличие языковых версий перевода редактора;
  • Поддержка вставки видео с крупных сайтов, embed вставка медиа данных.

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

Список существующих WYSIWYG редакторов

Лицензия стоит $800
Проблема с историей
Работает как плагин для jQuery
Подсветка ссылок не работает по переводу строки
Размер 173 + 5 (css) + 25.4 (css) + 88 (jQuery) = 290.5kb

Лицензия стоит $30
Проблема с переводом строки (межстрочный интервал первой строки отличается от последующих)
Размер: 63 (css) + 202 (js) = 263
Тормозит перенос строк (или мне так кажется)
Отсутствует загрузка файлов отличных от изображений
Нет подсветки ссылок
По функциональности и интерфейсу напоминает Froala!

$500 в месяц!
Облачное решение
Переопределено контекстное меню (вставка текста только с помощью клавиатуры)

Лицензия стоит от $1 за пользователя
Очень жирный и неуклюжий
ckeditor.com/
Лицензия стоит $1000+
Неудобный интерфейс для работы с таблицами, ссылками и изображениями
Размер: 200 (js) + 280 (css) = 480kb
Нет вложенных цитат

Лицензия стоит $200
Минус: добавление таблиц
Можно копировать изображения!
Для форматирования текста используются дополнительные плагины

Открытая свободная для использования лицензия
Отсутствует интерфейс перемещения файлов
Неудобный интерфейс создания таблиц
Есть подсветка блока при наведении
Нельзя задать цвет

Открытая свободная для использования лицензия
Работает как плагин для jQuery
Отсутствует интерфейс перемещения файлов
Неудобное редактирование таблиц
Таблицы нельзя редактировать

Открытая свободная для использования лицензия
Отсутствует интерфейс перемещения файлов
Есть API
Странный он, но в целом почти все есть

Открытая свободная для использования лицензия
Используется React
Нельзя сделать перевод строки в таблицах
Нельзя копировать изображения
Отсутствует интерфейс загрузки и перемещения файлов
Есть API

Открытая свободная для использования лицензия
Долго загружается
Мало функциональный интерфейс
Отсутствует интерфейс загрузки и перемещения файлов
Нет таблиц

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

Открытая свободная для использования лицензия
Работает как плагин для jQuery
Отсутствует интерфейс загрузки и перемещения файлов

Открытая свободная для использования лицензия
Отсутствует интерфейс загрузки и перемещения файлов
Нет таблиц
Нет API

Открытая свободная для использования лицензия
Отсутствует интерфейс загрузки и перемещения файлов
Нет таблиц
Нет API

Открытая свободная для использования лицензия
Отсутствует интерфейс загрузки и перемещения файлов
Нет таблиц
Нет API

Открытая свободная для использования лицензия
Отсутствует интерфейс загрузки (кроме изображений) и перемещения файлов
Нет таблиц
Размер: 200 (js) + 280 (css) = 480

Открытая свободная для использования лицензия
Отсутствует интерфейс загрузки и перемещения файлов
Нет таблиц
Небольшая функциональность

Открытая свободная для использования лицензия
Небольшая функциональность


Открытая свободная для использования лицензия
Жуткий интерфейс

Открытая свободная для использования лицензия
Жуткий интерфейс

Открытая свободная для использования лицензия
Используется React
Нет таблиц
Отсутствует интерфейс загрузки и перемещения файлов
Это все-таки фреймворк, а не готовый модуль

Открытая свободная для использования лицензия
Markdown-редактор

Открытая свободная для использования лицензия
Какая-то слабая альтернатива Офису

Работает как плагин для jQuery
Мало функциональный интерфейс

Мало функциональный интерфейс

Работает как плагин для jQuery
Использует Boostrap
Небольшая функциональность

Открытая свободная для использования лицензия
Мало функциональный интерфейс

Открытая свободная для использования лицензия
Работает как плагин для jQuery
Мало функциональный интерфейс

Открытая свободная для использования лицензия
Работает как плагин для jQuery
Мало функциональный интерфейс
Отсутствует API

Открытая свободная для использования лицензия
Отсутствует интерфейс загрузки и перемещения файлов
Небольшая функциональность
Нет таблиц
Нет колорпикера
Есть API
Небольшой размер 35KB

Открытая свободная для использования лицензия
Заброшенный клон Medium’a
github.com/michelson/Dante
Открытая свободная для использования лицензия
Клон Medium’a

Открытая свободная для использования лицензия
Небольшая функциональность
wysihtml.com/
Открытая свободная для использования лицензия
Отсутствует интерфейс

Открытая свободная для использования лицензия
Заброшен

Открытая свободная для использования лицензия
Небольшая функциональность

Открытая свободная для использования лицензия
Используется React
Небольшая функциональность
Отсутствуют таблицы и пр.
Обзор WYSIWYG-решений:

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

Открытая свободная для использования лицензия
Мало функциональный интерфейс

Открытая свободная для использования лицензия
Заброшен
Мало функциональный интерфейс

Открытая свободная для использования лицензия
Мало функциональный интерфейс
Небольшая функциональность

Открытая свободная для использования лицензия
Мало функциональный движок

Итоговый вывод по web редакторам

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

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

Визуальные редакторы для быстрого создания сайтов

Сергей и Марина Бондаренко

25 августа 2010

Существует множество способов создания собственного сайта – от использования готовых шаблонов на Narod.ru до обращения по объявлению типа «создание сайтов за два дня от 300 рублей». Создать свой собственный блог или простенькую домашнюю страницу может даже ребенок. Именно поэтому похвастаться наличием своего сайта в Сети может почти каждый. Различные сервисы предоставляют в распоряжение любого желающего сайты-конструкторы, которые за считанные секунды создают простенькую личную страницу пользователя. Таких страниц в Интернете сотни и сотни тысяч. Как правило, они похожи друг на друга и не запоминаются. Для тех, кто использует бесплатные онлайновые инструменты для создания личной интернет-страницы, собственный сайт – чаще всего забава, люди создают страничку и забывают про нее. Содержание на ней в большинстве случаев сводится к публикации фотографий своей собаки и нескольких сведений «о себе».

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

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

⇡#WYSIWYG Web Builder 7.1.0

  • разработчик: Pablo Software Solutions
  • размер дистрибутива: 5,5 Мб
  • распространение: shareware
  • русский интерфейс: нет

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

Если у вас нет опыта в web-дизайне, создание своего первого проекта в программе стоит начать с готового шаблона. По умолчанию в WYSIWYG Web Builder имеется около десяти шаблонов разной направленности, а еще несколько десятков можно бесплатно скачать с официального сайта программы. После загрузки шаблона вы получите возможность редактировать любой его элемент.

Для этого можно использовать многочисленные инструменты, размещенные на вертикальной панели. Для удобства они разбиты по категориям: навигация (дерево сайта, меню навигации), рисование (линия, кривая, многоугольник), мультимедийные инструменты (Flash-плеер, плеер YouTube, Java, OLE-объект), средства для работы с web-формами (поле для вставки кода CAPTCHA, флажок, кнопка для загрузки файла, поле для ввода текста), Paypal (различные кнопки для работы с этой системой электронных платежей) и пр. Если какая-либо категория средств вам не нужна в работе, ее можно свернуть, чтобы освободить место на экране для более востребованных инструментов.

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

Несмотря на то, что работая в WYSIWYG Web Builder пользователь видит готовые элементы страницы, в браузере сайт все же может выглядеть немного не так, как в рабочем окне редактора. Для быстрого просмотра внешнего вида страницы в браузере достаточно нажать клавишу F5. WYSIWYG Web Builder откроет проект в обозревателе, который используется в системе по умолчанию. Если нужно просматривать страницы сразу в нескольких браузерах, их можно добавить в список.

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

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

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

⇡#Web Page Maker 3.21

  • разработчик: www.webpage-maker.com
  • размер дистрибутива: 3,66 Мб
  • распространение: shareware
  • русский интерфейс: нет

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

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

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

Основную часть окна программы занимает рабочая область, а справа находится панель Site Contents. При помощи этой панели удобно управлять страницами сайта, а также отдельными элементами страниц. На вкладке Elements отображаются все блоки страницы, и щелкая по каждому из них, можно сразу же видеть, где он находится. Кроме этого, тут же можно вызвать окно свойств каждого элемента или удалить ненужные блоки. Что касается набора инструментов для создания структуры сайта, то тут стоит отметить возможность создания новой страницы на основе уже существующего в Интернете ресурса. Стоит указать его адрес, и Web Page Maker загрузит страницу, разобьет ее на блоки и сделает их доступными для редактирования.

Чтобы сделать сайт более живым, можно использовать анимационные эффекты. Примеры готового кода Javascript можно найти в библиотеке Web Page Maker. Используя их, можно изменить цвет прокрутки окна, разместить в углу экрана часы, показывающие текущее время, добавить слайд-шоу и т.д.

Когда работа над сайтом будет завершена, проект можно сохранить на жестком диске или же сразу загрузить на FTP-сервер. Причем, дополнительный клиент для этого не нужен — Web Page Maker имеет встроенные средства для работы с FTP.

⇡#CoffeeCup Visual Site Designer 6.06

  • разработчик: CoffeeCup Software
  • размер дистрибутива: 17,6 Мб
  • распространение: shareware
  • русский интерфейс: нет

Разработчики CoffeeCup Visual Site Designer, вероятно, по жизни руководствуются лозунгом «заработай на всем, на чем только можно заработать». Поэтому нужно иметь в виду, что, покупая этот визуальный редактор за $49, вы не получите в свое распоряжение все те функции, на которые можно рассчитывать после приобретения большинства других подобных программ.

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

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

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

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

CoffeeCup Visual Site Designer имеет встроенный FTP-клиент, при помощи которого можно загружать сайт на удаленный сервер. Если, загрузив сайт, вы решите внести в некоторые его страницы изменения, можно будет воспользоваться функцией синхронизации данных. В этом случае программа загрузит те страницы, которые были изменены. При необходимости, не покидая CoffeeCup Visual Site Designer, можно даже полностью удалить сайт с сервера.

⇡#WebSite X5 Evolution 8

  • разработчик: Incomedia
  • размер дистрибутива: 15,3 Мб
  • распространение: shareware
  • русский интерфейс: есть

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

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

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

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

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


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

На четвертом этапе WebSite X5 Evolution предложит указать некоторые дополнительные настройки, например, определить внешний вид вводной страницы, задать параметры отображения flash-рекламы, добавить на сайт блог и ленту RSS-новостей.

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

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

Пожалуй, единственным неудобством при работе с WebSite X5 Evolution является невозможность предварительного просмотра страниц в браузере. Если нужно увидеть, как будет выглядеть сайт, можно использовать функцию «Тест», однако на генерацию проекта требуется некоторое время. Кроме того, программа генерирует страницы в собственном просмотрщике, созданном на движке Internet Explorer.

⇡#KompoZer 0.7.10

  • разработчик: Fabien Cazenave
  • размер дистрибутива: 7,9 Мб
  • распространение: бесплатно
  • русский интерфейс: есть

KompoZer – бесплатный визуальный web-редактор с открытым кодом. Программа доступна не только для Windows, но и для Mac, а также для Linux. Редактор создан на движке Gecko, на котором работает широко известный браузер Firefox. Это дает ряд преимуществ: во-первых, движок прекрасно поддерживает современные web-стандарты, такие как XML, CSS и JavaScript. Во-вторых, возможности редактора, основанного на Gecko, могут быть расширены за счет подключаемых модулей.

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

В программу интегрирован FTP-клиент, причем, его можно использовать не только для загрузки готового проекта, но и для быстрого редактирования страниц уже размещенного на сервере сайта. Указав данные для входа на сервер, можно перемещаться по дереву каталогов и выбирать страницы для редактирования. Их содержимое будет загружаться в окне KompoZer, и редактировать их можно прямо «на лету».

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

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

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

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

⇡#BestAddress HTML Editor 17

  • разработчик: Multimedia Australia
  • размер дистрибутива: 7,1 Мб
  • распространение: shareware
  • русский интерфейс: нет

Когда пользователь решает изучить какую-нибудь область, например, компьютерную графику, видеомонтаж или программирование, он часто задает вопрос более опытным товарищам — с какой программы лучше начинать осваивать новое ремесло. В некоторых случаях, действительно, лучше в начале использовать простые инструменты, а затем, разобравшись с их возможностями, переходить к более продвинутым редакторам. Что касается BestAddress HTML Editor 2010 Professional, можно сказать, что эта программа имеет все шансы стать первым и последним инструментом для начинающего веб-разработчика.

Работа в режиме визуального построения веб-страницы напоминает работу с конструктором – можно самостоятельно задавать размеры и цвет элементов, размещать по своему усмотрению кнопки, графику, меню и прочие компоненты сайта. Удобное форматирование, почти как в текстовом редакторе, может использоваться для управления положением любых элементов страницы. Шаблонов в BestAddress HTML Editor 2010 Professional вы не найдете, зато есть возможность загрузки веб-страницы, расположенной по указанному адресу. Открыв страницу в программе, можно затем отредактировать ее.

Редактор может автоматически загружать проект на сервер — для этого программа использует прилагающийся к ней FTP-клиент Digital FTP Access.

В BestAddress HTML Editor 2010 Professional имеются и профессиональные инструменты для написания кода. Новички, желающие понять принципы работы и написания HTML, CSS, Java и PHP-кода, могут обратиться к документации. В ней изложены самые главные правила написания кода, такие как — назначение тегов, примеры простейших операций и т.д. Несложные и понятные уроки дают краткое представление о структуре HTML и вводят новичка «в курс дела».

⇡#Заключение

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

10 лучших WYSIWYG-редакторов текста и HTML для ваших проектов

Дать пользователям возможность форматирования текста без изучения дополнительного кода – это то, над чем разработчики усердно стараются последние несколько лет. И все не напрасно, они уже добились значительно прогресса. Представляем вам 10 наиболее используемых WYSIWYG-редакторов. Надеемся, что вы подберете что-то для собственных проектов.

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

TinyMCE представляет собой бесплатный javascript HTML WYSIWYG-редактор. Его легко внедрить в сайт, и он предоставляет широкий ряд возможностей по настройке и изменению внешнего вида. TinyMCE, наверное, самый «завершенный» редактор в нашей сегодняшней подборке. Почти MSWord.

CKeditor – это новый FCKEditor, который раннее завоевал звание лидера на рынке. Редактор разработан на его основе, и нацелен на то, чтобы исправить, с чем возникали проблемы в FCKEditor. В результате мы получаем высокопродуктивный WYSIWYG-редактор, который предлагает все функции, которыми вы обычно пользуетесь в MSWord или Open Office.

04. YUI Rich Text Editor

YUI Rich Text Editor – это графический интерфейс пользователей от Yahoo, который превращает обычное поле ввода текста в полноценный WYSIWYG-редактор. Приложение предоставляется в различных версиях, с различными свойствами и наполнением. Но используя любую из версий, вы получите все необходимые для редактора функции.

Markitup – это плагин для jQuery, который позволяет вам превратить обычное поле ввода текста в редактор тэгов и форматирования. Html, Wiki и BBcode – это всего лишь немногое из того, что предлагает плагин. Markitup – это не WYSIWYG-редактор, но это не делает его хуже, так как он предлагает вам весь требуемый функционал.

FreeTextBox представляет собой HTML-редактор, предназначенный специально для ASP.NET. Внешний вид редактора очень напоминает Microsoft Word. В бесплатной версии действительно не так много функций, но есть все требуемые.

WYSIWYG-редакторы, в большинстве своем, сейчас представляют плагины для популярной библиотеки jQuery, и в меньших случаях – Mootools. MooEditable вполне заполняет этот разрыв, представляя собой простую, но очень эффективную javascript-библиотеку. Если вы фанат Mootools, то у вас не возникнет с ней проблем.

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

09. Spaw Editor — сайт умер

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

Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

10 отличных бесплатных Rich-Text редакторов текста

Quill: Open Source многофункциональный текстовый редактор с API

Упрощённый WYSIWYG-редактор на базе Bootstrap: Summernote

Sir Trevor: полностью переработанный многофункциональный редактор контента

Redactor: великолепный WYSIWYG-редактор на jQuery

WYSIHTML5: легкий редактор текста с валидной HTML5-разметкой

Intype: быстрый и гибкий текстовый редактор для разработчиков

Mercury: WYSIWYG-редактор на HTML5

HTML5-редактор Aloha

jQuery-плагин для редактирования WYSIWYG HTML – CLEditor

  • 26.10 | 18:00 —

Топ UX тренды для банкинга в 2020 году

2009—2014 © CoolWebmasters.Com — онлайн-журнал для профессиональных веб-дизайнеров и разработчиков. Все права защищены.
Наш онлайн-журнал предоставляет самую свежую и актуальную информацию для профессиональных веб-дизайнеров и разработчиков в виде переводов статей и новостей, полученных с зарубежных информационных ресурсов. Дизайн и разработка сайта — лаборатория D.L.E. Templates.Com

Копирование материалов сайта разрешено только с указанием активной индексируемой гиперссылки на наш сайт!

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

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

Почему мы написали свой WYSIWYG редактор

Эта коллекция из 9 статей будет посвящена написанию хорошего WYSIWYG редактора.

В начале лета мне предложили разработать блог на WordPress. Дизайн был готов, поэтому я сразу приступил к разработке. Когда всё было готово и мы запустили блог, я обратил внимание на редактор постов WordPress. Поискав его аналоги, я не нашёл хорошего WYSIWYG редактора, который был бы в свободном доступе. Все редакторы, которые я нашёл, отличались только визуально, а под капотом у всех голый атрибут contentEditable. Я рассказал об этом Егор Хлебников и мы решили подробнее изучить эту тему.

Что такое WYSIWYG редактор

Чаще всего “What You See Is What You Get”, на русский язык переводят так: “Что видишь, то и получишь”. Этот способ используют чаще всего для создание визуального редактора.

Почему сложно написать хороший редактор? Чуть позже мы ответим на этот вопрос.

Как он работает в браузере

В основе лежит API браузера, а именно такие методы как: contentEditable и execCommand. Что значат эти слова?

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

execCommand — это список функций, которые браузер предоставляет для работы с контентом в редактируемой области. В случае использования contentEditable вызов execCommand влияет на активный редактируемый элемент.

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

Плохой редактор состоит из голого атрибута contentEditable и вызовов функций execCommand.

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

Почему необходимо переопределять стандартное поведение браузера

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

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

Использование execCommand — это похоже на не очень хороший продукт, при одних условиях он работает хорошо, при других даже не запускается.

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

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


DOM должен быть четко сопоставим с Видимыми материалами.

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

Представим работу функции Render(DOM). Она отрисовывает все, что мы добавляем в видимую область.

То есть, для произвольного X у нас всегда должен быть один Y. В случае execCommand браузеры по-разному реализуют его работу. Например вы выделили кусок текста, нажали Ctrl+B и он стал выделен BOLD. И у вас получается следующие вариации кода:

text

Может показаться, что визуально мы получим одно и тоже, но это не совсем так. Здесь обязательно нужно учитывать DOM. В этом случае, для одного действия ( X), мы получили на выходе 3 возможных результата ( Y). Что нарушают нашу аксиому.

Мы же не хотим, чтобы в Google Chrome мы получали одну верстку, а в Safari другую. То есть, верстка статьи будет зависеть от среды, в которой её пишут. Так быть не должно.

Этой информации достаточно для понимания почему нам нужно переопределять поведение браузера. Больше доказательств здесь.

Как мы это будем делать

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

Технологии:

Мы будем использовать: HTML, CSS(SCSS), JS(ES8), Gulp + Babel 7. Если с HTML и CSS всё стандартно, то для чего нам сборщик в таком маленьком проекте?

Есть 2 причины для этого. Во-первых, мы уже привыкли работать со сборщиком и его настройка не занимает много времени. Во-вторых, мы используем ES8 стандарт JavaScript(там есть полезные фичи для нас), который не поддерживается браузерами, поэтому нам нужно его компилировать в ES5, который все браузеры воспринимают нормально.

Best WYSIWYG Editors Software

WYSIWYG (what you see is what you get) editors are used to create text and media content that appears to the creator as it will upon publication or print. This means those creating text or other pages/presentations can view and edit their content in a mode that excludes the HTML. While the code still exists, it is not the default viewing setting of these rich-text editors, but rather it exists in a separate tab or setting. WYSIWYG editors are useful tools for those wishing to create internet content but who have no programming or code writing knowledge, or for those who do have coding knowledge but wish to view projects in their final format. They are often utilized within the context of website building, app development, and content management, allowing users to visualize content before completion or publication.

To qualify for inclusion in the WYSIWYG category, a product must:

NVU — чистый WYSIWYG редактор HTML

Этот Open Source проект Linspire по созданию визуального (WYSIWYG) HTML редактора приближается по функциональности и удобству к таким монстрам сайтостороения, как FrontPage и Dreamweaver. Основой для создания NVU служит код Mozilla Composer со всеми вытекающими из этого возможностями: поддержка расширений, смена тем оформления, правильный и чистый код на выходе, соответствующий современным стандартам.

Среди функций есть весьма удобные, например, менеджер сайтов, позволяющий редактировать страницы на удаленном сервере, встроенный редактор CSS c предварительным просмотром стилей, цветная подсветка синтаксиса в режиме редактирования кода, проверка орфографии и многое другое. Пользоваться им не просто удобно, а очень удобно. Страницы открываются в табах, между которыми можно перетаскивать куски кода, великолепная разметка страниц, предварительный просмотр, поддержка шаблонов — все это делает работу с программой удобной и понятной даже новичкам. Программа прекрасно чувствует себя во всех Windows, Linux и Mac OS. Работает с флешки без администраторских прав, сам пользуюсь. Есть русскоязычное сообщество поддержки разработки программы.

Почему мы написали свой WYSIWYG редактор

Эта коллекция из 9 статей будет посвящена написанию хорошего WYSIWYG редактора.

В начале лета мне предложили разработать блог на WordPress. Дизайн был готов, поэтому я сразу приступил к разработке. Когда всё было готово и мы запустили блог, я обратил внимание на редактор постов WordPress. Поискав его аналоги, я не нашёл хорошего WYSIWYG редактора, который был бы в свободном доступе. Все редакторы, которые я нашёл, отличались только визуально, а под капотом у всех голый атрибут contentEditable. Я рассказал об этом Егор Хлебников и мы решили подробнее изучить эту тему.

Что такое WYSIWYG редактор

Чаще всего “What You See Is What You Get”, на русский язык переводят так: “Что видишь, то и получишь”. Этот способ используют чаще всего для создание визуального редактора.

Почему сложно написать хороший редактор? Чуть позже мы ответим на этот вопрос.

Как он работает в браузере

В основе лежит API браузера, а именно такие методы как: contentEditable и execCommand. Что значат эти слова?

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

execCommand — это список функций, которые браузер предоставляет для работы с контентом в редактируемой области. В случае использования contentEditable вызов execCommand влияет на активный редактируемый элемент.

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

Плохой редактор состоит из голого атрибута contentEditable и вызовов функций execCommand.

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

Почему необходимо переопределять стандартное поведение браузера

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

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

Использование execCommand — это похоже на не очень хороший продукт, при одних условиях он работает хорошо, при других даже не запускается.

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

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

DOM должен быть четко сопоставим с Видимыми материалами.

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

Представим работу функции Render(DOM). Она отрисовывает все, что мы добавляем в видимую область.

То есть, для произвольного X у нас всегда должен быть один Y. В случае execCommand браузеры по-разному реализуют его работу. Например вы выделили кусок текста, нажали Ctrl+B и он стал выделен BOLD. И у вас получается следующие вариации кода:

text

Может показаться, что визуально мы получим одно и тоже, но это не совсем так. Здесь обязательно нужно учитывать DOM. В этом случае, для одного действия ( X), мы получили на выходе 3 возможных результата ( Y). Что нарушают нашу аксиому.

Мы же не хотим, чтобы в Google Chrome мы получали одну верстку, а в Safari другую. То есть, верстка статьи будет зависеть от среды, в которой её пишут. Так быть не должно.

Этой информации достаточно для понимания почему нам нужно переопределять поведение браузера. Больше доказательств здесь.

Как мы это будем делать

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

Технологии:

Мы будем использовать: HTML, CSS(SCSS), JS(ES8), Gulp + Babel 7. Если с HTML и CSS всё стандартно, то для чего нам сборщик в таком маленьком проекте?

Есть 2 причины для этого. Во-первых, мы уже привыкли работать со сборщиком и его настройка не занимает много времени. Во-вторых, мы используем ES8 стандарт JavaScript(там есть полезные фичи для нас), который не поддерживается браузерами, поэтому нам нужно его компилировать в ES5, который все браузеры воспринимают нормально.

Vavik 96

Интернет дайджест для вебмастеров и фотографов

8 полезных WYSIWYG-HTML редакторов

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

Если вы ищете бесплатный WYSIWYG HTML-редактор, то эта статья, я надеюсь, поможет Вам найти найти редактор, который соответствует Вашим требованиям.

1. Open Source Online HTML Editor: Xinha

Xinha – редактор с открытым исходным кодом, поддерживает все популярные браузеры, включая Internet Explorer 6+ , Firefox 1.5+ (PC, Mac) ,Safari 3+ ,Opera 9+.

2. WYMeditor – web-based XHTML editor

WYMeditor представляет собой WYSIWYG редактор, который помогает подготовить XHTML-CSS-совместимый код. WYMeditor редактор позволяет сосредоточить внимание на структуре и содержании документа, а не на визуальном макете.

WYMeditor очень легко интегрировать в свою систему управления контентом (CMS). WYMeditor выпущен под двойной лицензией – Open Source MIT и GPL лицензии .

3. TinyMCE – JavaScript WYSIWYG Editor

TinyMCE является WYSIWYG редактором с открытым исходным кодом. TinyMCE очень легко интегрировать в свою систему управления контентом (CMS). Он поддерживает все основные веб-браузеры, включая: Mozilla, MSIE, Firefox, Opera, Safari и Chrome, а также поддерживает Ajax для сохранения и загрузки содержимого!

4. Free WYSIWYG BBCode Editor

WYSIWYG editor BBCode – этот редактор может быть использован на форумах, в системах управления контентом (CMS), блогах и многих других PHP-скриптах. Он поддерживает все основные веб-браузеры, включая: Mozilla, MSIE, Firefox, Opera, Safari и Chrome.

5. open WYSIWYG editor

openWYSIWYG является кросс-браузерным WYSIWYG редактором, полностью написан на JavaScript и DHTML.
Это позволяет пользователю легко редактировать текст, с простыми функциями редактирования, как полужирный, курсив, отступы, цвет текста, шрифт и размер шрифта, ссылки, цвет фона, а также проверка правописания . openWYSIWYG совместим с популярными интернет-браузерами, включая: IE 5.5 + (Windows), Firefox 1.0 +, Mozilla 1.3 +.

6. markItUp – jquery markup editor

markItUp – представляет собой легкий, настраиваемый JavaScript-плагин. Он легко конфигурируется, поддерживает все основные веб-браузеров, включая: IE7, Safari 3.1, Firefox 2, Firefox 3. IE6 и Opera 9 +. Также поддерживает горячие клавиши.

7. CKeditor

Полный аналог TinyMCE.
(Браузеры: Firefox 1.5+, Opera 9.50+, Safari 3.0+, Camino 1.0+, Internet Explorer 5.5+, Google Chrome)

9 лучших бесплатных редакторов кода на 2020 год

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

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

1. Notepad++

Notepad ++ — это бесплатный текстовый редактор для Windows. Он написан на C ++ и использует чистый Win32 API и STL, что дает меньший размер программы при более высокой скорости выполнения. Это — чрезвычайно популярный текстовый редактор.

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

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

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

2. Atom

Atom — это текстовый редактор, который работает в различных операционных системах, таких как Windows, OSX и Linux.

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

  • Он находит, просматривает и заменяет текст при вводе в файл или во всех ваших проектах.
  • Вы можете разделить интерфейс на несколько панелей, чтобы можно было легко сравнивать и редактировать код в разных окнах.
  • Он также имеет функцию автозаполнения, которая помогает писать коды быстрее.
  • Браузер файловой системы
  • Быстрый поиск и замена по всему проекту
  • Несколько курсоров и выбор
  • Несколько панелей
  • Сворачивание кода
  • Удобный интерфейс
  • Импорт грамматик и тем TextMate

3. Sublime Text

Это — один из лучших редакторов кода для Windows, компактный и мощный. Помимо IDE-подобных функций у него есть Python Scripting с возможностью настройки редактора. Давайте посмотрим на возможности Sublime Text:

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

4. Visual Studio Code

Это — один из лучших, бесплатных редакторов кода для ПК (https://code.visualstudio.com/) . Это кроссплатформенное программное обеспечение, которое работает на Mac, Windows и Linux. Давайте посмотрим на возможности кода Visual Studio:

  • С помощью функции Intellisense вы получаете не только автозаполнение и подсветку синтаксиса, но и интеллектуальное завершение на основе типов переменных, определений функций и многого другого.
  • Он имеет встроенные команды для Git.
  • Он настраивается с помощью расширений для установки языков, отладчиков, тем и многого другого.

5. UltraEdit

Еще одно мощное, быстрое и безопасное программное обеспечение, UltraEdit (https://www.ultraedit.com/) , является одним из лучших текстовых редакторов, которые легко настраиваются и прекрасно работают для выделения кодов.

Он платный, но прежде чем его приобрести вы можете попробовать бесплатную пробную вервию, то есть оценить работу данного программного обеспечения. Давайте посмотрим на особенности UltraEdit:

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

6. Araneae

Araneae (https://www.ornj.net/software/araneae) — один из лучших редакторов кода для Windows. Это простой в использовании текстовый редактор. Давайте посмотрим на особенности Araneae:

  • Он поддерживает HTML, XHTML, JavaScript, CSS, Ruby, PHP и другие.
  • Вы можете добавить настраиваемые быстрые клипы и получить мгновенный предварительный просмотр браузера.
  • Вы можете просто перетащить файлы и изображения, чтобы начать работу.

7. Brackets

Brackets (https://brackets.io/) — это открытый, легкий и мощный редактор кода для Windows. На этот раз это не просто проект, управляемый сообществом, за ним стоит Adobe. Да, да именно Adobe. Так что инструмент стоит попробовать. Особенности брекетов:

  • Благодаря встроенному редактору Brackets покажет вам все CSS-селекторы с идентификатором во встроенном окне, чтобы упростить работу с кодом.
  • Вы можете увидеть результаты изменений, которые вы внесли в CSS и HTML, с помощью функции предварительного просмотра.
  • Программное обеспечение может помочь вам выделить и быстро отредактировать ваши файлы LESS и SCSS.

8. Vim

Vim (https://www.vim.org/) является одним из надежных текстовых редакторов, интегрированных с множеством инструментов. Пройдя курс обучения, вы поймете, почему текстовый редактор спроектирован таким, какой он есть. Особенности Vim:

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

9. jEdit

jEdit (https://www.jedit.org/) — превосходная программа на основе Java, поэтому она работает не только Windows, но и на других платформах. Это очень интересная программа. Давайте посмотрим на особенности jEdit:

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

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

Итак, это список лучших редакторов кода, которые облегчат вашу работу. Ну что у нас на этом все. Всем пока!

Мастер Йода рекомендует:  Использование SSL и HTTPS в WordPress
Добавить комментарий