Skip to content

Instantly share code, notes, and snippets.

@monolithed

monolithed/WYSIWYG.md

Last active Nov 19, 2021
Star
Embed
What would you like to do?
Learn more about clone URLs
Download ZIP
WYSIWYG редакторы
Raw
WYSIWYG.md

Модуль должен соответствовать следующим требованиям:

  • Свободная лицензия (в идеале)
  • API
  • Масштабировать текст по количеству символов (в идеале)
  • Быть кроссбраузерным IE9+
  • Сокращать ссылки и подсвечивать ссылки
  • Иметь защиту от XSS
  • Конфигурироваться
  • Поддерживать историю
  • Поддерживать стандартные операции форматирования текста:
    • U|B|I
    • Заголовки
    • Цитаты
    • Выбор цвета для фона и текста
    • Удаление форматирования
    • Выбор шрифта?
    • Отображение текста списком (символы, цифры)
    • Выравнивание текста
  • Вставка таблиц (с изменением)
  • Вставка ссылок (с удалением и редактированием)
  • Вставка изображений (по ссылке и загрузка, в т.ч. перемещение)
  • Копирование изображений
  • Вставка видео
  • Вставка файлов (см. гитхаб)
  • Вставка смайлов (emoji)
  • Полноэкранный режим
  • -Поддержка Markdown-
  • Правка HTML кода
  • Справка
  • Произвольное позиционирование элементов редактора (dnd)
  • Изменение размеров формы (динамическое на основе количества символов и ручное)
  • Предпросмотр
  • Вставка кода (с подсветкой?)
  • Перенос на новую строку должен быть без дополнительных линий
  • Подсветка блока при наведении (в идеале)
  • Локализация

Обзор WYSIWYG-решений (по лицензии, размеру и минусам):

http://ru.setka.io/editor/

Пока закрытая бета

http://froala.com/wysiwyg-editor

  • Стоимость лицензии $800
  • Проблема с историей
  • Работает как плагин для jQuery
  • Подсветка ссылок не работает по переводу строки
  • Размер 173 + 5 (css) + 25.4 (css) + 88 (jQuery) = 290.5kb

http://xdsoft.net/jodit/

  • Стоимость лицензии $30
  • Проблема с переводом строки (межстрочный интервал первой строки отличается от последующих)
  • Размер: 63 (css) + 202 (js) = 263
  • Тормозит перенос строк (или мне так кажется)
  • Отсутствует загрузка файлов отличных от изображений
  • Нет подстветки ссылок
  • По функциональности и интерфейсу напоминает Froala!

https://textbox.io

  • $500 в месяц!
  • Облачное решение
  • Переопределено контекстное меню (вставка текста только с помощью клавиатуры)

https://www.tinymce.com/

  • Стоимость лицензии и от $1 за пользователя
  • Очень жирный и неуклюжий

http://ckeditor.com/

  • Стоимость лицензии $1000+
  • Неудобный интерфейс для работы с таблицами, ссылками и изображениями
  • Размер: 200 (js) + 280 (css) = 480kb
  • Нет вложенных цитат

https://imperavi.com/redactor/

  • Стоимость лицензии $200
  • Убогое добавление таблиц
  • Можно копировать изображения!
  • Для форматирование текста используются дополнительные плагины

http://getcontenttools.com/

  • Свободная лицензия
  • Отсутствует интерфейс перемещения файлов
  • Неудобный интерфейс создания таблиц
  • Есть подсветка блока при наведении
  • Нельзя задать цвет

http://summernote.org/

  • Свободная лицензия
  • Работает как плагин для jQuery
  • Отсутствует интерфейс перемещения файлов
  • Неудобное редактирование таблиц
  • Таблицы нельзя редактировать

http://alloyeditor.com/demo/

  • Свободная лицензия
  • Отсутствует интерфейс перемещения файлов
  • Есть API
  • Странный он, но в целом почти все есть

http://slatejs.org

  • Свободная лицензия
  • Используется React
  • Нельзя сделать перевод строки в таблицах
  • Нельзя копировать изображения
  • Отсутствует интерфейс загрузки и перемещения файлов
  • Есть API

http://etherpad.org

  • Свободная лицензия
  • Долго загружается
  • Убогий интерфейс
  • Отсутствует интерфейс загрузки и перемещения файлов
  • Нет таблиц

https://sofish.github.io/pen/

  • Свободная лицензия
  • Отсутствует интерфейс загрузки и перемещения файлов
  • Нет таблиц

http://alex-d.github.io/Trumbowyg/

  • Свободная лицензия
  • Работает как плагин для jQuery
  • Отсутствует интерфейс загрузки и перемещения файлов

https://yabwe.github.io/medium-editor/

  • Свободная лицензия
  • Отсутствует интерфейс загрузки и перемещения файлов
  • Нет таблиц
  • Нет API

https://github.com/jakiestfu/Medium.js

  • Свободная лицензия
  • Отсутствует интерфейс загрузки и перемещения файлов
  • Нет таблиц
  • Нет API

http://olivier-m.github.io/minislate/#demo

  • Свободная лицензия
  • Отсутствует интерфейс загрузки и перемещения файлов
  • Нет таблиц
  • Нет API

http://quilljs.com/

  • Свободная лицензия
  • Отсутствует интерфейс загрузки (кроме изображений) и перемещения файлов
  • Нет таблиц
  • Размер: 200 (js) + 280 (css) = 480

https://trix-editor.org/

  • Свободная лицензия
  • Отсутствует интерфейс загрузки и перемещения файлов
  • Нет таблиц
  • Ограниченная функциональность

https://github.com/yabwe/words

  • Свободная лицензия
  • Ограниченная функциональность

http://jejacks0n.github.io/mercury/

  • Свободная лицензия
  • Жуткий интерфейс

http://webodf.org/

  • Свободная лицензия
  • Жуткий интерфейс

http://facebook.github.io/draft-js/

  • Свободная лицензия
  • Используется React
  • Нет таблиц
  • Отсутствует интерфейс загрузки и перемещения файлов
  • Это все-таки феймворк, а не готовый модуль

https://simplemde.com/

  • Свободная лицензия
  • Markdown-редактор

http://substance.io/

  • Свободная лицензия
  • Какая-то убогая альтернатива Офису

http://www.sceditor.com/

  • Работает как плагин для jQuery
  • Убогий интерфейс

http://markitup.jaysalvat.com/

  • Убогий интерфейс

https://github.com/steveathon/bootstrap-wysiwyg

  • Работает как плагин для jQuery
  • Использует Boostrap
  • Ограниченная функциональность

http://wymeditor.github.io/wymeditor

  • Свободная лицензия
  • Убогий интерфейс

http://jhtmlarea.codeplex.com/

  • Свободная лицензия
  • Работает как плагин для jQuery
  • Убогий интерфейс

https://github.com/jfuentesa/rataeditor

  • Свободная лицензия
  • Работает как плагин для jQuery
  • Убогий интерфейс
  • Отсутствует API

http://neilj.github.io/Squire/

  • Свободная лицензия
  • Отсутствует интерфейс загрузки и перемещения файлов
  • Ограниченная функциональность
  • Нет таблиц
  • Нет колорпикера
  • Есть API
  • Небольшой размер 35KB

https://github.com/mduvall/grande.js

  • Свободная лицензия
  • Заброшенный клон Medium'a

https://github.com/michelson/Dante

  • Свободная лицензия
  • Клон Medium'a

https://michelson.github.io/dante2/

  • Свободная лицензия
  • Ограниченная функциональность

http://wysihtml.com/

  • Свободная лицензия
  • Отсутсвует интерфейс

https://github.com/alohaeditor/Aloha-Editor

  • Свободная лицензия
  • Заброшен

http://hallojs.org/

  • Свободная лицензия
  • Ограниченная функциональность

https://react-rte.org/

  • Свободная лицензия
  • Используется React
  • Ограниченная функциональность
  • Отсутсвуют таблицы и пр.

Обзор WYSIWYG-решений:

http://froala.com/wysiwyg-editor

  • Интерфейс устраивает полностью, хотя есть баги
  • Стоимость лицензии $800
  • Работает как плагин для jQuery
  • Размер 173 + 5 (css) + 25.4 (css) + 88 (jQuery) = 290.5kb

http://xdsoft.net/jodit/

  • Свободная лицензия
  • Размер: 63 (css) + 202 (js) = 263
  • Тормозит перенос строк (или мне так кажется)
  • Отсутствует загрузка файлов отличных от изображений
  • По функциональности и интерфейсу напоминает Froala!

http://getcontenttools.com/

  • Свободная лицензия
  • Отсутствует интерфейс перемещения файлов
  • Неудобный интерфейс создания таблиц
  • Есть подсветка блока при наведении
  • Нельзя задать цвет

http://summernote.org/

  • Свободная лицензия
  • Работает как плагин для jQuery
  • Отсутствует интерфейс перемещения файлов
  • Неудобное редактирование таблиц
  • Очень напоминает froala

https://textbox.io

  • $500 в месяц!
  • Облачное решение
  • Переопределено контекстное меню (вставка текста только с помощью клавиатуры)

https://www.tinymce.com/

  • Стоимость лицензии и от $1 за пользователя

http://ckeditor.com/

  • Стоимость лицензии $1000+
  • Неудобный интерфейс для работы с таблицами, ссылками и изображениями
  • Размер: 200 (js) + 280 (css) = 480

http://xdsoft.net/jodit/

  • Свободная лицензия
  • Хороша работа с таблицами
  • Отсутствует интерфейс загрузки и перемещения файлов

https://imperavi.com/redactor/

  • Стоимость лицензии $200
  • Убогое добавление таблиц
  • Можно копировать изображения!
  • Для форматирование текста используются дополнительные плагины

http://www.xstandard.com/

  • Стоимость лицензии $2899
  • Жуткий интерфейс

http://alloyeditor.com/demo/

  • Свободная лицензия
  • Отсутствует интерфейс перемещения файлов
  • Есть API
  • Странный он, но в целом почти все есть

https://www.advancedcustomfields.com/resources/wysiwyg-editor/

  • Для WordPress

http://plugnedit.com/pnew/

  • Для WordPress
  • Редкостный хлам

http://slatejs.org

  • Свободная лицензия
  • Используется React
  • Нельзя сделать перевод строки в таблицах
  • Нельзя копировать изображения
  • Отсутствует интерфейс загрузки и перемещения файлов
  • Есть API

http://nicedit.com/

  • Свободная лицензия
  • Нет таблиц
  • Ограниченная фунциональность
  • Нет API
  • Жуткий интерфейс

http://etherpad.org

  • Свободная лицензия
  • Долго загружается
  • Убогий интерфейс
  • Отсутствует интерфейс загрузки и перемещения файлов
  • Нет таблиц

https://sofish.github.io/pen/

  • Свободная лицензия
  • Отсутствует интерфейс загрузки и перемещения файлов
  • Нет таблиц

http://alex-d.github.io/Trumbowyg/

  • Свободная лицензия
  • Работает как плагин для jQuery
  • Отсутствует интерфейс загрузки и перемещения файлов

https://yabwe.github.io/medium-editor/

  • Свободная лицензия
  • Отсутствует интерфейс загрузки и перемещения файлов
  • Нет таблиц
  • Нет API

https://github.com/jakiestfu/Medium.js

  • Свободная лицензия
  • Отсутствует интерфейс загрузки и перемещения файлов
  • Нет таблиц
  • Нет API

http://olivier-m.github.io/minislate/#demo

  • Свободная лицензия
  • Отсутствует интерфейс загрузки и перемещения файлов
  • Нет таблиц
  • Нет API

http://quilljs.com/

  • Свободная лицензия
  • Отсутствует интерфейс загрузки (кроме изображений) и перемещения файлов
  • Нет таблиц
  • Размер: 200 (js) + 280 (css) = 480

https://trix-editor.org/

  • Свободная лицензия
  • Отсутствует интерфейс загрузки и перемещения файлов
  • Нет таблиц
  • Ограниченная функциональность

https://github.com/yabwe/words

  • Свободная лицензия
  • Ограниченная функциональность

http://jejacks0n.github.io/mercury/

  • Свободная лицензия
  • Жуткий интерфейс

http://webodf.org/

  • Свободная лицензия
  • Жуткий интерфейс

http://facebook.github.io/draft-js/

  • Свободная лицензия
  • Используется React
  • Нет таблиц
  • Отсутствует интерфейс загрузки и перемещения файлов
  • Это все-таки феймворк, а не готовый модуль

https://simplemde.com/

  • Свободная лицензия
  • Markdown-редактор

http://substance.io/

  • Свободная лицензия
  • Какая-то убогая альтернатива Офису

http://www.sceditor.com/

  • Работает как плагин для jQuery
  • Убогий интерфейс

http://markitup.jaysalvat.com/

  • Убогий интерфейс

https://github.com/steveathon/bootstrap-wysiwyg

  • Работает как плагин для jQuery
  • Использует Boostrap
  • Ограниченная функциональность

http://wymeditor.github.io/wymeditor

  • Свободная лицензия
  • Убогий интерфейс

http://jhtmlarea.codeplex.com/

  • Свободная лицензия
  • Работает как плагин для jQuery
  • Убогий интерфейс

https://github.com/jfuentesa/rataeditor

  • Свободная лицензия
  • Работает как плагин для jQuery
  • Убогий интерфейс
  • Отсутствует API

http://neilj.github.io/Squire/

  • Свободная лицензия
  • Отсутствует интерфейс загрузки и перемещения файлов
  • Ограниченная функциональность
  • Нет таблиц
  • Нет колорпикера
  • Есть API
  • Небольшой размер 35KB

https://github.com/mduvall/grande.js

  • Свободная лицензия
  • Заброшенный клон Medium'a

https://github.com/michelson/Dante

  • Свободная лицензия
  • Клон Medium'a

https://michelson.github.io/dante2/

  • Свободная лицензия
  • Ограниченная функциональность

http://wysihtml.com/

  • Свободная лицензия
  • Отсутствует интерфейс

https://github.com/alohaeditor/Aloha-Editor

  • Свободная лицензия
  • Заброшен

http://hallojs.org/

  • Свободная лицензия
  • Ограниченная функциональность

https://react-rte.org/

  • Свободная лицензия
  • Используется React
  • Ограниченная функциональность
  • Отсутствуют таблицы и пр.

https://github.com/guardian/scribe

  • Свободная лицензия
  • Отсутствует интерфейс

https://bevacqua.github.io/woofmark/

  • Свободная лицензия
  • Убогий интерфейс

https://github.com/jessegreathouse/TinyEditor/

  • Свободная лицензия
  • Заброшен
  • Убогий интерфейс

http://prosemirror.net/

  • Свободная лицензия
  • Убогий интерфейс
  • Ограниченная функциональность

https://github.com/bustlelabs/mobiledoc-kit

  • Свободная лицензия
  • Малофункциональный движок

Фавориты:

Проблемы

  • Практически у всех редакторов имеются проблемы с переводом строки, отсутствует интерфейс для перемещения файлов и возможность произвольного позиционирования.
@dordenis
Copy link

dordenis commented Mar 29, 2018

Спасибо большое за обзор

@sergeycw
Copy link

sergeycw commented Feb 14, 2019

Отличный обзор, спасибо!

@dapi
Copy link

dapi commented Jun 17, 2019

Уфф! Мощно!

@AkioSarkiz
Copy link

AkioSarkiz commented Jan 9, 2020

Summernote отлично работает с таблицами. Вы хоть пробовали его?

@WinterSilence
Copy link

WinterSilence commented Feb 22, 2020

некоторые пункты повторяются

@AnarCom
Copy link

AnarCom commented Jul 23, 2021

Возможно это немного не в тему, но есть прекрасный editorjs.io (ака https://github.com/codex-team/editor.js)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment