Wysiwyg-редакторы

История и описание технологии WYSIWYG

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

Эта концепция была разработана в Information International Inc в начале семидесятых, инженером по имени Ларри Синклер. Первоначально WYSIWYG применялась Синклером для программы разметки документа перед печатью (Page Layout System). На выходе документ должен был получиться такого же вида, как и изображение на экране.

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

Таким образом, в 1974 году эта концепция полностью воплотилась в приложении для компьютера Alto. Bravo — это первое приложение, выпущенное компанией Xerox PARC с полной реализацией технологии WYSIWYG. Приложение Bravo — это текстовый редактор, созданный Чарли Симони и Батлером Лемпсом. Несколько позже Bravo породило, по мнению экспертов, коммерческий текстовый редактор для Xerox Star.

Hewlett Packard выпускает в 1978 году полностью коммерческое приложение, использующее технологию WYSIWYG — BRUNO. Это приложение позволяло графически представлять данные презентации и графиков, на экранах дорогостоящих миникомпьютеров HP1000 и HP 3000. При том, на последней модели, BRUNO обновилось и сменило название на HP DRAW.

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

Пионерами в области WYSIWYG технологий для массового потребления, по праву считаются представители компании Apple. Apple Lisa с января 1983 года, Lisa II, а позже и Macintosh в 1984, комплектовались текстовыми редакторами WYSIWYG. В процессе, это привело к повсеместному упрощению представления данных на экране пользователю от исходного кода к готовому представлению, с которым можно было бы производить всяческие операции.

Полный спектр программ, поддерживающих WYSIWYG технологию в настоящий момент не охватить. Это и текстовые редакторы, которые за время своей эволюции превратились во что-то более новое, это программы для работы с презентациями (Спасибо BRUNO), Web-редакторы, а так же множество других редакторов, работающих с визуальными, звуковыми и прочими представлениями во времени и пространстве. Существуют как готовые совершенные программные технологии, поставляемые в платном варианте, так и множество других программ, которые ещё требуют доработки, так как результат их работы часто отличается от представления данных на экране пользователя.

Будущее технологии WYSIWYG весьма разнообразно. Эта концепция породила множество других идей, которые позволяют упростить работу пользователя с данными. Концепция видоизменялась и породила так же такие концепции: «вы найдёте то, что искали» (YAFIYGI), коммерческая концепция WYSIWYS («То что вы видите, это то что вы подписали»), и множество других серьёзных и шуточных аббревиатур, которые отражают состояние дружелюбного к пользователю программного обеспечения на сегодняшний день.

web-строительство

wysiwyg.txt · создано: 2012/11/14 16:44 — rech · Последние изменения: 2012/11/14 18:03 — rech

Скриншоты сайтов

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

Чей-то «развлекательный портал», я бы сказал просто чья-то личная страничка «все обо всем», сайт с непонятным предназначением.Сайт репродукций картин и постеров, по-моему весьма симпатичен внешне.Сайт фирмы разработчика сайтов.Сайт «Козацька корчма»)) Уж не знаю что это но дизайн сайта зачётнейший.

Редакторы WYSIWYG

WordPress

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

Большинство имеющихся в продаже текстовых редакторов — это WYSIWYG. Сюда входят популярные текстовые процессоры, такие как Microsoft Office, LibreOffice, Google Docs, и редакторы форматированного текста, такие как WordPad и Evernote. Большинство локальных текстовых редакторов позволяют использовать либо язык разметки, либо WYSIWYG. Например, почтовый ящик WordPress позволяет вам переключаться между «визуальным» редактором, который дает вам прямой предварительный просмотр того, что вы пишете, и «текстовым» редактором, который позволяет вам редактировать непосредственно в HTML.

Многие веб-хосты WYSIWYG позволяют создавать веб-сайты, не понимая большого количества кода. Сюда входят популярные сервисы, такие как Squarespace, Wix и Weebly. Они обычно предоставляют интерфейсы «перетаскивания», которые позволяют добавлять блоки содержимого на страницу, следуя определенному шаблону. Некоторые также позволяют печатать в гибридном формате, который объединяет редактирование WYSIWYG с традиционным редактированием. Типичный пример этого — сайты с уценкой, такие как Reddit. У вас часто будет возможность применить форматирование к их текстовым полям, которые вы можете предварительно просмотреть перед публикацией.

Лучший WYSIWYG редактор для веб-дизайнеров: Adobe Dreamweaver

саман

Что нам нравится

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

• Предварительный просмотр в реальном времени.

• Подсказки по коду, завершение и выделение функций.

• Надежные учебники.

Что нам не нравится

• Крутая кривая обучения.

• Запутанный интерфейс.

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

• Не на основе браузера, так что могут случиться сюрпризы.

Dreamweaver — один из самых популярных пакетов программного обеспечения для веб-разработки. Вы можете использовать его для всего, от разработки JSP, XHTML, PHP и XML. Старые версии Dreamweaver поддерживали проверку HTML и фотогалереи, но эти функции были удалены в CS5. Это хороший выбор для профессиональных веб-дизайнеров и разработчиков, но если вы работаете в качестве независимого фрилансера, вы можете взглянуть на один из пакетов Adobe Creative Cloud, который также содержит инструменты для редактирования графики и Flash-редактирования.

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

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

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

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

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

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

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

Интеграция 1С с ГИИС ДМДК

ГИИС ДМДК — единая информационная платформа для взаимодействия участников рынка драгоценных металлов и драгоценных камней. с 01.09.21 стартовал обязательный обмен данными с Федеральной пробирной палатой (ФПП) исключительно через ГИИС. А постепенно — с 01.01.2022 и с 01.03.2022 — все данные о продаже драгоценных металлов и камней должны быть интегрированы с ГИИС.
У многих пользователей возникает вопрос как автоматизировать обмен между программой 1С и ГИИС ДМДК.
В настоящей статье ВЦ Раздолье поделится своим опытом о реализации такого обмена.
Автор статьи — Мордовин Антон — архитектор систем на базе 1С Внедренческого центра «Раздолье».

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

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

Главные функции

	Вставить из Word	Позволяет вставляет фрагмент текста из редактора Word с сохранением его форматирования. Фактически превращает сервис в word to html конвертер.
	Источник	Позволяет просматривать, копировать и редактировать Ваш текст в формате HTML. Финальная стадия Вашей работы, здесь получаем готовый результат.

Вспомогательные функции

	Вырезать	Вырезать выделенный текст.
	Копировать	Копирует выделенный текст.
	Вставить	Вставка фрагмента текста с разбивкой на абзацы. Всё остальное форматирование удаляется.
	Отменить	Отменяет последнее произведённое действие.
	Повторить	Повторяет последнее отменённое действие.
	Развернуть	Разворачивает HTML редактор на весь экран. Удобно при работе с большим текстом.

Лучшие бесплатные WYSIWYG редакторы

1. WYSIWYG Web Builder

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

2. Quillr

Данный WYSIWYG редактор пользуется не меньшей популярностью, так как имеет в своем арсенале богатейший набор возможностей для пользователя. Quill или «Перо» — это продукт известной компании Salesforce.com, разработчики которой поставили перед собой цель разрушить стереотипы классического восприятия WYSIWYG. Гибкий, многофункциональный и очень удобный для работы.

3. CK Editorr

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

4. Popliner

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

5. TinyMCE

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

6. WYMeditor

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

7. Xinha

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

8. elRTE

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

9. Spaw

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

10. YUI Rich Text Editor

Последний в списке, но далеко не последний по мощности и популярности визуальный редактор. Разработанный американской компанией Yahoo, YUI Rich Text Editor имеет широкий функционал, поддерживаемый практически всеми известными браузерами.

Начнём…

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

Рассмотрим очень удобный и настраваемый под ваш вкус редактор CKeditor.

Этот редактор я и сам неоднократно использовал на некоторых сайтах и вам советую.

В чём преимущество данного редактора?

1. Простой интерфейс, в который умещена неплохая функциональность.

2. Лёгкая настраеваемость. Вы можете не имея знаний по Web-программированию, с лёгкостью настроить кнопки редактора (Добавить/Удалить/Переместить).

3. Удобность для использования и надёжность.

Связанные сокращения [ править ]

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

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

• WISIWIT, то , что я вижу, это то , что я печатаю, также используется для описания систем редактирования, ориентированных на текст, в противоположном смысле WYSIWYG.
• WYCIWYG , то , что вы кешируете , — это то, что вы получаете .
• WYGIWYG; то, что вы получаете, это то, что вы получаете , часто используется аналогично WYSIAYG, WYSIMOLWYG или WYSINWYW.
• WYGIWYS, вы получаете то, что вы видите , используется в вычислениях для описания парадигмы взаимодействия в ориентированном на результат пользовательском интерфейсе. Этот термин был использован Якобом Нильсеном для описания интерфейса Microsoft Office 2007 «Лента»
• WYSIAWYG; то, что вы видите, — это почти то, что вы получаете , похоже на WYSIMOLWYG.
• WYSIAYG, то , что вы видите, — это все, что вы получаете , чтобы указать, что опытные пользователи иногда ограничены пользовательским интерфейсом.
• WYSIMOLWYG, то , что вы видите, примерно соответствует тому, что вы получаете , понимая, что большинство реализаций WYSIWYG несовершенны.
• WYSINWYW, то , что вы видите, не то, что вы хотите , предполагая, что Microsoft Word часто контролирует пользователя, а не наоборот
• WYSIPWYG, то , что вы видите, вероятно, то, что вы получаете , относится к редакторам html и разметки, где теги кода и макросов как бы показывают, каким в конечном итоге будет результат. Этот тип представления WYSIWYG трудно визуализировать во время редактирования, поэтому пользователь может только догадываться о результате.
• WYSIWYD, то , что вы видите, это то, что вы заслуживаете, относится к способности пользователя и его усилиям создать что-то стоящее.
• WYSIWYM , то , что вы видите, — это то, что вы имеете в виду , говоря, что пользователь видит то, что лучше всего передает сообщение и его структуру, а не его фактическое форматирование.
• WYGIWYM, вы получаете то, что вы имеете в виду , говоря, что пользователь получает (визуально, на слух или любым другим способом) то, что лучше всего передает сообщение.
• WYSIWYN, вы видите то, что вам нужно, относится к Программному обеспечению, которое не состоит из взаимосвязанных модулей, но работает с таким подробным управлением пользователями и правами, что пользователи могут видеть только то, что им действительно нужно.
• WYSIWYS , вы видите то, что вы подписываете , что является важным требованием для программного обеспечения для цифровой подписи. Это означает, что программное обеспечение должно иметь возможность показывать пользователю контент без какого-либо скрытого контента до того, как пользователь его подпишет.
• WYSIWYW, то , что вы видите, это то, что вы хотите , используется для описания платформы редактирования GNU TeXmacs . Аббревиатура поясняет, что в отличие от редакторов WYSIWYG, пользователь может настраивать платформы WYSIWYW, чтобы они действовали (возможно, частично) как программы ручного набора, такие как TeX или troff .
• WYSYHYG, то , что вы видите, вы надеетесь получить ( / ˈwɪzihɪɡ / ), термин, высмеивающий программное обеспечение для обработки текста в текстовом режиме ; использованный в коллекции видео Microsoft Windows, видео, распространенное примерно в 1991 году на двух кассетах VHS на рекламных мероприятиях.
• YAFIYGI, вы просили об этом, вы получили это , используется для описания системы редактирования документов, ориентированной на текстовые команды, которая не включает WYSIWYG, со ссылкой на тот факт, что пользователи таких систем часто просят то, чего они на самом деле не хотят. Это считается противоположностью WYSIWYG. Фраза была впервые использована в этом контексте в 1983 году в эссе « Настоящие программисты не используют Паскаль» для описания системы текстового редактора TECO , и ее начали сокращать примерно в 1993 году.

Размещение

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

А дальше останется всего ничего: нажмите кнопку «Готово к публикации» и на втором экране редактора укажите «системные» настройки. Среди них:

1. Тип публикации. «Статья» или «Новость». Первый вариант подходит для больших материалов — выбрав его, вы подтверждаете, что являетесь автором текста и рейтинг поста зачислится вашему профилю в полном объёме. Второй вариант подходит для небольших материалов, которые имеют признаки «новостей» (некая информация, актуальная здесь и сейчас). 

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

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

4. Ключевые слова. Ещё одно обязательное поле, где через запятую укажите до 10 ключевых слов по теме вашего материала. Через запятую, без #. Подберите такие слова, по которым ваш пост смог бы найти кто-то посторонний. Эти ключевые слова будут в самом конце вашей публикации.

5. Переводы и обучающие материалы. Если вы готовите перевод, то следует нажать чекбокс «Переведённый материал» — тогда дополнительно потребуется указать автора оригинала и ссылку на него, а в зачёт пойдёт лишь половина рейтинга. У опубликованной статьи под заголовком будет пометка «Перевод» со ссылкой на первоисточник — чтобы свести к минимуму риск претензий от автора. А если ваша статья носит обучающий характер, то нажмите чекбокс «Tutorial». Тогда после публикации под заголовком появится одноимённый значок.

Отображение публикации в ленте

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

Желательно загрузить обложку поста (картинка в формате jpg, gif или png, рекомендуемый размер 780×440), а также ввести текст вводной части (до 2 тысяч символов).

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

У вводного текста также есть возможности форматирования, но вставить видеоролик или несколько картинок не получится.  

Текст кнопки «Читать далее» можно оставить по умолчанию, но при необходимости его также можно поменять.

Если пост нужно выпустить в определённое время, воспользуйтесь функцией запланированной публикации — выберите желаемые дату и время.

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

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

Как использовать CKeditor?

1.Для начала скачайте архив с файлами редактора.

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

3. Теперь необходимо подключить редактор к сайту. Вставьте между тегами <head> и </head> следующие строки:

<script src=»/ckeditor/ckeditor.js»></script><script src=»/ckeditor/samples/sample.js»></script><link rel=»stylesheet» href=»/ckeditor/samples/sample.css»>

Первые 2 строки подключают сам редактор с модулями, третья — визуальные стили.

4. Настало время использования редактора. Вам нужно создать элемент textarea, на который и будет распространяться действия редактора. Как это нужно сделать? Вот пример:

<form method=»POST» action=»index.php»><textarea cols=»80″ name=»mess» id=»mess» cols=»48″ rows=»10″></textarea><script>CKEDITOR.replace( ‘mess’, {uiColor: ‘#dddddd’,toolbar: [

, , , , , , , , , , , ,

} );</script><br><input type=»submit» value=»Постить» name=»B1″></form>

Зелёным цветом выделен Javascript редактора, который необходимо вставить ниже необходимой к привязке формы textarea

Обратите внимание какое имя имеет textarea, такое у него должно быть и id, и именно такое имя должно быть в скрипте редактора, который вы располагаете ниже. В примере использовано имя mess

Как настраивать редактор?

Для настройки элементов редактора, правьте тот код, который вы вставляете на странице, наже textarea.

Настройка элементов редактора заключена в опцию toolbar

Обратите внимание на используемый синтаксис, для примера:. toolbar: ,

toolbar: ,

toolbar — Это опция в которой содержаться используемые на панели редактора элементы. Начинается и заканчивается квадратными скобками и

и  — Это 2 блока элементов редактора. Каждый из блоков должен отделяться запятой друг от друга и долбын быть заключён в квадратные скобки.

TextColor, ‘BGColor, Maximize, ShowBlocks и About — Это имена элементов которые вы добавляете на панель редактора(Ниже на странице представлены все имена элементов редактора). Каждый из элементов должен быть заключён в одиночные кавычки (апостроф) и отделён друг от друга запятой.

‘-‘ — Это вертикальная черта, визуально отделяющая элементы редактора в одном блоке.

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

uiColor: ‘#dddddd’,

В этой строке #dddddd — Цвет редактора, который будет вторым цветов в градиенте белого в #dddddd.

Строку это нужно заключать НЕ В toolbar!!! Посмотрите на примере выше как это правильно делать, чтобы не ошибиться.

Возможные элементы редактора (для вставки в toolbar):

Source — Показать код

Save — Сохранить

NewPage — Новая страница

Preview — Предпросмотр

Templates — Шаблоны

Cut — Вырезать

Copy — Копировать

Paste — Вставить

PasteText — Вставить только текст

PasteFromWord — Вставить из Word

Print — Печатать

Undo — Отменить

Redo — Повторить

Find — Найти

Replace — Заменить на странице

SelectAll — Выделить всё

RemoveFormat — Убрать форматирование

Form — Создать форму

Checkbox — Создать чекбокс

Radio — Создать кнопку выбора

TextField — Создать текстовое поле

Textarea — Создать многострочное текстовое поле

Select — Создать список выбора

Button — Создать кнопку

ImageButton — Изображение кнопки

HiddenField — Создать скрытое поле

BidiLtr — Направление текста слева направо

BidiRtl -Направление текста справа налево

Bold — Жирный текст

Italic — Курсив

Underline — Подчёркнутый

Strike — Зачёркнутый

Subscript — Подстрочный

Superscript — Надстрочный

NumberedList -Нумерованый список

BulletedList -Маркерованый список

Outdent — Уменьшить отступ

Indent — Увеличить отступ

Blockquote -Цитата

CreateDiv — Создать DIV

JustifyLeft — Обтекание слева

JustifyCenter — Обтекание по центру

JustifyRight — Обтекание справа

JustifyBlock — Обтекание по всей ширине

Link — Создание ссылки

Unlink — Удаление ссылки

Anchor — Создание якоря на странице

Image — Вставка изображения

Flash — Вставка Flash ролика

Table — Вставка таблицы

HorizontalRule — Горизонтальная черта

Smiley — Смайлы

SpecialChar — Спец символы

PageBreak — Разрыв страницы для печати

Styles — Стиль текста

Format — Формат текста

Font — Шрифт текста

FontSize — Размер шрифта текста

TextColor — Цвет текста

BGColor — Фон текста

Maximize — Максимизировать редактор

ShowBlocks — Показать блоки

About — О разработчиках

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

Лучший редактор WYSIWYG для графических дизайнеров: Adobe Creative Cloud Все приложения

Что нам нравится

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

• Бесшовная интеграция всех приложений Adobe.

Что нам не нравится

• Дорого и требует годового финансового обязательства.

• Может быть, больше силы, чем нужно некоторым людям.

Если вы больше являетесь художником графики, чем веб-дизайнером, рассмотрите возможность подписки на пакет Adobe Creative Cloud All Apps. Он включает в себя Adobe Dreamweaver, а также InDesign , Photoshop , Illustrator, Acrobat , Spark и другие настольные и мобильные приложения. Он также включает в себя утилиту Adobe Bridge , которая помогает вам управлять своими веб-ресурсами. Вы можете приобрести эти инструменты по отдельности, но модель подписки позволяет вам использовать все программы Adobe на нескольких устройствах.

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

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

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

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

Диалоговые окна

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

function editor_open_dialog(dialog, first_field) {    document.all(‘editor_blocking’).style.display = ‘block’;    document.all(‘editor_select_style’).disabled = ‘disabled’;    document.all(‘editor_dialog_’+dialog).style.display = ‘block’;    document.all(first_field).focus();    document.all(first_field).select();}

dialog — это id диалогового окна, first_field — это имя поля, которому передаётся фокус при открытии диалога.

function editor_close_dialog(dialog) {    document.all(‘editor_blocking’).style.display = ‘none’;    document.all(‘editor_select_style’).disabled = »;    document.all(‘editor_dialog_’+dialog).style.display = ‘none’;}

Сами диалоговые окна находятся в отдельных скрытых дивах, увидеть их можно в коде страницы редактора (VulkEditor.html).

Добавление произвольного HTML-кода:

<div id=»editor_dialog_addhtml» class=»dialog»>

…

</div>

Добавление таблицы:

<div id=»editor_dialog_addtable» class=»dialog»>

…

</div>

Свойства ячейки:

<div id=»editor_dialog_cell» class=»dialog»>

…

</div>

Вставка рисунка:

<div id=»editor_dialog_addimage» class=»dialog»>

…

</div>

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