Создавайте форматированный текст в живом редакторе и получайте сгенерированный HTML с форматированием, списками, ссылками и просмотром исходного кода.
Создавайте форматированный текст в живом редакторе и получайте сгенерированный HTML с форматированием, списками, ссылками и просмотром исходного кода. Создавайте форматированный текст в живом редакторе и получайте сгенерированный HTML с форматированием, списками, ссылками и просмотром исходного кода.
WYSIWYG расшифровывается как What You See Is What You Get («что видишь, то и получаешь»). Вместо того чтобы набирать сырые HTML-теги, вы редактируете документ визуально -- жирный, курсив, заголовки, списки, ссылки, и так далее -- а редактор преобразует ваши действия в разметку. Страница, которую вы видите, использует встроенную возможность contenteditable браузера плюс API document.execCommand, который уже более десятилетия входит в каждый крупный браузер. Никакая сторонняя библиотека не задействована: форматирование применяется самим браузером, поэтому сгенерированный HTML в точности совпадает с тем, что ваш браузер создаёт для любой другой редактируемой области в сети.
Панель инструментов охватывает операции, нужные большинству: отмена/повтор, жирный, курсив, подчёркивание, зачёркивание, заголовки H1-H3, абзацы, блоки кода, маркированные и нумерованные списки, цитаты, ссылки и удаление всего форматирования. Селекторы шрифта и размера меняют гарнитуру и размер шрифта текущего выделения. Переключатель «Исходный код» переключается между отрисованным видом и обычной текстовой областью с «сырым» HTML, которую можно редактировать напрямую. Строка статистики под редактором показывает количество символов и слов в текущем содержимом.
Редактор по возможности создаёт семантическую разметку, а не представленческую «кашу»: из заголовков получаются <h1>/<h2>/<h3>, из списков -- <ul>/<ol>/<li>, из цитат -- <blockquote>, а из кода -- <pre>. Текстовое форматирование применяется с помощью <strong>, <em>, <u> и <del>. Поскольку движком выступает execCommand браузера, точная разметка может слегка различаться между браузерами -- клик по жирному может создать <strong> в одном браузере и <b> -- в другом. Для максимальной совместимости экспортируемый HTML намеренно минимален и без дополнительной очистки вставляется в письма, CMS-редакторы или системы документации.
Копируйте экспортированный HTML из поля вывода после переключения в режим исходного кода либо используйте кнопку «Копировать HTML». При вставке в почтовый клиент держите разметку простой -- многие клиенты удаляют <style> и сложную вложенность. Если вам нужно встроить этот контент в страницу, у которой уже есть собственные стили, используйте семантические теги и избегайте встроенных стилей; экспортируемая разметка не использует встроенное оформление, поэтому она естественно наследует CSS вашей страницы. Всё на этой странице работает локально в вашем браузере; содержимое никогда не покидает страницу.