Обзор всех существующих 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 редакторам

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

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

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

Пожалуйста, введите ваш комментарий!
пожалуйста, введите ваше имя здесь

СЕГОДНЯ ЧИТАЮТ

Обзор и описание Newspaper темы для WordPress, красивая и удобная

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

Справочник команд SSH для EXIM

Exim (от англ. EXperimental Internet Mailer) — это сервис, почтовый агент пересылки сообщений, используемый в операционных системах семейства Unix. Очень часто exim сервис применяется...

Убираем показ ошибок на сайте при режиме работы Nginx и PHP-FPM

Столкнулся с задачей убрать ошибки при просмотре сайта, который работает в режиме nginx + php-fpm. В настройках php панели показ ошибок отключен, однако ошибки...

Сниппет Woocommerce для добавления итого при выборе количества товаров на странице

Очень полезную штуку нашёл для того чтобы добавить к странице товара подсчёт стоимости товаров исходя из количества. Пришлось его немного переделать, так как выглядело...

Психология подбора цвета сайта для web дизайна проектов

Мы зачастую воспринимаем цвет сайта интуитивно как удобный для работы с сайтом или наоборот. При этом редко знаем почему всё так обстоит и почему...

Хак Woocommerce для отображения цену в руб и грв

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

ПОХОЖИЕ МАТЕРИАЛЫ

Редакторы изображений Tune WP | Дополнение WPSSO для повышения резкости фото WordPress

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

Вопросы и ответы по теме Woodmart (обновляется )

Тема Woodmart одна из лучших для создания интернет магазинов на Woocommerce. Однако ничто не бывает идеальным, поэтому возникают различные проблемы с ней....

TotalContest Pro – Плагин WordPress для конкурса фото, аудио и видео

TotalContest - это мощный плагин для проведения онкурсов WordPress, предназначенный для проведения и управления конкурсами и соревнованиями на вашем сайте. Он был разработан, чтобы...

Content-visibility: новое свойство CSS, повышающее скорость и рендеринг сайта

Поддержка новых возможностей css стилей, которые появились в Chromium 85, могут быть один из самых новых свойств впечатляющих CSS для улучшения производительности загрузки страницы....

Хак Woocommerce для отображения цену в руб и грв

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

BulletProof Security плагин WordPress: безопасность, сканер, файрвол

Защита безопасности сайта на WordPress: Сканер вредоносного кода, Файрвол, защита формы авторизации, создание резервных копий базы данных, анти-спам и многое другое. Смотрите раздел Основные...