wysiwyg что это такое
WYSIWYG
Содержание
История
До появления технологии WYSIWYG для создания сложноформатированных документов использовались программы, применяющие язык разметки. В этих программах для форматирования документа необходимо было указывать специальные коды (теги), невидимые в конечном результате работы. Теги определяли стиль текста (жирный, наклонный и т. п.), изменения шрифта, расположение текста и иллюстраций и т. д.
Первой программой, использующей WYSIWYG считается текстовый редактор Bravo. Bravo был разработан в Xerox PARC для компьютеров Alto. Программа была разработана Батлером Лемпсом (Butler Lampson), Чарльзом Симони (Charles Simonyi) и др. в 1974 году. Bravo не был выпущен на рынок, однако программное обеспечение компьютеров Xerox Star вероятно является прямым потомком этого редактора. [1]
Параллельно с Bravo, но независимо от Xerox PARC, Hewlett Packard разработала и выпустила в конце 1978 года первую коммерческую программу, использующую WYSIWYG — приложение для создания диапозитивов или то, что сегодня называют презентационной графикой. Первый релиз программы, названной BRUNO, работал на миникомпьютерах HP 1000. BRUNO был портирован на HP 3000 и переиздан как «HP Draw».
В 1970-х — начале 1980-х популярным домашним компьютерам не хватало графических возможностей, необходимых для отображения WYSIWYG документов. Такие приложения, как правило, использовались достаточно редко, в основном на мощных рабочих станциях, которые были слишком дорогими для широкого распространения. Однако к середине 1980-х всё стало меняться. Улучшение технологии позволило производить дешевые графические дисплеи, и программы с WYSIWYG начали появляться на более дешёвых и популярных компьютерах, в том числе LisaWrite для Apple Lisa, выпущенный в 1983 году, и MacWrite для Apple Macintosh, выпущенный в 1984 году.
Этимология
Фраза была придумана инженером Information International, Inc. (Triple-I) Ларри Синклером (Larry Sinclair) чтобы выразить мысль, что то, что пользователь видит на экране, он получает на принтере, используя «Page Layout System». «Page Layout System» это система допечатной подготовки документов впервые показаная на ANPS в Лас-Вегасе.
Фраза стала популярной благодаря информационному бюллетеню под названием «WYSIWYG». Его авторами были Арлин и Хосе Рамос (Arlene и Jose Ramos). Этот бюллетень был создан для индустрии новых систем допечатной подготовки, переходящей на электронный формат в конце 1970-х. После трех лет публикации бюллетень был продан сотрудникам Стэнфордского исследовательского института в Калифорнии.
Админу.Ру
Библиотека вебмастера по созданию и продвижению сайта
Что такое WYSIWYG (визуальный редактор)?
Часто встречаемая в описаниях аббревиатура WYSIWYG (иногда пишут по-русски ВИЗИВИГ) зачастую ставит в тупик пользователя. На самом деле всё очень просто.
Образовано новое слово от аббревиатуры фразы на английском языке — What You See Is What You Get (сокращённо WYSIWYG), в переводе на русский: Что видишь, то и получаешь.
Что такое WYSIWYG (визуальный редактор)?
Аббревиатура WYSIWYG применяется в отношении программ (прикладных или веб-интерфейсов), которые в режиме редактирования отображают содержимое максимально близко к конечному результату (печати, публикации или презентации).
История WYSIWYG-редакторов
Первым WYSIWYG редактором считается текстовый редактор Bravo, разработанный специалистами компании Xerox PARC в 1974 году. Программа так и не вышла в тираж. А первым коммерческим продуктом явился тексто-гафический редактор BRUNO, выпущенный в 1978 году Hewlett Packard.
Тем не менее, графические мощности процессоров 70х — 80х годов были слишком малы, чтобы в достаточном объёме применять WYSIWYG-редакторы. Развитие технология получила в конце 80х годов с удешевлением графических процессоров и, соответственно, всё большей доступностью.
Происхождение термина WYSIWYG
Термин What You See Is What You Get принадлежит американскому комику Флипу Уилсону (Flip Wilson) (сентябрь 1969 года). В отношении технологии визуального редактирования (точнее, к системе предварительного просмотра печати) аббревиатура была применена в 1982 году Ларри Синклером (Larry Sinclair), инженером компании Information International, Inc. («Triple I»).
Применение WYSIWYG-редакторов
Сегодня можно разделить WYSIWYG-редакторы на три группы:
Наиболее популярные WYSIWYG-редакторы
Сегодня под словом WYSIWYG-редактор практически все подразумевают редакторы для вёрстки HTML-страниц и дизайна WEB-сайтов. Однако, разочаруем обывателя и скажем, что самым популярным WYSIWYG-редактором является Microsoft Word (и его бесплатный аналог Openoffice.org Writer).
Далее следуют действительно среды для создания сайтов: Macromedia Dreamweaver, MS Frontpage, MS Sharepoint Designer, WYSIWYG Website Builder.
WYSIWYG Website Builder
В заключение скажем о группе JavaScript-редакторов, встраиваемых в различные CMS и Front-end интерфейсах. Наиболее часто применяемые: TinyMCE, CKeditor и другие.
WYSIWYG HTML редактор в браузере. Часть 1
Это первая часть перевода статьи о свойствах designMode и contentEditable, их поведении и особенностях.
Вступление
В самом первом браузере, созданном Тимом Бернесом-Ли в 1990 году, веб-страницы можно было редактировать непосредственно в браузере в WYSIWYG режиме. Веб рассматривался как среда доступная как для чтения так и для записи. Более поздние браузеры, однако, в основном, давали возможности только для чтения информации, исключая разве что ввод текста в поля ввода форм.
WYSIWYG редактирование в браузере снова стало нормой с выходом Internet Explorer 5: новое свойство designMode позволяло пользователю редактировать весь документ. Сначала эта особенность как то упускалась из виду, возможно, ввиду того, что появилась вместе с массой других не стандартных, доступных только под ОС Windows, проприетарных возможностей IE.
В последние годы остальные браузеры-конкуренты — Mozilla, Safari и Opera (примечание переводчика: Chrome на момент написания статьи еще не появился. Первая бета выйдет только через несколько месяцев.) — последовали примеру IE и тоже реализовали эту возможность. WHATWG работает над стандартизацией режима редактирования — свойства designMode и contentEditable представлены в HTML 5. Похоже что браузерное WYSIWYG редактирование все же становится неотъемлемой частью веба.
Примечание: Я рассматриваю только особенности редактирования в браузерах: Opera 9.5, Firefox 2+ и Safari 3, так как в предыдущих версиях редакторы были через-чур глючными и неполноценными. А редактор в IE практически не менялся с версии 5.5 )))
Обзор режима редактирования
Включение режима редактирования
Есть два способа включения режима редактирования — свойства 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 после курсора. Например (в примерах символ вертикальной черты означает курсор):
И нажатие Enter/Return в IE или Safari:
Если курсор находится в конце не пустого элемента h1, все браузеры закроют h1, но IE и Opera вставят новый элемент p и поместят курсор в него. Safari вставит новый h1 элемент и поместит курсор внутрь. Mozilla не будет создавать никаких дополнительных элементов, но зачем то добавит два дополнительны тега br после курсора. Например:
Если писать текст непосредственно в body (без каких либо элементов-оберток), и нажать Enter/Return, Mozilla вставит br. IE и Opera обернут предыдущий текст в p и создадут новый p. Safari вставит div.
Если набирать текст внутри div, Safari, Opera и IE закроют текущий элемент div и откроют новый. Mozilla вставит br и поместит курсор после него.
Если вокруг курсора несколько элементов-оберток, то все браузеры закроют (и дублируют) только обертку с наибольшей степенью вложенности. Курсор останется в обертке.
Примечание: Это жутковато! Неожиданно у IE оказался наиболее разумный подход всегда гарантирующий осмысленное применение блочных элементов. Mozilla ведет себя ужасно используя элементы br внутри блочных элементов, благодаря этому невозможно реализовать осмысленную стилизацию текста.
Позиционирование курсора
Курсор перемещается между символами. Не видно, как курсор позиционируется относительно тегов. Логика перемещения остается неизменной вне зависимости от браузера. Относительно блочных элементов: курсор всегда позиционируется внутри блочного элемента с наибольшей вложенностью. Например невозможно поместить курсор между двумя параграфами.
Например, посмотрите сюда; Символ вертикальной черты обозначает возможные положения курсора:
Так что если вы набираете символы слева от полужирного текста, новый текст будет отображен в нормальном начертании. Если наберете справа, то он тоже будет полужирным.
Удаление
Редактирование объектов
Браузеры поддерживают некоторые дополнительные интерфейсы для редактирования.
IE позволяет изменять размер изображений, таблиц, элементов форм или абсолютно позиционированных элементов перетягивая их уголки (когда объект выделен, то появляется соответствующий контейнер)
Mozilla тоже позволяет менять размер картинок и таблиц, но у нее есть еще и дополнительные элементы управления, которые позволяют создавать в таблице новые колонки и строки. Кроме того Mozilla позволяет изменять положение абсолютно позиционированных элементов.
Интерфейсы управления для всего этого абсолютно проприетарны, различны в каждом браузере и настраивать их нельзя.
От переводчика: Так как хабр отказался публиковать 35кб текста за раз, то разбиваю перевод на две части.
Обзор лучших WYSIWYG-редакторов
Рассматриваем лучшие текстовые WYSIWYG-редакторы, которые можно встроить на сайты и в веб-приложения. Полнофункциональные, быстрые и красивые модули, которые добавят в ваш проект отличный инструмент для работы с текстом.
Сделаю небольшое отступление по поводу WYSIWYG: эта аббревиатура расшифровывается как What You See Is What You Get. Речь идет о типе редакторов, отображающих создаваемый контент в том виде, в котором он по итогу будет размещен на странице или в приложении, без необходимости делать дополнительные преобразования и обработку данных.
Editor.js
Бесплатный блочный редактор контента, который можно легко встроить на любой существующий сайт и использовать по умолчанию без ограничений.
Контент, вводимый в редактор, поддерживает блочную структуру, что многим пользователям покажется наиболее привычным и удобным способом отображения информации (схожим с таковым в других WYSIWYG-редакторах, наподобие того же Gutenberg в WordPress).
В отличие от большинства других WYSIWYG-редакторов, информацию из Editor.js можно экспортировать в JSON-формате, а затем конвертировать для использования на веб-страницах, в мобильных приложениях или даже для преобразования в аудио.
Редактор предлагает разработчикам доступ к большому количеству API, с помощью которых можно значительно расширить функциональность Editor.js или добавить поддержку сторонних сервисов. Например, добавить новый тип блоков, который содержит в себе не только текст и медиаконтент, но и сниппет с твитом, интерактивное голосование или пост из Инстаграма.
Slate
Утилита для работы с текстом, полностью написанная на JavaScript и подключаемая к сторонним ресурсам в качестве альтернативы малофункциональному тегу
Slate умеет все, что необходимо уметь подобному приложению:
На самом деле, возможностей у Slate намного больше. Есть режим только для чтения, исчезающая панель управления, не отвлекающая от работы с текстом, полная поддержка формата Rich Text, возможность использовать сочетания клавиш из популярных Markdown-редакторов и т.п.
Скачать Slate (приложение подключается вручную)
tiptap
Схожий со Slate WYSIWYG-редактор с одним значимым отличием – он создавался для работы исключительно с фреймворком Vue (и, по сути, является набором компонентов в соответствующем формате).
В tiptap есть полный набор базовых возможностей, которые можно встретить в любом текстовом редакторе. Кнопки для форматирования символов, кнопки для установки иерархии заголовков, базовые блоки в духе цитат, сниппетов кода и прочих привычных мелочей.
tiptap поддерживает работу со списком задач. Без проблем распознает ссылки. В дополнение к тексту может вставлять картинки и таблицы. А тот, кто планирует внедрять tiptap на сайт, посвященный программированию, по достоинству оценит наличие подсветки синтаксиса языков программирования.
Введенный в tiptap текст можно экспортировать в формате HTML или JSON. Но что еще интереснее, в нем есть поддержка расширения для совместной работы над текстовым материалом в реальном времени. Как Teletype в знаменитом текстовом редакторе Atom.
Скачать tiptap (устанавливается вручную или через пакетный менеджер NPM)
Dante Editor
Очередная попытка создать клон редактора из популярной блог-платформы Medium. Разработчики сделали еще один похожий продукт ввиду отсутствия подходящей альтернативы.
Dante Editor отличается от конкурентов тем, что содержит в себе всю ту же функциональность, что есть в оригинале. Этот редактор стал попыткой воспроизвести все возможности WYSIWYG из Medium в новом бесплатном продукте.
Dante даже визуально похож на то, что предлагает Medium. Он поддерживает современные браузеры, способен отображать все варианты форматирования, доступные в оригинальном редакторе. Проект развивается исключительно за счет разработчиков-волонтеров и сообщества независимых программистов. По словам создателей, он будет активно развиваться и обрастать новыми возможностями.
Редактор подключается через JavaScript, встраивается в веб-страницу с помощью ID с названием editor и моментально превращается в полноценный редактор со всеми возможностями, что есть у Medium.
Toast Editor
Toast Editor – это редактор с продвинутой поддержкой Markdown. Toast нельзя назвать классическим WYSIWYG-редактором, потому что предпросмотр контента реализован через отдельный интерфейс.
Отличительная черта этого редактора заключается в графическом интерфейсе, который делится на две части. В левой расположено окно, куда, собственно, пишется текст с поддержкой Markdown-разметки и соответствующих тегов. В правой – превью, в котором видно, как по итогу будет выглядеть ваш текст после экспорта в HTML.
Контент в окне «Превью» обновляется автоматически и динамически меняется при скроллинге страницы. В дополнение к этим возможностям есть подсветка синтаксиса, помогающая находить ошибки и некорректную разметку.
Toast поддерживает различные форматы данных, включая таблицы, блоки с программным кодом и ссылки. Есть и дополнительные модули в духе графиков и схем (их поддержка в редакторе добавляется с помощью плагинов).
TinyMCE Editor
Разработчики называют TinyMCE полноценным HTML-редактором, но он не совсем таковым является. Это модульная система для интеграции блоков контента в уже готовые сайты. Она подключается к ресурсам через скрипт со ссылкой на CDN-сервер, где хранятся данные TinyMCE, и дает возможность добавлять на ресурс текстовые материалы вперемешку с другой информацией.
TinyMCE Editor легко интегрируется с популярными фреймворками в духе React, Angular, Vue.js, Bootstrap и jQuery, буквально встраиваясь в их интерфейс в виде нативного программного обеспечения.
Одной из ключевых особенностей продукта, которую выделяют разработчики, является адаптивность. Редактор TinyMCE изначально создавался с прицелом на мобильные устройства и легкую расширяемость (при необходимости). Встроенный редактор можно «прокачать» с помощью плагинов из официальной галереи. Они помогают находить ошибки, быстро редактировать контент и оформлять его в соответствии со своими представлениями о красоте. Один из плагинов позволяет настроить коллаборацию между несколькими пользователями в реальном времени для анализа текстов и их дополнения перед публикацией.
Draft.js
WYSIWYG-редактор, разработанный специально для фреймворка React и включающий в себя набор всех необходимых инструментов для работы с текстом.
У Draft довольно аскетичный интерфейс, отображающий только необходимые элементы в текстовом виде без лишних иконок и прочих отвлекающих визуальных эффектов.
Как и в случае с другими подобными редакторами, контент отображается в виде блоков. Каждый блок содержит определенный тип данных. Это может быть как текст, так и медиаконтент.
Draft исповедует базовые принципы React и строго следует им. Поэтому он легко интегрируется в приложения, созданные с использованием этого фреймворка, а технические аспекты, касающиеся рендеринга или ввода и вывода текста, возводит в абстракцию. Доступ к функциям Draft осуществляется через хорошо задокументированное API. А еще, чтобы избежать утечек памяти и проблем в производительности редактора, здесь используется immutable-js, что выгодно отличает его от конкурентов.
Froala
Идеальный инструмент для тех, кто хочет быстро сверстать сайт, не забивая голову изучением языков, используемых при создании онлайн-ресурсов.
Особенностью Froala стал продвинутый WYSIWYG-редактор. Создатели Froala называют его самым умным и красивым среди всех существующих. Он порадует высокой производительностью и интуитивным дизайном, в котором легко разобраться даже новичкам.
Для расширения функциональности будущего сайта используются блоки с визуальным контентом на основе Bootstrap. Дополнительные компоненты имеют открытый исходный код и распространяются бесплатно. Также в Froala есть инструменты для быстрого рисования таблиц и схем на базе JavaScript.
Что важно, все компоненты Froala созданы с использованием «чистых» HTML, CSS и JavaScript. То есть их можно редактировать, используя классические инструменты для разработки и верстки.
CKEditor 4
CKEditor поддерживает перенос текста из других редакторов, таких как Word, Google Docs или Excel, в первостепенном виде. Из Excel можно вытащить всю таблицу, а CKEditor корректно отобразит каждую колонку и позволит редактировать информацию в них.
Редактор по умолчанию позволяет вставлять в текст фотографии, видеоролики, сниппеты с твитами, постами из Инстаграма. Также поддерживаются виджеты, математические формулы и вставка кода с подсветкой. Для CKEditor разработано с десяток плагинов, помогающих автоматически завершить часть текста или заменить его другим контентом.
Все материалы можно редактировать, меняя их размер, положение и другие параметры (дело не ограничивается только текстом). И все это с огромным количеством инструментов для форматирования текста, проверкой орфографии и функцией «Шаблоны», дающей возможность быстро создавать новые материалы, не тратя время на их оформление.
Скачать CKEditor (можно загрузить в систему, а можно подключить через CDN)
Итоги
На GitHub лежит еще пара десятков похожих редакторов, и их количество растет. Так что разжиться WYSIWYG-редактором сейчас несложно. Описанные выше варианты показались мне наиболее интересными. К тому же большая их часть легко подключается к готовым проектам и распространяется бесплатно. Пробуйте и внедряйте!
Редактор WYSIWYG: Я вижу, что вы видите
WYSIWYG является аббревиатурой выражения «То, что вы видите, это то, что вы получаете».
Принцип, который разделяет разные редакторы: действительно ли это хорошая идея работать с текстами и сайтом только в интерфейсе редактора, позволяя программе самостоятельно писать соответствующий код в фоновом режиме?
В этой статье мы хотим рассказать вам о преимуществах и недостатках этой концепции и познакомить вас с самыми успешными редакторами HTML WYSIWYG.
Что именно означает WYSIWYG
Эта путаница букв означает, что текст в конечном результате будет выглядеть точно так, как видно в редакторе; большинство пользователей, которые знают только Word или программы для создания и редактирования текстов, с трудом понимали бы что-то другое. И на самом деле в случае Word и другого подобного программного обеспечения это просто редактор: текст, символы, полужирный, разделение абзацев, который будет выглядеть так же, как вы их видите, как вы их разрабатываете: если вы хотите выделить конкретное слово курсивом, достаточно выделить его и нажать на соответствующую кнопку.
В действительности такие тексты следует рассматривать как результат кодов. Без программы Word, вы должны написать в своем тексте соответствующий код (например, « Word »), который затем интерпретируется и применяется терминалом, который в нашем случае является принтер. Однако преобразование документа Word в файл PDF или отображение документа в браузере также можно рассматривать как вывод цифровой публикации. Для редакторов HTML выбор WYSIWYG имеет большое значение. Прежде чем вдаваться в подробности, мы должны кратко проиллюстрировать историю этих редакторов.
История редакторов WYSIWYG
До эпохи компьютеров все было WYSIWYG, поскольку компиляция не нужна: если вы пишете на листе бумаги или используете пишущую машинку, вы получаете окончательный результат без посредников. Только при разработке компьютеров и программ для записи возникает необходимость разобраться, что написано на экране и что должно появляться при печати. Перфорированные карты вскоре достигли пределов программирования, поэтому разработчикам программного обеспечения пришлось искать еще одно решение для вставки кодов: текстового редактора. Поэтому первые программы обработки текстов состояли из редакторов для программистов. Однако строки символов, включенные в эти программы, не были разработаны с целью их доработки в качестве документов.
Одной из первых программ обработки текстов был WordStar, который появился в 1978 году и который до сих пор является выдающимся редактором. Первоначально WordStar полагался на операционную систему CP / M и имел несколько функций. В первой версии писателям приходилось работать с маркерами для набора печати; согласно общему мнению, это первый редактор WYSIWYG. С помощью этого редактора можно было выделить курсив или полужирный шрифт с результатом, отображаемым непосредственно на мониторе. Однако, надо учитывать тот факт, что то время компьютеры были не очень продвинуты с точки зрения графики, и это было проблематичным : они еще не могли отображать аутентичный образ, который возникает в результате вывода на монитор.
По мере развития компьютеров тексты стали выглядеть лучше в их графических аспектах. Но WYSIWYG не останавливается на обработке текстов: редакторы играют важную роль, особенно для создания веб-сайтов, показывая результат, как только вводятся символы. Большинство интернет-страниц написано с использованием языка гипертекстовой разметки (HTML). Как и в случае разметки и языков программирования, прежде чем результат станет видимым, необходимо скомпилировать код.
Кто создает сайт с использованием HTML, должен иметь в виду следующий вывод: редакторы HTML и WYSIWYG просто облегчают работу. Первым в своем роде редактором для сайтов, является WebMagic, выпущенный в 1995 году компанией Silicon Graphics. В течение следующих двух лет появились знаменитые редакторы Microsoft FrontPage (больше не доступны на рынке) и Dreamweaver от Macromedia (теперь часть Adobe). Спрос на хорошие редакторы широк, но что должно делать такое программное обеспечение?
Функции редакторов HTML и WYSIWYG
Редактор создания веб-сайта WYSIWYG должен позволить пользователям без глубоких знаний HTML создавать веб-страницы. Фактически, в этих программах пользователям не нужно вручную вводить код и использовать программные функции, которые создают код HTML в фоновом режиме.
Шрифт : на момент основания Интернета возможности использовать разные типы шрифтов были очень ограниченными. Beyond Times New Roman, Verdana и Arial, были установлены по умолчанию на большинстве компьютеров и веб-дизайнеры не могли вводить другие символы. Сегодня эта проблема стала не актуальной. С помощью редактора WYSIWYG пользователи могут выбирать из многих шрифтов.
Типовые шрифты : примеры этих символов выделены курсивом, полужирным шрифтом, подчеркиванием, зачеркиванием. С соответствующим редактором WYSIWYG пользователям не нужно верстать эти элементы, независимо от того, является ли это HTML-кодом или текстовой обработкой.
Макет : цвет композиции и белые пространства являются важной частью появления веб-сайта. Поместив контент в одном месте, а не в другое, программисты обращают внимание посетителей и задают конкретный стиль сайту. Без возможностей WYSIWYG программисты должны выбирать поэтапное пустое пространство, то есть пространство, которое не заполнено каким-либо контентом.
Структурирование : как и для печатных текстов, для веб-сайта содержимое должно быть структурировано на странице, чтобы посетитель мог легко оперировать с ними. Через титры и субтитры, которые можно легко установить в редакторах WYSIWYG, читатели легче ориентируются в тексте.
Таблицы : со списками и таблицами можно дополнительно улучшить содержимое. С помощью программного обеспечения, поддерживающего WYSIWYG, веб-дизайнеры могут напрямую вставлять элементы, не прибегая к кодам.
Также полезно иметь возможность перейти от одного представления WYSIWYG к редактору с кодом, поскольку программы имеют ограничения и могут без причины появиться не всегда понятные ошибки.
Недостатки концепции WYSIWYG
Редакторы WYSIWYG, кажутся идеальным решением: вы можете создавать документы, даже веб страницы, подходящие для публикации без знания HTML или программирования. Однако по некоторым причинам, многие пользователи предпочитают полагаться на редактор, например Notepad ++, где нужно вводить код напрямую, потому что это позволяет полностью контролировать конечный результат.
Используя HTML или другие языки разметки, пользователи точно видят, что происходит с текстом. По этой причине многими при создании текстов для печатных документов или файлов PDF используется пакет программного обеспечения TeX macrolingu или LaTeX на основе TeX.
Первоначально разработанный для научной работы, TeX позволяет поддерживать точные спецификации форматирования и лучше интегрировать математические и научные формулы в тексте.
В этом случае обнаруживается конкретная проблема: с WYSIWYG не гарантируется, что результат будет виден точно так же, как веб-дизайнер видит на мониторе, поскольку в World Wide Web нет ни одного конечного результата: разные системы и браузеры отображают контент по-разному, не считая мобильных устройств, которые имеют другой способ представления контента. По этой причине обещание «То, что вы видите, это то, что вы получаете», по крайней мере для веб-сайтов, бессмысленно, и веб-дизайнеры обычно тестируют свои сайты в разных системах, прежде чем размещать выходные данные в Интернете.
Редакторы WYSIWYG создают код HTML в фоновом режиме, но мы не можем знать точно, что этот код отвечает профессиональным требованиям. В прошлом веб-дизайнеры неоднократно жаловались, что эти программы производят излишне избыточные или дефектные исходные коды, что приводит к длительному времени загрузки и сообщениям об ошибках.