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 редакторам

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

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

ОСТАВЬТЕ ОТВЕТ

Отправить комментарий?
Напишите ваше имя