Что значит WYSIWYG?

Эта длинная аббревиатура объясняет, какой выход вы можете ожидать

Вы только что видели “WYSIWYG” с надписью где-то в Интернете? Это, безусловно, одна длинная аббревиатура, так что не волнуйтесь, если вас не интересует, что это может означать.

WYSIWYG расшифровывается как «Что видишь, то и получаешь».

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

Роль WYSIWYG в технологии

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

Почему это называется WYSIWYG

Давным-давно, когда вы хотели полужирный или курсив какой-то текст, вам нужно было иметь коды вокруг самого текста. Это затрудняло чтение текста и не позволяло получить четкое представление о том, как будет выглядеть результат. Как только компьютеры интегрировали высококачественную графику (одним из таких систем был Macintosh от 1984 года), компьютеры могли показывать, как будет выглядеть ваш документ, когда вы его печатаете.

То, что вы видите в редакторе, – это, по сути, то, что вы также увидите в готовом продукте, отсюда и фраза «То, что вы видите, это то, что вы получаете». Вместо того, чтобы произносить каждое слово во фразе или каждую отдельную букву аббревиатуры, этот тип редактора называется «wiz-ee-wig» и произносится именно так.

Почему WYSIWYG редакторы важны

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

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

Основные характеристики редактора WYSIWYG

Большинство редакторов WYSIWYG выглядят одинаково, но отличаются по стилю и функциональности. Для простого примера редактора WYSIWYG, вы можете пойти дальше и проверить Summernote.

Summernote и многие другие редакторы WYSIWYG предлагают следующие функции:

• Функция стиля, показывающая выпадающее меню стилей текста (Normal, Quote, Header 1 и т. Д.)
• Жирный текст
• Подчеркнутый текст
• Возможность удалить стиль шрифта
• Цветовая сетка фона и переднего плана
• Функция абзаца с различными вариантами выравнивания
• Функция, которая позволяет создавать таблицы с определенным количеством строк и столбцов
• Функция гиперссылки
• Функция, которая позволяет вставлять изображения
• Функция полноэкранного просмотра
• Функция текстового режима

Вы можете ввести свой собственный текст и вставить свои собственные медиа в редактор Summernote WYSIWYG прямо на веб-сайте, чтобы увидеть, как он работает. Что бы вы ни напечатали, вставьте и настройте, все будет выглядеть точно так же, как если бы оно было опубликовано в Интернете.

Информация

Новый редактор построен на принципе WYSIWYG. Эта аббревиатура расшифровывается как What You See Is What You Get — Что видишь то и получишь. То есть вы редактируете публикацию сразу в том виде, в каком её увидят ваши читатели. Потребность в использовании тегов отпала — форматировать текст можно на лету.

Создание публикации

Когда вы заходите на страницу создания новой публикации (например, через иконку «карандаш» в верхнем правом углу), сразу открывается чистый лист редактора. Всё, что вы разместите на этом экране, увидят читатели, открывшие публикацию из ленты.

Сначала заголовок публикации — не более 120 символов.

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

• Выделить текст — появится всплывающее меню с кнопками:
• Использовать стандартные горячие клавиши, например:

Вставлять дополнительные элементы также можно несколькими способами:

• через кнопку « + » с левой стороны редактора
• через клавишу « / » на клавиатуре

Любой из этих вариантов вызовет всплывающее меню вставки элементов, о которых чуть ниже.

Элементы могут быть не только блочными, но и строчными — через клавишу «/» внутри строки можно вставить небольшое изображение или формулу.

Также поддерживается markdown-разметка. То есть необязательно жать плюсик и в открывшемся меню выбирать «Заголовок» — достаточно в начале строки добавить нужное количество символов # .

Ну или можно сразу вставить markdown-код из внешнего редактора, должно сработать.

Меню с блочными элементами

Просто выберите нужный элемент в появившемся меню и он вставится. Можно пользоваться только клавиатурой: жмём « / » → появляется меню → начинаем вводить « та… » → выбирается « Таблица ». Или набираем на клавиатуре « /ци », жмём Enter → вставляется цитата.

Заголовок. Размер заголовка можно поменять в меню настроек блока (троеточие справа).

Аналог в маркдауне — тройные кавычки, “`код“` .

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

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

Важно: в редакторе имеется автосохранение — оно сохраняет в localStorage браузера весь тот материал, который вы вставили в редактор. То есть если вы случайно закроете вкладку с редактором, всегда можно открыть её заново и восстановить текст.

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

Если вы готовите статью во внешнем редакторе

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

Если вы пишете статью в обычном текстовом редакторе, то можете сразу форматировать текст markdown-разметкой — потом просто скопируйте всё и вставьте в форму редактора. Он автоматически преобразует разметку в нужный результат.

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

Но в обоих случаях убедитесь, что всё корректно перенеслось и загрузилось. Если что-то не работает — пишите в форму обратной связи.

Размещение

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

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

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

Ориентиры для разных уровней сложности:

Простой	Статьи для самой широкой аудитории, которые будут понятны даже неподготовленным читателям Как правило, с «лёгким» кодом (готовые сниппеты, пошаговые команды для установки, tutorial-style) или без него, общедоступные публикации в любых хабах. Все «небольшие» публикации, рассуждения, биографии и истории, интервью, повествования, ликбез.
Средний	Статьи, для понимания которых нужны базовые познания в предмете обсуждения

• Интервью. Есть доступ к человеку с необычным опытом? Срочно берите его в охапку и задавайте вопросы. А что он ответил, потом расскажите Хабру.
• Репортаж. Попали на знаковое мероприятие? Расскажите о самом интересном сообществу Хабра.
• Кейс. Организовали умный дом за 10 тысяч рублей? Переехали в Новую Зеландию писать код по распознаванию киви? Пишите публикацию, это же очень интересно.
• Обзор. Вы перепробовали кучу одноплатных ПК, стриминговых сервисов или сред разработки? Поделитесь, что там к чему, на что лучше обратить внимание.
• Мнение. У вас особый взгляд на острый вопрос? Хотите это обсудить? Напишите, что думаете, и готовьтесь провести вечер в комментариях.
• Дайджест. Накопилась подборка интересных ссылок и хочется поделиться своими открытиями? Вперед! Мы тут очень любознательные и с большим кругозором.
• Туториал. Справились с непростой задачей? Расскажите по пунктам, как ее решить — читатели будут благодарны.
• Роадмэп. Нашли свою дорогу в IT? Создайте карту, чтобы помочь остальным: с книгами, фреймворками и необходимыми навыками.
• FAQ. Вы глубоко изучили сложную тему? Готовы рассказать на пальцах, как все устроено? Дерзайте!
• Ретроспектива. Помните в подробностях, как зарождались вещи, к которым уже все привыкли? Кайф! Это то, что приятно почитать долгими зимними вечерами!
• Аналитика. Уловили тренды, понимаете что станет с рынком через полгода, нравится строить графики и диаграммы? Поделитесь, ведь обобщать данные не каждому дано.

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

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

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

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

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

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

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

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

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

Markdown-режим

Опционально вы можете переключить редактор публикаций в markdown-режим. Более подробно читайте о нём в отдельном разделе.

При подготовке материала использовались источники:

https://habr.com/ru/docs/help/wysiwyg/