Wysiwyg что это за программа

Как работает WYSIWYG-редактор?

Ко мне регулярно обращаются посетители сайта с просьбами дать пояснения по работе моего визуального редактора и объяснить, как он работает, и как его применить для своих сайтов. Поэтому в этой статье я постараюсь максимально подробно описать работу всех его функций с точки зрения программиста.

Что такое WYSIWYG и общий принцип работы

Аббревиатура WYSIWYG расшифровывается как «What You See Is What You Get» — что ты видишь, то и получишь, то есть смысл WYSIWYG-редактор в том, что при редактировании текста он выглядит так же, как будет выглядеть на странице сайта: тот же шрифт, межстрочный интервал, такого же цвета ссылки и т.д. Добавление новых элементов на страницу (ссылок, картинок, списков, таблиц и т.п.) происходит с помощью простого пользовательского интерфейса, таким образом любой человек, даже не знающий HTML, может редактировать страницу.

Каждый wysiwyg-редактор базируется на использовании фрейма, у которого свойство designMode установлено в состояние » On «. Это переводит страницу в режим редактирования, когда изменения нужно сохранить, HTML-код получают из этого фрейма через свойство innerHTML и отправляют на сервер для сохранения.

Как сделать лендинг в WYSIWYG Web Builder — Пример. Детективное агентство

Файлы Vulk Editor

Все файлы редактора в одном архиве Вы можете бесплатно скачать тут, всё то же самое посмотреть в действии можно на странице online-демонстрации. В архиве лежат файлы:

1. VulkEditor.html — собственно страница с самим редактором;
2. editor.js — все необходимые функции javascript;
3. editor.css — стили для оформления редактора;
4. canvas.html — страница для фрейма редактора, которая будет полем редактирования;
5. canvas.css — стили для поля редактирования;
6. папка images с иконками для кнопок.

Инициализация WYSIWYG-редактора

В коде страницы редактора располагается фрейм:

Как видно, в нём будет отображаться страница canvas.html . Если открыть её исходный код, то будет видно, что в ней используется файл стилей canvas.css :

canvas.css » type color: rgb(0, 0, 255);»>text/css » rel color: rgb(0, 0, 255);»>stylesheet «>

Эти стили идентичны стилям сайта, поэтому текст на странице canvas.html выглядит как на сайте. Так же будет и при редактировании, собственно за счёт этого и достигается эффект WYSIWYG.

Когда фрейм загружается, у него срабатывает событие onLoad и выполняется функция editor_loaded() . Она переводит фрейм в режим редактирования и вставляет в редактор текст, который надо отредактировать.

Текст для редактирования находится в блоке , document .getElementById( ‘editor_frame’ ) — это наш фрейм, в котором всё редактируется, document . all ( ‘edited_html’ ) — это textarea, в которой будет html-код отредактированного текста.

Форматирование текста

Форматирование выделенного текста происходит с помощью функции editor_FormatText , она использует функцию javascript execCommand , которая позволяет выделять текст курсивом, подчёркиванием, жирным, выравнивать его по краям и по центру, и т.п. Операция, которая выполняется над текстом, подается в виде параметра.

Параметр command может принимать значения:

• Copy — копировать текст;
• Cut — вырезать текст;
• Paste — вставить текст;
• Bold — выделить жирным;
• Italic — выделить курсивом;
• Underline — выделить подчёркиванием;
• removeformat — очистить форматирование текста;
• Undo — отменить последнюю операцию;
• Redo — повторить отменённую операцию;
• JustifyLeft — выровнять абзац по левому краю;
• JustifyCenter — выровнять абзац по центру страницы;
• JustifyRight — выровнять абзац по правому краю;
• JustifyFull — выровнять абзац по краям;
• InsertUnorderedList — вставить маркированный список;
• InsertOrderedList — вставить нумерованный список;
• Indent — увеличить отступ;
• Outdent — уменьшить отступ;
• UnLink — удалить ссылку;
• forecolor — выделить цветом (код цвета задаётся вторым параметром);
• formatBlock — применить стиль к абзацу (

  , , и т.д.).

Для вставки гиперссылки используется функция editor_createlink() .

function editor_createlink() <
if ( document . getSelection ) <
editor_FormatText( ‘CreateLink’ , prompt ( ‘Адрес’ , ‘http://’ ));
> else <
editor_FormatText( ‘CreateLink’ );
>
>

Здесь так же используется функция editor_FormatText , но в отличие от всех других операций здесь требуется адрес ссылки. В браузере Internet Explorer диалоговое окно для запроса адреса ссылки открывается само, поэтому достаточно просто вызвать editor_FormatText( ‘CreateLink’ ). В других браузерах из семейства Gecko (это FireFoxe, Opera и т.п.) приходится запрашивать адрес дополнительно, через функцию prompt ().

Основное различие между этими браузерами (по крайней мере для WYSIWYG-редакторов) заключается в методе работы с выделениями. В IE используется document .selection(), а в других браузерах — document . getSelection (), поэтому различать разные браузеры можно по наличию этих функций. Далее при работе с выделенными областями текста я буду поступать так же.

Вставка html-кода

Вставка нового кода в страницу — это важнейшая функция редактора, она используется для добавления новых изображений, таблиц и произвольного кода (например, кода видеоплеера). Но для вставки нужно знать место на странице, где установлен курсор. Для этого есть переменная editor_range , которая объявляется в editor.js . Для вставки картинки или таблицы в редакторе открывается диалоговое окно, где нужно указать адрес изображения или количество столбцов таблицы. При этом фокус передаётся на другие поля ввода, так что положение курсора в редакторе нужно сохранять, прежде чем открыть диалоговое окно. Это делает функция editor_get_range() .

function editor_get_range() <
if ( document .selection)

// для Gecko
editor_range = document .getElementById( ‘editor_frame’ ).contentWindow. getSelection ().getRangeAt( 0 ).cloneRange();
> else

// нет поддержки выделений
alert ( ‘Браузер не поддерживает эту функцию! :(‘ );
editor_range = false ;
>
>

После того, как в диалоговом окне введены данные и нажата кнопка «Вставить», нужно выполнить непосредственную вставку кода. Опять же в зависимости от браузера, это реализуется разными способами в функции editor_PasteHTML .

function editor_PasteHTML(html) <
if (editor_range.pasteHTML)

// для Internet Explorer
editor_frame. focus ();
editor_range.pasteHTML(html);
editor_range. select ();
> else

// для Gecko
editor_FormatText( ‘insertHTML’ , html);
>
>

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

Для выполнения некоторых действий в 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-кода:

editor_dialog_addhtml » class color: rgb(0, 0, 255);»>dialog «>

editor_dialog_addtable » class color: rgb(0, 0, 255);»>dialog «>

editor_dialog_cell » class color: rgb(0, 0, 255);»>dialog «>

editor_dialog_addimage » class color: rgb(0, 0, 255);»>dialog «>

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

Источник: vulk.ru

Админу.Ру

Библиотека вебмастера по созданию и продвижению сайта

Что такое 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-редакторы на три группы:

1. Текстовые редакторы с получением выходных документов на печать.
2. Среды для создания презентаций. Выходные документы: печатные экземпляры, видеопрезентации, слайд-шоу.
3. WYSIWYG-редакторы WEB-сайтов и HTML-страниц.

Наиболее популярные 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 и другие.

Источник: adminu.ru

Краткий список WYSIWYG редакторов

Однажды мне потребовался 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

Неплохой редактор, очень удобен. Однако существует огромный минус, который затмевает почти все плюсы — это отказ от поддержки старых и не очень браузеров (доступны только последние версии браузеров).
(Браузеры: Требуется поддержка HTML5, Opera не поддерживается)
[Официальный сайт | Демо]

Mercury editor

Mercury представляет собой цельную веб-страницу, и может быть использован для редактирования целой страницы или отдельных определенных областей. Он поддерживает функцию предварительного просмотра отредактированного содержимого, а также размещение ссылок, изображений, видео и таблиц. Загрузка файлов может быть осуществлена посредством интерфейса drag’n’drop.
Редактор также поддерживает совместную работу нескольких человек. Mercury может быть установлен в качестве отдельного Rails, либо за счет внедрения в код страницы. (Требуется JQuery)
И минус в том, что поддерживаются только следующие браузеры: Chrome 10+, Safari 5+, Firefox 4+.
[Официальный сайт | Демо на главной странице]

YUI Rich Text Editor

Визуальный редактор от Yahoo. Как справедливо заметил sdevalex, один из лучших визуальных редакторов. Обладает исчерпывающим функционалом, поддерживает подавляющим большинством браузеров.
[Демо]

MooEditable

Набор функций сильно ограничен, однако порой больше и не требуется.
[Демо]

OpenWysiwyg

Кросс-браузерный полноценный редактор со всеми требуемыми функциями. Он даже включает в себя привлекательные выпадающие меню и кнопки. К сожалению, Chrome не будет поддерживать его.
(IE 5.5+, Firefox 1.0+, Mozilla 1.3+ and Netscape 7+)
[Официальный сайт | Демо]

html-5-wysiwyg

Визуальный редактор на HTML5 со всеми вытекающими из этого последствиями. По большей части, редактор является демонстрацией возможностей HTML-5, нежели готовым продуктом.
(Как следует из названия, требуется поддержка HTML5)
[Страничка на code.google.com]

jWysiwyg

Леговесный плагин для jquery.
[Официальный сайт | Демо]

Реформатор

Визуальный редактор от студии Артемия Лебедева.
[Официальный сайт | Демо]

Итог

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

UPD 0: поправил название
UPD 1: дополнил описание YUI Rich Text Editor (спасибо sdevalex).
UPD 2: добавил jWysiwyg (спасибо mr47).
UPD 3: добавил Реформатор (спасибо kuber).
UPD 3: добавил Реформатор (спасибо kuber).
UPD 4: исправлено: Imperavi стал платным

P.S: 1. если какой не назвал, пишите, исправлю. 2. Если топик не актуален, напишите, уберу.

• wysiwyg-редактор
• wysiwyg

Источник: habr.com

Что такое редактор WYSIWYG?

Casimiro PT / Shutterstock.com

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

Что вы видите, то и получаете

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

Программы для Windows, мобильные приложения, игры — ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале — Подписывайтесь:)

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

История WYSIWYG

Фактический термин «то, что вы видите, — это то, что вы получаете» появился значительно раньше Интернета. Это было относительно распространенное идиоматическое выражение, используемое для описания вещей, которые выглядят такими, какими они кажутся. Например, если вы искали подержанную машину и видите такую ​​по низкой цене, которая, кажется, находится в ужасном состоянии, продавец может сказать: «Что ж, то, что вы видите, это то, что вы получаете».

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

В конце концов, технологическая компания Xerox PARC выпустила Alto, первый персональный компьютер со встроенным редактором WYSIWYG. Это совпало с введением графического пользовательского интерфейса, или GUI, который позволял пользователям визуально взаимодействовать с элементами на компьютере. Вскоре после этого такие компании, как HP, Apple и Microsoft, также выпустили компьютерные программы, которые включали встроенную поддержку визуальных редакторов.

Типы WYSIWYG

Squarespace

В зависимости от контекста вы можете ссылаться на различные программные инструменты и интерфейсы как на редакторы «WYSIWYG».

Наиболее распространены системы, позволяющие редактировать документы и текст. В то время как невизуальные редакторы обычно имеют язык разметки, такой как Markdown или BB Code, который позже анализируется в форматированный текст, редакторы WYSIWYG, такие как Microsoft Office, позволяют вам на лету вносить изменения в форматирование и содержимое. Затем этими документами можно поделиться или распечатать, и они будут выглядеть так же, как на ваших компьютерах.

Также есть веб-разработка. Обычно интерфейсная веб-разработка требует понимания таких языков, как HTML и CSS, чтобы создать красивый и отзывчивый веб-сайт. Увеличилось количество интерфейсов «перетаскивания» среди конструкторов веб-сайтов, что позволило людям создавать свои собственные веб-сайты, не понимая кода. Такие инструменты, как Adobe Dreamweaver, позволят вам создать веб-сайт и экспортировать его в виде кода, который может анализировать браузер.

WYSIWYG также может широко применяться к любому количеству программного обеспечения, которое используют творческие профессионалы. Редакторы живого видео, фоторедакторы, программы для иллюстраций и студии 3D-анимации — все они используют визуальный метод для немедленной демонстрации результатов. Например, в таких видеоредакторах, как Adobe Premiere и Sony Vegas, есть окно предварительного просмотра, которое позволяет мгновенно воспроизвести готовые клипы перед тем, как пройти долгий процесс экспорта.

Редакторы WYSIWYG

WordPress

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

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

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

Некоторые также позволяют печатать в гибридном формате, который объединяет редактирование WYSIWYG с традиционным редактированием. Типичный пример этого — сайты с уценкой, такие как Reddit. У вас часто будет возможность применить форматирование к их текстовым полям, которые вы можете предварительно просмотреть перед публикацией.

Программы для Windows, мобильные приложения, игры — ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале — Подписывайтесь:)

Источник: cpab.ru

Обзор лучших WYSIWYG-редакторов

Рассматриваем лучшие текстовые WYSIWYG-редакторы, которые можно встроить на сайты и в веб-приложения. Полнофункциональные, быстрые и красивые модули, которые добавят в ваш проект отличный инструмент для работы с текстом.

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

Editor.js

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

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

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

Редактор предлагает разработчикам доступ к большому количеству API, с помощью которых можно значительно расширить функциональность Editor.js или добавить поддержку сторонних сервисов. Например, добавить новый тип блоков, который содержит в себе не только текст и медиаконтент, но и сниппет с твитом, интерактивное голосование или пост из Инстаграма.

Комьюнити теперь в Телеграм
Подпишитесь и будьте в курсе последних IT-новостей

Slate

Утилита для работы с текстом, полностью написанная на JavaScript и подключаемая к сторонним ресурсам в качестве альтернативы малофункциональному тегу .

Slate умеет все, что необходимо уметь подобному приложению:

• В нем можно редактировать и форматировать большие объемы текста.
• Есть поддержка чеклистов и списков разных форматов.
• Помимо текста, Slate также поддерживает изображения.
• В текстовое поле можно закрепить ролик с YouTube или пост из Инстаграма.
• Slate может распознать другой HTML-контент и не создает проблем с совместимостью при экспорте текста в другие приложения.
• Имеется подсветка кода и подсветка результатов поиска.
• Есть полноценная поддержка таблиц.

На самом деле, возможностей у 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-редактором сейчас несложно. Описанные выше варианты показались мне наиболее интересными. К тому же большая их часть легко подключается к готовым проектам и распространяется бесплатно. Пробуйте и внедряйте!

Источник: timeweb.com