Краткий список WYSIWYG редакторов / Habr
Однажды мне потребовался WYSIWYG редактор, я помнил как он выглядит, его функции, но не помнил названия. Через 45 минут я все же его нашел… Тогда я поставил перед собой задачу помочь многим, в том числе и себе: сделать сводный список всех чуть более известных WYSIWYG редакторов.
Вступление
Данный топик представляет собой обширный список визуальных редакторов, почти или частично пригодных для использования. Цель, которой я руководствовался, заключался в том, чтобы систематизировать существующие данные, разбросанные по интернету.
TinyMCE
Один из самых распространенных визуальных редакторов, обладает недюжинным функционалом. Есть множество дополнений, по умолчанию установлено множество плагинов.
(Браузеры: Mozilla 1.3+, MSIE 5.5+, Opera 9.0+, Safari, Chrome)
[Официальный сайт | Демо]
CKeditor
Полный аналог TinyMCE.
(Браузеры: Firefox 1.5+, Opera 9.50+, Safari 3.0+, Camino 1.0+, Internet Explorer 5.5+, Google Chrome)
[Официальный сайт]
CLEditor
Незамысловатый визуальный редактор, особенных функционалом не балует. Но сделан вполне добротно, качественно реализованы все функции.
(Браузеры: Firefox 1.5+, Opera 9.50+, Safari 3.0+, Camino 1.0+, Internet Explorer 5.5+, Google Chrome)
[Официальный сайт]
NicEdit
Редактор очень похож на CLEditor. Обладает стандартным функционалом.
(Браузеры: Firefox 1.5+, Opera 9.50+, Safari 3.0+, Internet Explorer 5.5+, Google Chrome)
[Официальный сайт]
elRTE
Очень качественный визуальный редактор. Обладает широким функционалом. Сделан очень качественно.
(Браузеры: Firefox 3.5+, Opera 10+, Safari 3.0+, Internet Explorer 7+, Google Chrome)
[Официальный сайт | Демо]
Spaw
Очень средний визуальный редактор. Обладает стандартным функционалом.
(Браузеры: Firefox 1.5+, Opera 9+, Safari 3.0+, Internet Explorer 5.5+, Google Chrome)
[Официальный сайт | Демо]
Xinha
Неплохой визуальный редактор, отличительная особенность — множество встроенных action’ов. Т.е. настроить его под свои нужды не составит трудностей.
(Браузеры: Firefox 1.5+, Opera 9+, Safari 3.0+, Internet Explorer 5.5+, Google Chrome)
[Официальный сайт | Демо]
Imperavi (Платный)
Достаточно милый редактор, функционал не большой, но его вполне хватает. Существует ряд ошибок связанных с переходом от html к визуальному редактору и обратно. (убираются align’ы) Важно заметить, что Imperavi работает как плагин к JQuery.
(Браузеры: Firefox 1.5+, Opera 9+, Safari 4+, Internet Explorer 7+, Google Chrome)
[Официальный сайт | Демо]
Markitup
Markitup больше похож на удобный редактор html, который больше подойдет профессионалу, нежели рядовому пользователю. Но если вы знаете html, то он может оказаться вполне удобным.
(Браузеры: Firefox 3+, Opera 9+, Safari 3+, Internet Explorer 6+, Google Chrome)
[Официальный сайт | Демо]
Aloha Editor
Неплохой редактор, очень удобен. Однако существует огромный минус, который затмевает почти все плюсы — это отказ от поддержки старых и не очень браузеров (доступны только последние версии браузеров).
[Официальный сайт | Демо]
Mercury editor
Mercury представляет собой цельную веб-страницу, и может быть использован для редактирования целой страницы или отдельных определенных областей. Он поддерживает функцию предварительного просмотра отредактированного содержимого, а также размещение ссылок, изображений, видео и таблиц. Загрузка файлов может быть осуществлена посредством интерфейса drag’n’drop.
Редактор также поддерживает совместную работу нескольких человек. Mercury может быть установлен в качестве отдельного Rails, либо за счет внедрения в код страницы. (Требуется JQuery)
[Официальный сайт | Демо на главной странице]
YUI Rich Text Editor
Визуальный редактор от Yahoo. Как справедливо заметил sdevalex, один из лучших визуальных редакторов. Обладает исчерпывающим функционалом, поддерживает подавляющим большинством браузеров.
[Демо]
MooEditable
Набор функций сильно ограничен, однако порой больше и не требуется.
[Демо]
OpenWysiwyg
Кросс-браузерный полноценный редактор со всеми требуемыми функциями. Он даже включает в себя привлекательные выпадающие меню и кнопки. К сожалению, Chrome не будет поддерживать его.
[Официальный сайт | Демо]
html-5-wysiwyg
Визуальный редактор на HTML5 со всеми вытекающими из этого последствиями. По большей части, редактор является демонстрацией возможностей HTML-5, нежели готовым продуктом.
(Как следует из названия, требуется поддержка HTML5)
[Страничка на code.google.com]
jWysiwyg
Леговесный плагин для jquery.
[Официальный сайт | Демо]
Реформатор
Визуальный редактор от студии Артемия Лебедева.
[Официальный сайт | Демо]
Итог
Надеюсь топик окажется вам полезным. Если вы нашли, что какой-либо визуальный редактор отсутствует, всенепременно напишите мне об этом, я буду вам очень благодарен.
UPD 1: дополнил описание YUI Rich Text Editor (спасибо sdevalex).
UPD 2: добавил jWysiwyg (спасибо mr47).
UPD 3: добавил Реформатор (спасибо kuber).
UPD 3: добавил Реформатор (спасибо kuber).
UPD 4: исправлено: Imperavi стал платным
P.S: 1. если какой не назвал, пишите, исправлю. 2. Если топик не актуален, напишите, уберу.
habr.com
9 лучших WYSIWYG HTML редакторов 2016 года
Визуализация кода уже давно не является приоритетной задачей для разработчиков. В этой статье приводится список из 9 WYSIWYG редакторов, которые используются для этих целей. Рекомендуем ознакомиться с ним на тот случай, если при реализации вашего проекта возникнет подобная задача.
В этом разделе статьи вы найдете несколько замечательных редакторов, которые сделают вашу работу проще и быстрее. А какой же лучший из них?
Выбор редакции: Atom.io
Если бы мы могли порекомендовать вам только один инструмент, мы бы выбрали этот…
На протяжении многих лет было создано много редакторов, но лишь немногие из них остались на высоком уровне или становились еще лучше. Atom.io используется всеми моими друзьями программистами, и я тоже выбираю его.
Если вам нужен лучший редактор HTML WYSIWYG, который в 10 раз сократит время, затрачиваемое на составление кода или его редактирование, то это Atom. Попробуйте его, и вы будете мне благодарны. Atom.io является бесплатным, и он создан командой Github.
Еще один инструмент, заслуживающий похвалы — это Coda, очень крутой редактор для пользователей Mac. У него совершенный и красивый интерфейс, но он стоит $ 99. В данный момент я отдаю предпочтение Atom!
Теперь обзор остальных редакторов.
Демо-версия | Скачать
NicEdit является альтернативой более объемным и сложным визуальным редакторам, он имеет небольшой размер. Также он может похвастаться многими необходимыми для редактора функциями, и этот WYSIWYG редактор онлайн легко интегрировать на сайт.
Демо-версия | Скачать
TinyMCE — это WYSIWYG HTML редактор с открытым исходным кодом, написанный на JavaScript. Он легко интегрируется и легко настраивается с помощью тем и плагинов. TinyMCE является одним из наиболее «полных» редакторов, предлагающих функционал, похожий на MSWord.
Демо-версия | Скачать
CKEditor — это обновленная версия FCKEditor, который ранее был лидером отрасли. В его основу было положено стремление исправить ошибки FCKEditor. Результатом стал визуальный редактор с высокой производительностью, который предлагает функции редактирования, сравнимые по своему уровню с MSWord и Open Office.
Демо-версия | Скачать
WYSIWYG редактор для сайта YUI Rich является элементом управления интерфейса от Yahoo, он превращает простую текстовую панель в полнофункциональный WYSIWYG-редактор. Инструмент поставляется в нескольких версиях различного уровня сложности и с различными функциями, но в каждой из них авторам удается добиться отличной эргономики (без нагромождения кнопок, засоряющих интерфейс).
Демо-версия | Скачать
Markitup – JQuery-плагин, который позволяет превратить текстовые области в редакторы разметки по вашему усмотрению. Синтаксис HTML, Wiki и BBcode — это всего лишь некоторые из поддерживаемых опций. Markitup не является WYSIWYG-редактором, но это не значит, что он не предлагает все необходимые функции. Также он компактный и простой в работе.
Демо-версия | Скачать
FreeTextBox — онлайн HTML редактор WYSIWYG, специально предназначенный для ASP.NET. Внешний вид редактора очень похож на Microsoft Word. В бесплатной версии не реализовано несколько продвинутых функций, но и доступного набора более чем достаточно для полноценной работы.
Демо-версия | Скачать
MooEditable предоставляет простой, но эффективный функционал, который реализован на основе хорошо написанной JavaScript-библиотеки. Если вы поклонник Mootools, то не будете иметь с этим никаких проблем.
Демо-версия | Скачать
OpenWYSIWYG — это кроссбраузерный простой WYSIWYG редактор со всеми необходимыми функциями. Он имеет красивый пользовательский интерфейс, включающий в себя всплывающие элементы и кнопки. Одной из его отличительных особенностей является качественно реализованная работа с таблицами. В то же время, в Google Chrome OpenWYSIWYG до сих пор не поддерживается.
Демо-версия | Скачать
jHtmlArea — это еще один WYSIWYG-редактор, разработанный как плагин для популярной библиотеки JQuery. Он прост в использовании, и содержит только самые необходимые опции. Это позволяет очень легко настраивать все его компоненты: от внешнего вида до языка.
Если вы уже использовали один из перечисленных в этой статье инструментов или знаете лучший WYSIWYG редактор, напишите об этом в комментариях. Мы хотели бы узнать ваше мнение по этому поводу!
Данная публикация представляет собой перевод статьи «10 Best WYSIWYG HTML Editor Collection From 2016» , подготовленной дружной командой проекта Интернет-технологии.ру
www.internet-technologies.ru
25 лучших WYSIWYG редакторов для десктопов от Smashing Magazine (частичный перевод) / Habr
Когда дело доходит до редакторов кода, это чертовски трудно получить четкий обзор всех преимуществ и функциональных возможностей которые могут предложить разные редакторы. Однако, в конце концов требуется по крайней мере один, поэтому очень важно знать, какой редактор лучше всего подходит под ваши личные нужды.WYSIWYG-редакторы зачастую критикуются сторонниками «ручного» создания кода за раздутый, грязный и не совместимый со стандартами исходный код, который эти редакторы производят. Тем не менее, WYSIWYG-редакторы стали намного лучше, в последнее время. Некоторые из них даже действительные и элегантный код.
Иногда вам нужно предоставить своим клиентам самые простые инструменты для редактирования или обновления своих веб-сайтах. И это именно тут подходят WYSIWYG-редакторы.
Мы считаем, что было бы неправильным рекомендовать вам некоторые «лучшие» редакторы, потому что выбор всегда зависит от ваших потребностей, основных целей, навыков и опыта. Поэтому в этой статье мы попытались дать вам обзор разных, полезных и не очень WYSIWYG-редакторов.
Надеемся, Вы найдете некоторых редакторов о которых вы никогда не слышали раньше.. Или, может быть, вы найдете некоторые функции, которые вы пропустите в текущем редакторе или рискнуть экспериментировать с рядом перспективных вариантов для улучшения вашего рабочего процесса. Кроме того, вы можете узнать, что редакторы можно использовать и какие инструменты вам не следует использовать.
Что же означает WYSIWYG?
В таких редакторов можно изменить непосредственно не исходный код ваших документов, а его представление, которое (по-возможности) будут опубликовано в итоговом документе. Таким образом, вместо написания блоков кода вручную (как вы, например, будет делать это в Word или LaTeX), вы управляете проектированием при помощи компонентов, используя окно редактора. Это означает, что вам видите что-то очень похож на конечный результат, хотя документ или изображение еще только создается.
Примечание: эта статья содержит рецензии только desktop-ориентированные WYSIWYG-редакторы, которые работают на Windows, Linux или Mac. Она не дает обзор WYSIWIG-редакторы на JavaScript, но вы можете найти обширный обзор таких редакторов на здесь или здесь.
Adobe Dreamweaver (Win / Mac)
Amaya (Win / Mac / Linux)
RapidWeaver (Mac)
Adobe Contribute
Adobe Golive (Win / Mac)
Microsoft Expression (Win)
NVU (Win / Mac / Linux)
KompoZer (Win / Mac / Linux)
Namo WebEditor 2006 (Win)
Evrsoft First Page 2006 (Win)
Microsoft SharePoint Designer 2007 (Win)
NetObjects Fusion
Quanta Plus (Linux)
Freeway (Mac)
SeaMonkey Composer (Win / Mac / Linux)
Create (Mac)
WYSIWYG Web Builder
Непрофессиональные, для новичков или небольших компаний
iWeb (Mac)
Sandvox (Mac)
Sitegrinder (Win / Mac)
Studioline Web3 (Win)
Bluevoda (Advertising)
Website X5 (Win)
oXygen (Win / Linux / Mac)
www.smashingmagazine.com/2008/05/06/25-wysiwyg-editors-reviewed
P.S.
Перевод будет завтра.
habr.com
WYSIWYG редакторы – выбираем бесплатный WYSIWYG редактор для сайта. — 🚀 Land-site.ru
Большинство начинающих веб-мастеров даже не догадываются про существование таких программ, как WYSIWYG редакторы. Хотя при работе с самостоятельными CMS часто подобные программные продукты выручают. При написании статьи я полагался на несколько критериев. Например, поддержка работы с XHTML, простота работы со скриптами, присутствие API, файловый менеджер. Также отмечу, что программы работают со всеми известными браузерами.
Не у всех программ идентичный функционал. Но некоторым веб-мастерам достаточно минимальных функций для выполнения рабочих задач. Поэтому не всегда нужно выбирать максимально напичканную опциями программу. Я рекомендую остановиться вам на том редакторе, который работает грамотно, не изменяет в негативную сторону код, а редактирует его структурно.
Даже если веб-мастер наслышан про подобные ПО, он зачастую не понимает, в чем польза редакторов и можно ли с помощью них улучшить свой веб-ресурс. Грубо говоря, приложения необходимы для грамотного редактирования и структурирования текстового контента. Зачастую, добавляя новые статьи на сайт, веб-мастера сталкиваются с такой ситуацией, когда после публикации он отображается не так, как задумывал администратор. Все дело в коде – его можно изменить вручную, тем самым преобразовав внешний вид текста. Но гораздо удобнее решать такие задачи с помощью редакторов. То есть, мы устанавливаем межстрочный интервал, выбираем нужный шрифт, делаем гиперссылки, подчеркиваем какие-то слова, при этом не видим код совершенно. Веб-мастеру нужно лишь визуально отредактировать текст, а редактор самостоятельно сгенерирует правильный код.
Другими словами, если вы прекрасно знакомы с HTML, редактор вам ни к чему. WYSIWYG программы подходят для новичков. Насколько масштабно можно отредактировать текст? Все зависит от выбранного вами визуального редактор веб-страниц онлайн формата, либо программного продукта. Масштабность редактирования, в целом, является основным критерием при выборе ПО, сервиса или плагина.
Список лучших WYSIWYG редакторов
1. WYMeditor
Это далеко не ТОП редактор, поэтому русскоязычная аудитория о нем практически ничего не знает. Работать с огромнейшим текстом в такой программе будет довольно неудобно. Если нужно подкорректировать небольшое описание на несколько строчек – можно поработать с WYMeditor.
Базовый функционал присутствует. Можно оформить текст, вставить изображения, сделать гиперссылки. Больше всего радует визуальная составляющая ПО. Четко видна структура редактируемого текста. Код выдает чистейший. Вдобавок он укладывается в одну строку, поэтому большой вес HTML-коду свойственен не будет.
Работать с WYMeditor можно даже если у вас не самый современный браузер. Поддержка API, XHTML, плагинов присутствует.
Что касаемо недостатков, нет возможности организовать даже элементарную таблицу из нескольких столбцов. Отсутствует файловый менеджер. Новичкам редактор можно не понравиться из-за отображения абсолютно всей структуры текста, а не нужной области (и это никак не изменить в настройках), из-за чего при работе с большим текстом необходимо быть крайне внимательным, чтобы работать с нужным участком структуры.
2. TinyMCE
Многофункциональный мощный редактор, генерирующий чистый код. И сразу хотелось бы сказать об одном недостатке – куча кнопок в одной области. Этот пункт не кажется минусом, пока не начинаешь постоянно работать с TinyMCE – и тут начинаются проблемы, поскольку постоянно путаешься в этих кнопках, расположенных совершенно не структурировано.
API отличный, гибкий. Если нужен файловый менеджер, то его необходимо установить вручную. Работа с плагинами приветствуется – хотя вряд ли они вам понадобятся, поскольку огромный функционал может заменить все плагины.
В плане установки программа простейшая. Установка заключается в подкреплении двух скриптов в самом верху кода. Если есть желание, можете дописать скрипт с настройками программы. То есть, изменить скин, язык, структурировать кнопки, но это новички точно не будут делать из-за сложности.
Интерфейс отвратительный. В нем, конечно, легко разобраться, но вопрос в другом – как с таким интерфейсом вообще работать? Опытные пользователи чистят программный код, но не каждый будет браться за эту работу.
Новичкам с API лучше не работать. Поскольку опция крайне сложна в ознакомлении. Понадобится практика и изучение документации, знание английского языка, чтобы нормально настроить API.
Вес достаточно приличный – около одного мегабайта. Не совсем понятно, почему у редактора такой вес. Упрощенной версии для новичков нет.
Не рекомендуем копировать текст из Word для работы с ним в редакторе. Поскольку Ворд постоянно ставит непонятные и ненужные теги, а редактор почему-то их не распознает и не убирает.
Нет горячих клавиш – вроде бы минус не особо значимый, но когда работаешь с огромным текстом и делаешь это постоянно, тратиться приличное время на решение, казалось бы, элементарных задач, справляться с которыми в других программах можно путем нажатия двух клавиш.
3. CKEditor (FCKeditor)
У предыдущего редактора в списке обширность функций лучше, но зато в данной программе легко будет освоиться даже новичку. Работа с API заключается в выполнении простейших задач. Можно настроить любые горячие клавиши. Из крепких недостатков – невозможность кидать тексты из Word. Изменение настроек не помогает – код сильно «пачкается» и приходится его чистить вручную.
Можно немного подкорректировать интерфейс (он несколько неудобен). Нужно создать «topmenu» по типу Google Docs. Сделать это достаточно просто за счет хорошего API. Но недостатки интерфейса некритичные, поэтому новичкам в его изменение вникать даже не стоит.
Присутствует контекстное меню для удобства простым пользователям. Можно написать дополнительный модуль (с этой задаче справится даже обычный пользователь). Нужно всего лишь в архиве со скриптом открыть нужную папку «_samples» и прописать новый модуль. В папке вы также найдете примеры написания модулей.
Синхронизация с файловым менеджером возможна – скачивайте любой менеджер и устанавливайте его за пару секунд.
Весит скрипт чуть ли не полтора мегабайта – это достаточно много, но недочет простительный, поскольку больше мегабайта веса приходится на плагины, а скрипт весит чуть более двадцати килобайт. Так что, если вес не устраивает, удаляйте плагины, которыми не пользуетесь.
4. YUI Rich Text Editor
Странно, что проект не получил массовую известность. Поскольку его выпуском занималась и занимается компания «Yahoo». На первый взгляд, перед нами обычное поле ввода текста. Но, начав с ним работать, поле превращается в WYSIWYG редактор. Есть несколько версий программы. Выбирайте ту, которую подходит вам по функционалу. Если вас интересует простое редактирование текста, можете выбрать любую версию – все они поддерживают WYSIWYG.
5. Markitup
Это НЕ полноценная программа, а именно плагин. Поддержка HTML, Wiki и BBcode. Не столь обширные опции, но чтобы «запилить» красочную статью, опций будет достаточно. Сам проект не позиционирует себя как редактор. Скорее, как плагин, который позволяет немного переоформить текст, сделав код правильным и чистым.
Из преимуществ – компактность и идеальность в ознакомлении для обычных пользователей.
6. FreeTextBox
WYSIWYG редактор онлайн. На первый взгляд – банальный Microsoft Word. Вот только по «чистоте» текста во много раз превосходит Ворд. Самая продвинутая и многофункциональная версия редактора является платной. Это не пугает, в бесплатной версии мы также можем кардинально переработать текст, подготовив его к публикации.
7. MooEditable
Основа проекта — JavaScript-библиотека. Поэтому выглядит ПО просто, несмотря на эффективный и грамотно организованный в плане интерфейса функционал. Возможно, вы слышали про Mootols – если работаете с данным приложением, этот редактор вас полностью устроит.
8. OpenWysiwyg
Кросс-браузерный HTML Online редактор. Первое, что бросается в глаза, прекрасно оформленный и структурированный интерфейс. Все кнопки на своем месте, есть даже всплывающие элементы, чтобы редактор не занимал много пространства.
Одна из ключевых особенностей – возможность реализовывать широкомасштабные таблицы. Из минусов, Google Chrome Open проект не поддерживает. Но вполне возможно, что ближайшие обновления ликвидируют данный недостаток.
9. jHtmlArea
Изначально проект создавался для всем известной библиотеки «JQuery». Далеко не самый известный продукт, но начинающим веб-мастерам я могу его смело порекомендовать. Настроить в редакторе можно абсолютно любые компоненты – начиная от скина приложения, заканчивая количеством пунктов в меню и языком. Опций немного. Акцент сделан исключительно на те функции, которые предназначены именно для оформления текстового контента.
10. NicEdit
Хорошая альтернатива предыдущему редактору из нашего списка. Редактор достаточно объемный. С одной стороны, это хорошо, поскольку можно кардинально редактировать оформление масштабных статей. С другой стороны, придется некоторое время повозиться с изучением редактора, что не совсем удобно, если вам нужно оформить всего лишь несколько строк.
Основной плюс – возможность интеграции WYSIWYG редактора на сайт. То есть, можно будет прямо в браузере сначала оформлять текст, а после сразу же его публиковать на свой веб-портал.
Можно ли оформить текст без WYSIWYG редакторов?
Если вы начинающий веб-мастер, которому необходимо заполнить сайт огромным количеством текстового контента, но при этом изучать HTML нет желания, стоит сделать выбор в пользу онлайн-конструктора сайтов Bloxy.ru.
Вы можете задать вполне логичный вопрос – какое отношение онлайн-конструктор имеет к WYSIWYG редакторам? Все довольно просто. В случае с самостоятельными CMS часто оформление текста генерируется неправильно – появляются лишние теги, сбивается межстрочный интервал. То есть, если текст в Word выглядит грамотно, то при его вставке на сайт оказывается, что оформление никудышное. В случае с Bloxy.ru, а этот проект в какой-то мере визуальный онлайн редактор сайтов, такой ситуации не происходит, поскольку система онлайн-конструктора автоматически генерирует правильный код, работая по принципу редакторов. Вот только в случае с редакторами можем исключительно изменить текст, а Блокси позволяет создать качественный и многофункциональный сайт с возможностью оформления текста прямо в конструкторе без работы с редакторами.
Подытожим
Если вы опытный пользователь, то из списка онлайн редакторов сайтов HTML вам стоит выбрать TinyMCE – это действительно мощный редактор с огромным количеством функций. Но на его изучение новичкам придется потратить много времени. Поэтому если вы обычный пользователь, который только учится работать с контентом, остановите свой выбор на «FreeTextBox», если хотите работать в режиме онлайн. Если вам нужна программа, то MooEditable – ваш правильный выбор.
Отметим, что HTML редактор онлайн больше подходит для непостоянной работы. Если вы ежедневно оформляете текст, лучше иметь под рукой программу, которая гарантированно и бесперебойно будет работать, даже если отсутствует интернет-соединение.
land-site.ru
Программа для визуального создания сайтов: ТОП 5
Здравствуйте, мои дорогие читатели!
Человек всегда должен шагать в ногу со временем. А что может быть современнее и моднее своего собственного сайта? Конечно, если это всего лишь блажь на уровне «хочу и все!», то можно как-то обойтись многочисленными генераторами сайтов, где как в конструкторе – выбрал шаблон и радуйся.
Только вот загвоздка в том, что подобным образом созданный ресурс только номинально будет принадлежать вам. По сути это тот же аккаунт в социальной сети, только с более продвинутыми функциями.
Оставим в покое любительские странички в Интернете, перейдем к более глобальным замыслам. Итак, свой сайт. Как поступить, если в программировании вы ничего не соображаете, а нанимать специалиста дорого? Правильно, стоит воспользоваться доступным вариантом, программа для визуального создания сайтов в этом поможет.
Содержание:
- Что это такое?
- KompoZer
- WYSIWYG Web Builder
- Web Page Maker
- WebSite X5 Evolution 8
- Adobe Dreamweaver
Что это такое?
На самом деле это игрушка для ленивых, скажу я вам. Возможность создать почти профессиональный интернет-сайт без знания html. Хотя зачастую начинающие программисты могут использовать визуальные редакторы, как шпаргалку. Как? Проще простого. Составляешь сайт в редакторе, открываешь код страницы и изучаешь его от начала и до конца.
Прелесть использования таких ПО в том, что в окне программы будет сразу виден внешний вид ресурса на любом этапе работы с ним. Рассмотрим самые популярные редакторы, которые завоевали наибольшую популярность.
KompoZer
В первую очередь, стоит отметить такую программу, как KompoZer. Довольно простой визуальный редактор, который подходит как абсолютным новичкам, так и профессионалам своего дела. Легкое переключение между визуальным видом сайта и кодовой составляющей, возможность сделать интерфейс на русском языке. Это ли не счастье? Ну и плюс бесплатное распространение, работа с css (каскадными таблицами стилей), JavaScript и т.д.
Стоит обратить внимание на то, что данный программный
продукт не предложит вам шаблон, все придется сделать самостоятельно.
Данное ПО создано на движке, на котором функционирует браузер FireFox. Это дает возможность подключить дополнительные модули, которые расширяют возможности программы.
В данной программе можно работать с несколькими страницами, они открываются в отдельных вкладках, что позволяет быстро переключаться с одной странички на другую.
WYSIWYG Web Builder
Единственным серьезным недостатком этой программы является отсутствие интерфейса на русском языке. Впрочем, это легко решить, заучив команды или открыв в интернете онлайн-переводчик. Плюс — это же бесплатная версия, а с таким раскладом это маленькое неудобство можно потерпеть.
Что предлагает нам этот редактор? Для полных «чайников» здесь есть готовые шаблоны сайтов в количестве десяти штук. Если вдруг не понравились, то вам прямой путь на официальный ресурс, где есть еще бесплатные шаблоны.
Ну а для тех, чей уровень чуть выше чайника, есть множество инструментов, которые позволят создать конкурентоспособный сайт с множеством интерактивных кнопок и ссылок, собирая его, как конструктор.
Рекомендую проверять, как отображается сайт в окнах браузеров. Это нужно для корректной работы у любого пользователя. Зачем проверять? Разные браузеры используют разные движки и способы отображения веб-страниц.
Web Page Maker
Web Page Maker также не имеет русского интерфейса. Этот редактор конечно попроще и имеет меньше возможностей, но добротный интернет-ресурс с его помощью все-таки создать можно. Больший упор здесь сделали на возможность собрать ресурс по блокам.
Даже есть готовые шаблоны меню. Здесь все можно подстроить под себя, установить там, где надо, и даже оживить сайт анимацией, чтобы не казался совсем уж статичным и застывшим. И самое важное – бесплатно вы получите только определенный набор функций. Для расширения возможностей придется платить.
WebSite X5 Evolution 8
Хорошая новость первая – эта программа имеет русский интерфейс.
Хорошая новость вторая – с ней справится даже абсолютный «чайник». Всего-то надо следовать подсказкам мастера и поэтапно выполнять то, что показывает программа. И можно быть уверенным, что сайт получится без дыр по кодам.
Некоторые этапы можно пропускать, если они вам не нужны. Например кнопки платежных систем. Распространение опять же смешанное, частично бесплатное.
Adobe Dreamweaver
Перейдем к платной, но очень популярной программе даже в среде специалистов. Adobe Dreamweaver является на сегодня самым удобным редактором с самым полным набором функций.
Она поддерживает новейшие языки программирования. Много возможностей цветовой разметки, проверки отображения сайта в разных браузерах и удобная работа в самом визуальном редакторе. Да и в конце концов, если денег жалко, то вполне можно поискать взломанную версию программы в рунете, которая раздается бесплатно.
Итоги этой статьи простые. Если есть спрос, значит есть и предложение. Заиметь свой собственный сайт в Интернете еще несколько лет назад могли только богатые люди и те, кто знает языки программирования. Сегодня это реально даже при наличии низкой зарплаты и без знания html. Было бы желание, как говорится.
В статье приведены краткие обзоры всего нескольких визуальных редакторов для сайтов, но их на самом деле намного больше. Легко можно подобрать тот, который будет удобным лично вам.
Вдохновения вам, творите свои веб-ресурсы различного дизайна, зарабатывайте деньги и помните – будущее за теми, кто шагает в ногу со временем. Не забудьте подписаться на обновления блога, обещаю, что вы еще много интересного сможете узнать в новых редакциях. Поделитесь прочтенным материалом в соц. сетях, возможно, ваши друзья тоже заинтересуются изложенным. До встречи!
С уважением! Абдуллин Руслан
Понравился блог? Подпишись, чтобы получать новые статьи на почту и быть в курсе всех событий!
abdullinru.ru
Выбираем визуальный редактор HTML для сайта
Если с десяток лет назад все, что могли сделать программисты и веб-мастера, так это открыть обычный системный блокнот и приступить к написанию кода, то сегодня даже обычный пользователь может открыть визуальный редактор HTML, написать сайт, при этом даже не видя самого кода. Если веб-мастер занимается сайтостроительством и в большинстве случаев работает с самостоятельными CMS, подобное программное обеспечение становится для него необходимым инструментом.
Такие программы, как редактор сайтов HTML, популярны не только среди новичков в области программирования. Поскольку ПО позволяет значительно экономить время на написании кода. Если раньше необходимо было самостоятельно анализировать код на малейшие ошибки и исправлять все, даже незначительные недочеты, то сегодня достижение подобных целей занимает буквально минуту. Поскольку такие задачи решаются за несколько кликов.
Основные преимущества HTML редакторов
Неважно, используете вы самое лучшее платное ПО, или же скромное приложение, распространяющееся разработчиком бесплатно. В любом случае вы получите такие плюсы от работы с программой, как:
- Возможность выделения синтаксиса при работе с самыми различными современными языками программирования.
- Возможность автоматической генерации правильных конструкций сайта.
- Шанс самостоятельного написания кода для сайта, даже если вы представления не имеете малейшего представления о базовых знаниях HTML.
- Внедрение плагинов, макросов для повышения функциональной составляющей будущего ресурса.
- Устранение ошибок в коде, проверка его грамотности.
И это набор инструментов, который свойственен абсолютно любому приложению. Опций у платных программ значительно больше.
Многие начинающие веб-мастера не совсем видят разницу между текстовым редактором и визуальным редактором для сайта. Оба ПО используются в одной сфере деятельности – в сфере написания сайта. Но решают одну и ту же задачу два приложения совершенно разными методами. Открывая текстовый редактор, вы пишите код самостоятельно без помощи системы – визуальную картинку своего сайта вы видите только после того, как запускаете проект. В случае со вторым ПО, на ваших глазах генерируется код, в целом, сайт, хотя с самим кодом вы не работаете и не видите его.
Такого понятия, как «лучший редактор веб страниц» в принципе не существует. Из представленного списка любое ПО может показаться вам лучшим, если оно способно справляться с необходимыми веб-мастеру задачами. Кому-то достаточно скачать «старый добрый» Notepad++, чтобы «написать сайт», хотя это приложение уже давно потеряло свою актуальность. Другие же пользователи ищут более многофункциональные и удобные в работе программы – например, Adobe Dreamveawer.
Мы не будем рассматривать дорогостоящие и крайне профессиональные приложения. Поскольку их дополнительный функционал новичкам гарантированно не пригодится. Большинство качественных ПО распространяются совершенно бесплатно. Список формировался с учетом функционала программ, их простоты интерфейса. И что самое главное, со всеми представленными приложения смогут работать самые обычные пользователи.
Список лучших визуальных HTML редакторов
Notepad++
Notepad++ — это настоящая легенда из данной категории приложений. Многие критикуют ПО, хотя создавался редактор HTML страниц с одной целью – обучение начинающих программистов. Поэтому если вы заинтересованы данной областью, Notepad в работе вас полностью устроит, хотя в плане простоты он далеко не ТОП, Русификация присутствует. Функционал стандартен и по современным меркам минимален. Грубо говоря, чистый визуальный редактор, позволяющий еще и писать код самостоятельно. Никаких дополнительных опций нет.
PSPad
От Нотепада практически ничем не отличается. Простейший инструмент, позволяющий работать с CSS и HTML кодами. Изменения в коде сохраняются в автоматическом режиме. Если в коде допущена ошибка, например, какой-то тег не закрыт или вы опечатались, PSPad сообщит вам об этом, подсветив неправильный код. Есть опция предпросмотра — то есть, оформили код, далее запустили просмотр готового проекта, который будет происходить не через ПО, а через браузер. Функционал будет побольше, чем у Нотепада. Но с учетом современных требований, PSPad не является лучшим редактором WEB страниц.
KompoZer
Никакой функции предпросмотра нет. Поскольку прямо в процессе работы с программой будет генерироваться наш проект. Вносишь изменения – они сразу отображаются на экране.
Огромный плюс приложения – это возможность работать и с дизайнерской составляющей будущего сайта, и с HTML кодом, который редактируешь в визуальном формате. Если вы не программист, а вам просто нужно откорректировать дизайн сайта, то берете CSS код, меняете его в ПО, отправляете на сайт – все просто.
В целом, проект не совсем подходит для верстки макета веб-ресурса. Он больше подходит для дизайнеров, которым в процессе написания кода нужно видеть, как выглядит сайт и в лучшую ли сторону произошли изменения. Но в то же время изменить структуризацию интернет-сайта, переставить пару блоков с помощью KompoZer можно с легкостью.
Komodo Edit
Если вы опытный разработчик, то вас порадует открытый исходный код продукта. Данный визуальный редактор сайтов – это отличная экономия времени. Поскольку есть функция контекстного автозаполнения тегов, их закрытия. Программа умеет генерировать «случайные текста». Есть возможность увидеть стилевую разметку до публикации проекта. Грубо говоря, это тот инструмент, который не просто позволяет структурировать сайт, но и заполнить его всеми необходимыми функциями и контентом, не выходя из приложения.
Если собираетесь пользоваться Komodo Edit, рекомендуем скачать дополнительные утилиты, которые идут к данной программе. Они значительно расширят функционал редактора.
jEdit
Одно из самых много функциональных приложений. Подсветка синтаксиса – это самая банальная функция ПО. Есть куча плагинов для приложения. И их установить настоятельно рекомендуем, поскольку работать с тегами, да и в целом, с кодом, включая его проверку, станет значительно проще.
Серьезных минусов у HTML редактора для сайта нет. Но если «докапываться», то не понравился интерфейс, который сделан «на коленке». Поэтому нужно с программой кучу часов поработать, чтобы привыкнуть к структуризации ПО.
Aptana Studio
Отличное приложение для тех пользователей, которые с нуля хотят учиться программировать, разрабатывать сайты. Примечательно ПО тем, что в нем есть полноценный функционал не только для написания HTML-кодов, но и полноценных программ. Технических тонкостей у приложения более чем достаточно, поэтому с первого запуска приложения вы вряд ли быстро сверстаете сайт. Из этого списка это самая профессиональная программа.
Fraise
Можно было не включать в этот список данный визуальный редактор на сайт, поскольку работает он только с Apple операционной системой. Тем не менее, среди вас наверняка есть владельцы макбуков. Так как самые популярные ПО в данной категории не всегда выпускаются для Mac OS, приходится довольствоваться редакторами конкретно для этой ОС. Есть функция цветовой подсветки текста. Созданные страницы всегда можно посмотреть до их сохранения. Есть опции, нацеленные на помощь веб-мастеру – они ускоряют написание кода. Синтаксис проверяется за один клик. Большинство стандартных вводимых свойств дописываются автоматически.
Gedit
Функций у приложения минимум. Но эта проблема решается простым способом – установка дополнений, благодаря которым текстовой редактор превращается в веб-редактор.
Если вы установите дополнение, появятся такие опции, как автоматическое заполнение парных элементов кода, автогенерация временного текста, анализ синтаксиса HTML-кода, возможность открытия за один клик в ПО проекта в браузере. Все плагины есть на официальном сайте.
Из сложностей – меню и интерфейс. Так как функций после установки дополнений образуется множество, вдобавок есть еще и три режима работы, новичок без опыта с работы с HTML редакторами для сайта может запутаться.
ICEcoder
Решив скачать данную программу, многие удивляются, узнав, что это браузерное приложение. Как браузер ICEcoder далеко не самый популярный программный продукт. Поскольку пользуются им исключительно веб-мастера, которым необходимо прямо через браузер анализировать код, видеть написанный сайт, корректировать недочеты. Причем для работы с редактором нет необходимости постоянно быть в сети. Все опции работают в локальном режиме. Несмотря на то, что программный продукт является браузером, у него есть все функции, свойственные любому современному и стандартному визуальному редактору на сайт.
Можно работать с базами данных для сохранения и быстрого запуска готовых HTML-кодов.
Можно ли создать сайт без визуального редактора?
Сложно поспорить с тем, что такие программы являются настоящим спасением новичка. Но почему за последние годы их популярность несколько упала? Причина проста, стали популярны онлайн-конструкторы.
Чем они отличаются от редакторов? Если HTML редактор на сайт позволяет просто написать веб-ресурс, то онлайн-конструкторы дают возможность его еще и опубликовать. Когда вы работаете с программным продуктом, после написания кода необходимо найти хостинг-провайдера, приобрести домен, а все это сопровождается денежными расходами, после протестировать сайт, убедиться, что все функции исправны. В случае с онлайн-конструкторами ничего подобного делать не нужно, в том числе и работать с HTML, поскольку код автоматически генерируется.
Мы рекомендуем пользоваться услугами конструктора Bloxy.ru. Основное его преимущество – буквально за несколько кликов можно создать не просто развлекательный или информационный проект, а настоящий интернет-магазин, либо целевую страницу (другими словами, одностраничник). К слову, генерация того же одностраничника через даже профессиональные редакторы занимает значительно больше времени, чем его создание через онлайн-сервис.
То, что с редактором создание веб-ресурса займет больше времени, чем с конструктором, это бесспорный факт. Поскольку при работе с онлайн-сервисом вы просто устанавливаете, перемещаете различные модули, публикуете контент, настраиваете тему дизайна и выполняете другие простые задачи. Сложность редакторов в том – что макет, структуру сайта приходится продумывать самому. Да, редактор сгенерирует код, но не поможет грамотно структурировать веб-ресурс и проработать дизайн. Поэтому большинство новичков делают выбор в пользу онлайн-конструкторов, в которых ты прорабатываешь сайт «от и до» за 5 минут и за это же время отправляешь его на индексацию поисковым системам.
Итог
Начинающим пользователям свой путь в области создания интернет-сайтов мы рекомендуем начать с онлайн-конструкторов. Но и нельзя оспорить факт то, что благодаря HTML-редакторам многие новички обрели навыки программирования и теперь способны увидеть даже самую незаметную ошибку в коде без помощи сторонних программ. HTML-редакторы можно сравнить с учителем, который дает первые навыки и базу знаний, что пригодится при работе с самостоятельным CMS. А онлайн-конструкторы – это возможность быстро реализовать свой интернет-сайт без навыков и знаний.
land-site.ru
WYSIWYG HTML редактор в браузере. Часть 1 / Habr
Это первая часть перевода статьи о свойствах designMode и contentEditable, их поведении и особенностях.В статье рассматриваются базовые принципы и проблемы унификации особенностей редактирования в современных браузерах. Темы рассматриваемые в статье:
- Различные методы включения режима редактирования
- Команды редактирования
- HTML генерируемый в процессе редактирования
- Взаимодействие с DOM
Вступление
В самом первом браузере, созданном Тимом Бернесом-Ли в 1990 году, веб-страницы можно было редактировать непосредственно в браузере в WYSIWYG режиме. Веб рассматривался как среда доступная как для чтения так и для записи. Более поздние браузеры, однако, в основном, давали возможности только для чтения информации, исключая разве что ввод текста в поля ввода форм.
WYSIWYG редактирование в браузере снова стало нормой с выходом Internet Explorer 5: новое свойство designMode позволяло пользователю редактировать весь документ. Сначала эта особенность как то упускалась из виду, возможно, ввиду того, что появилась вместе с массой других не стандартных, доступных только под ОС Windows, проприетарных возможностей IE.
В последние годы остальные браузеры-конкуренты — Mozilla, Safari и Opera (примечание переводчика: Chrome на момент написания статьи еще не появился. Первая бета выйдет только через несколько месяцев.) — последовали примеру IE и тоже реализовали эту возможность. WHATWG работает над стандартизацией режима редактирования — свойства designMode и contentEditable представлены в HTML 5. Похоже что браузерное WYSIWYG редактирование все же становится неотъемлемой частью веба.
В статье рассматриваются базовые принципы и проблемы унификации особенностей редактирования в современных браузерах. Темы рассматриваемые в статье:
- Различные методы включения режима редактирования
- Команды редактирования
- HTML генерируемый в процессе редактирования
- Взаимодействие с DOM
Примечание: Я рассматриваю только особенности редактирования в браузерах: Opera 9.5, Firefox 2+ и Safari 3, так как в предыдущих версиях редакторы были через-чур глючными и неполноценными. А редактор в IE практически не менялся с версии 5.5 )))
Обзор режима редактирования
Режим редактирования делает страницу или ее часть доступной для редактирования. Это выражается в том, что:
- Курсор показывает текущую точку ввода. Пользователь может вводить текст, удалять его и т.д. используя клавиатуру или мышь.
- Некоторые браузеры обеспечивают интерфейсы, позволяющие изменять и двигать изображения, таблицы и абсолютно позиционированные элементы.
- Есть множество встроенных команд — Bold, Italic, InsertLink, Paste, Undo и так далее. (Полужирное начертание, курсивное начертание, вставить ссылку, вставить из буфера обмена, отменить действие и так далее.) Эти команды могут быть вызваны горячими комбинациями клавиш или с помощью скрипта с использованием соответствующего API.
- С использованием Range и Selection API вы можете реализовать любые изменения в HTML. Это можно использовать для реализации нестандартных команд.
- Режим редактирования позволяет изменять HTML. И все. Если вы, например, хотите выслать его на сервер, что бы сохранить изменения, то вам придется написать соответствующий скрипт.
- Команды и поведение редактора в основном не описаны спецификацией и результирующий HTML код сильно отличается в разных браузерах.
- Реализация в IE почти не менялась с выхода IE 5.5 (2000 год). HTML код, который он генерирует может сильно напугать чувствительных людей. Если вы думаете, что уже давным давно увидели последний в вашей жизни тег font, то вас ждет сюрприз! (Примечание переводчика: Уи-и-и-и-и-и-и-и!)
Включение режима редактирования
Есть два способа включения режима редактирования — свойства designMode и contentEditable.
Окно или фрейм становятся доступными для редактирования установкой свойства designMode объекта document в true. (Оговорка: В IE надо получить ссылку на document из объекта window.) Обычно редактируемый блок создается с использованием IFrame и designMode.
Любой элемент, содержащий текст, можно сделать редактируемым установкой свойства contentEditable в true. (contentEditable не поддерживается Firefox 2, поддержка появилась в Firefox 3. Так же она есть во всех актуальных версиях IE, Opera и Safari.)
Редактирование с помощью клавиатуры
Редактирование с помощью клавиатуры и мыши работает более менее так, как можно ожидать от простого текстового редактора. Курсор показывает точку ввода документа и ее можно перемещать по всему документу. Набор и удаление работают вполне предсказуемо. Выделение можно перемещать, удалять и перезаписывать.
Очень приятная особенность — по умолчанию работают redo и undo (запись и отмена действий). (Позже будет описано, как вызвать команду Undo.)
Сложности начинаются когда нажимаются кнопки Enter/Return. Не совсем понятно какой HTML код должен получится в результате и, действительно, этот код сильно отличается в различных браузерах и зависит от контекста. Если курсор находится внутри не пустого тега p, все браузеры закроют его и откроют новый (с теми же атрибутами) и переместят курсор в него. А Mozilla еще и вставит (излишний) элемент br после курсора. Например (в примерах символ вертикальной черты означает курсор):
- <p>bla bla|</p>
И нажатие Enter/Return в IE или Safari:
- <p>bla bla</p>
- <p>|</p>
Если курсор находится в конце не пустого элемента h2, все браузеры закроют h2, но IE и Opera вставят новый элемент p и поместят курсор в него. Safari вставит новый h2 элемент и поместит курсор внутрь. Mozilla не будет создавать никаких дополнительных элементов, но зачем то добавит два дополнительны тега br после курсора. Например:
- <h2>bla bla|</h2>
После нажатия Enter/Return в IE или Opera:
- <h2>bla bla</h2>
- <p>|</p>
А в Mozilla:
- <h2>bla bla</h2>
- |<br><br>
And in Safari:
Если писать текст непосредственно в body (без каких либо элементов-оберток), и нажать Enter/Return, Mozilla вставит br. IE и Opera обернут предыдущий текст в p и создадут новый p. Safari вставит div.
- <h2>bla bla</h2>
- <h2>|</h2>
Если набирать текст внутри div, Safari, Opera и IE закроют текущий элемент div и откроют новый. Mozilla вставит br и поместит курсор после него.
Если вокруг курсора несколько элементов-оберток, то все браузеры закроют (и дублируют) только обертку с наибольшей степенью вложенности. Курсор останется в обертке.
Примечание: Это жутковато! Неожиданно у IE оказался наиболее разумный подход всегда гарантирующий осмысленное применение блочных элементов. Mozilla ведет себя ужасно используя элементы br внутри блочных элементов, благодаря этому невозможно реализовать осмысленную стилизацию текста.
Позиционирование курсора
Курсор перемещается между символами. Не видно, как курсор позиционируется относительно тегов. Логика перемещения остается неизменной вне зависимости от браузера. Относительно блочных элементов: курсор всегда позиционируется внутри блочного элемента с наибольшей вложенностью. Например невозможно поместить курсор между двумя параграфами.
Например, посмотрите сюда; Символ вертикальной черты обозначает возможные положения курсора:
Относительно текстовых элементов, курсор позиционируется вне всех оберток, если находится слева от текста; если он находится в самой правой части, то помещается внутрь оберток. Например:
- <p>|P|1|</p><p>|P|2|</p>
- <div><p>|P|3|</p><div><p>|P|4|</p></div></div>
Так что если вы набираете символы слева от полужирного текста, новый текст будет отображен в нормальном начертании. Если наберете справа, то он тоже будет полужирным.
- <p>|A|<strong><em>B|</strong></em>C|</p>
Удаление
Если вы удаляете границу параграфа, результат будет неизменен: левый блок «побеждает» и содержимое правого блока включается в левый:
Если вы нажмете Bk Sp, то получите:
- <h2>Overskrift</h2><p>|Text</p>
- <h2>Overskrift|Text</h2>
Safari, впрочем, ведет себя умно (или ужасно, в зависимости от точки зрения) и сохраняет представление правого элемента неизменным:
- <h2>Overskrift|<span class=»Apple-style-span» style=»font-size: 16px; font-weight: normal; «>Text</span></h2>
Редактирование объектов
Браузеры поддерживают некоторые дополнительные интерфейсы для редактирования.
IE позволяет изменять размер изображений, таблиц, элементов форм или абсолютно позиционированных элементов перетягивая их уголки (когда объект выделен, то появляется соответствующий контейнер)
Mozilla тоже позволяет менять размер картинок и таблиц, но у нее есть еще и дополнительные элементы управления, которые позволяют создавать в таблице новые колонки и строки. Кроме того Mozilla позволяет изменять положение абсолютно позиционированных элементов.
Интерфейсы управления для всего этого абсолютно проприетарны, различны в каждом браузере и настраивать их нельзя.
От переводчика: Так как хабр отказался публиковать 35кб текста за раз, то разбиваю перевод на две части.
WYSIWYG HTML редактор в браузере. Часть 2
habr.com