WYSIWYG web редакторы, это редакторы, которые используются для работы с контентом сайта. Как правило в каждой из cms идёт свой выбор редакторов, но на самом деле он гораздо больше и сегодня мы представляем полный обзор существующих редакторов, которые были созданы различными разработчиками.
Каждый из них имеет свои плюсы и минусы, но тем не менее они есть и если вам необходимо подобрать редактор, то вы вполне можете, прочитав этот список, собрать для себя воедино всю информацию о возможностях реализации и внедрения этих редакторов себе на сайт или в cms систему. При создании списка использовалась информация с GitHub.
Основные требования к WYSIWYG редакторам
Я попробовал собрать вместе требования, которые обычно хотелось бы видеть внедрёнными в WYSIWYG редакторы. Получился такой вот примерно список:
- Лицензирование (желательно Открытая свободная для использования для использования лицензия);
- Кроссбраузерность отображения;
- Поддержка полной работы с ссылками (возможность их сокращения и обязательно подсвечивание);
- Поддержка работы с таблицами, в удобном формате вставки и создания таблиц;
- Создание цитат, поддержка заголовков, списки, фон, цвет шрифта и выбора шрифта;
- Поддержка копирования картинок и изображений, возможность универсально вставлять картинки;
- Поддержка вставки различных форматов файлов: pdf и прочее;
- Наличие смайлов, поддержка emoji;
- Удобный интерфейс работы с редактором;
- Наличие справочной страниц для работы;
- Просмотр и редактирование исходного кода;
- Поддержка html редактирования страницы контента;
- Выравнивание текста, поддержка операций форматирования текста;
- Наличие языковых версий перевода редактора;
- Поддержка вставки видео с крупных сайтов, embed вставка медиа данных.
Конечно есть много еще необходимых функций, которые каждому хотелось бы видеть под себя, но я собрал самое нужное.
Список существующих WYSIWYG редакторов
froala.com/wysiwyg-editor
Лицензия стоит $800
Проблема с историей
Работает как плагин для jQuery
Подсветка ссылок не работает по переводу строки
Размер 173 + 5 (css) + 25.4 (css) + 88 (jQuery) = 290.5kb
xdsoft.net/jodit/
Лицензия стоит $30
Проблема с переводом строки (межстрочный интервал первой строки отличается от последующих)
Размер: 63 (css) + 202 (js) = 263
Тормозит перенос строк (или мне так кажется)
Отсутствует загрузка файлов отличных от изображений
Нет подсветки ссылок
По функциональности и интерфейсу напоминает Froala!
textbox.io
$500 в месяц!
Облачное решение
Переопределено контекстное меню (вставка текста только с помощью клавиатуры)
www.tinymce.com/
Лицензия стоит от $1 за пользователя
Очень жирный и неуклюжий
ckeditor.com/
Лицензия стоит $1000+
Неудобный интерфейс для работы с таблицами, ссылками и изображениями
Размер: 200 (js) + 280 (css) = 480kb
Нет вложенных цитат
imperavi.com/redactor/
Лицензия стоит $200
Минус: добавление таблиц
Можно копировать изображения!
Для форматирования текста используются дополнительные плагины
getcontenttools.com/
Открытая свободная для использования лицензия
Отсутствует интерфейс перемещения файлов
Неудобный интерфейс создания таблиц
Есть подсветка блока при наведении
Нельзя задать цвет
summernote.org/
Открытая свободная для использования лицензия
Работает как плагин для jQuery
Отсутствует интерфейс перемещения файлов
Неудобное редактирование таблиц
Таблицы нельзя редактировать
alloyeditor.com/demo/
Открытая свободная для использования лицензия
Отсутствует интерфейс перемещения файлов
Есть API
Странный он, но в целом почти все есть
slatejs.org
Открытая свободная для использования лицензия
Используется React
Нельзя сделать перевод строки в таблицах
Нельзя копировать изображения
Отсутствует интерфейс загрузки и перемещения файлов
Есть API
etherpad.org
Открытая свободная для использования лицензия
Долго загружается
Мало функциональный интерфейс
Отсутствует интерфейс загрузки и перемещения файлов
Нет таблиц
sofish.github.io/pen/
Открытая свободная для использования лицензия
Отсутствует интерфейс загрузки и перемещения файлов
Нет таблиц
alex-d.github.io/Trumbowyg/
Открытая свободная для использования лицензия
Работает как плагин для jQuery
Отсутствует интерфейс загрузки и перемещения файлов
yabwe.github.io/medium-editor/
Открытая свободная для использования лицензия
Отсутствует интерфейс загрузки и перемещения файлов
Нет таблиц
Нет API
github.com/jakiestfu/Medium.js
Открытая свободная для использования лицензия
Отсутствует интерфейс загрузки и перемещения файлов
Нет таблиц
Нет API
olivier-m.github.io/minislate/#demo
Открытая свободная для использования лицензия
Отсутствует интерфейс загрузки и перемещения файлов
Нет таблиц
Нет API
quilljs.com/
Открытая свободная для использования лицензия
Отсутствует интерфейс загрузки (кроме изображений) и перемещения файлов
Нет таблиц
Размер: 200 (js) + 280 (css) = 480
trix-editor.org/
Открытая свободная для использования лицензия
Отсутствует интерфейс загрузки и перемещения файлов
Нет таблиц
Небольшая функциональность
github.com/yabwe/words
Открытая свободная для использования лицензия
Небольшая функциональность
jejacks0n.github.io/mercury/
Открытая свободная для использования лицензия
Жуткий интерфейс
webodf.org/
Открытая свободная для использования лицензия
Жуткий интерфейс
facebook.github.io/draft-js/
Открытая свободная для использования лицензия
Используется React
Нет таблиц
Отсутствует интерфейс загрузки и перемещения файлов
Это все-таки фреймворк, а не готовый модуль
simplemde.com/
Открытая свободная для использования лицензия
Markdown-редактор
substance.io/
Открытая свободная для использования лицензия
Какая-то слабая альтернатива Офису
www.sceditor.com/
Работает как плагин для jQuery
Мало функциональный интерфейс
markitup.jaysalvat.com/
Мало функциональный интерфейс
github.com/steveathon/bootstrap-wysiwyg
Работает как плагин для jQuery
Использует Boostrap
Небольшая функциональность
wymeditor.github.io/wymeditor
Открытая свободная для использования лицензия
Мало функциональный интерфейс
jhtmlarea.codeplex.com/
Открытая свободная для использования лицензия
Работает как плагин для jQuery
Мало функциональный интерфейс
github.com/jfuentesa/rataeditor
Открытая свободная для использования лицензия
Работает как плагин для jQuery
Мало функциональный интерфейс
Отсутствует API
neilj.github.io/Squire/
Открытая свободная для использования лицензия
Отсутствует интерфейс загрузки и перемещения файлов
Небольшая функциональность
Нет таблиц
Нет колорпикера
Есть API
Небольшой размер 35KB
github.com/mduvall/grande.js
Открытая свободная для использования лицензия
Заброшенный клон Medium’a
github.com/michelson/Dante
Открытая свободная для использования лицензия
Клон Medium’a
michelson.github.io/dante2/
Открытая свободная для использования лицензия
Небольшая функциональность
wysihtml.com/
Открытая свободная для использования лицензия
Отсутствует интерфейс
github.com/alohaeditor/Aloha-Editor
Открытая свободная для использования лицензия
Заброшен
hallojs.org/
Открытая свободная для использования лицензия
Небольшая функциональность
react-rte.org/
Открытая свободная для использования лицензия
Используется React
Небольшая функциональность
Отсутствуют таблицы и пр.
Обзор WYSIWYG-решений:
github.com/guardian/scribe
Открытая свободная для использования лицензия
Отсутствует интерфейс
bevacqua.github.io/woofmark/
Открытая свободная для использования лицензия
Мало функциональный интерфейс
github.com/jessegreathouse/TinyEditor/
Открытая свободная для использования лицензия
Заброшен
Мало функциональный интерфейс
prosemirror.net/
Открытая свободная для использования лицензия
Мало функциональный интерфейс
Небольшая функциональность
github.com/bustlelabs/mobiledoc-kit
Открытая свободная для использования лицензия
Мало функциональный движок
Итоговый вывод по web редакторам
Вывод таков, что существует достаточно много редакторов для подключения к сайту. Есть откровенно слабые решения или заточенные под определенные задачи, есть крупные развитые монстры известные каждому, но всегда остаётся возможность сделать еще лучше и удобнее редактор, или доработать.
Поэтому идеальных редакторов нет. А каждый выбирает именно под себя и под свои задачи. Возможно спустя пару лет, какой то из этих редакторов станет чем то большим, но время покажет.
