Обзор всех существующих WYSIWYG web редакторов для сайтов

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

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

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

РЕКОМЕНДУЕМ

Как использовать консоль браузера Chrome для поиска и исправления ошибок JavaScript

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

Как работать с header в теме Newspaper: делаем лого и настраиваем...

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

Пять главных стандартных инструментов системного администратора Centos

Этот блог во многом сохранение для меня еще некоторых данных. Поэтому я пишу бывает и очень такие понятные вещи, чтобы в будущем мог для...

Что такое LVM, принцип работы и детали использования

LVM, или Logical Volume Manager, - это решение для создания разделов томов Linux, которое существует уже некоторое время и предоставляет ряд расширенных...
Alecs Retin
Работаю в сфере web с 2009 года. Занимался созданием своих проектов в разных тематиках. В основном делаю сайты на Instantcms и Wordpress. Оказываю услуги разработки сайтов и стартапов, инвестирую в интернет проекты и сервисы. Более 10 лет занимаюсь Web разработкой и создание интернет проектов. Интернет магазины, информационные порталы, городские порталы. Оказываю поддержку в развитии и продвижении сайтов.