Skip to content

Instantly share code, notes, and snippets.

@monolithed
Last active August 19, 2023 14:28
Show Gist options
  • Star 37 You must be signed in to star a gist
  • Fork 10 You must be signed in to fork a gist
  • Save monolithed/8e36983c02859b95dad7edc956d8b806 to your computer and use it in GitHub Desktop.
Save monolithed/8e36983c02859b95dad7edc956d8b806 to your computer and use it in GitHub Desktop.
WYSIWYG редакторы

Обзор WYSIWYG-редакторов (2017 г.):

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

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

Больше не доступен.

  • Стоимость лицензии $800
  • Проблема с историей
  • Работает как плагин для jQuery
  • Подсветка ссылок не работает по переводу строки
  • Размер 173 + 5 (css) + 25.4 (css) + 88 (jQuery) = 290.5kb
  • Стоимость лицензии $30
  • Проблема с переводом строки (межстрочный интервал первой строки отличается от последующих)
  • Размер: 63 (css) + 202 (js) = 263
  • Тормозит перенос строк (или мне так кажется)
  • Отсутствует загрузка файлов отличных от изображений
  • Нет подстветки ссылок
  • По функциональности и интерфейсу напоминает Froala!
  • $500 в месяц!
  • Облачное решение
  • Переопределено контекстное меню (вставка текста только с помощью клавиатуры)
  • Стоимость лицензии и от $1 за пользователя
  • Очень жирный и неуклюжий
  • Стоимость лицензии $1000+
  • Неудобный интерфейс для работы с таблицами, ссылками и изображениями
  • Размер: 200 (js) + 280 (css) = 480kb
  • Нет вложенных цитат
  • Стоимость лицензии $200
  • Убогое добавление таблиц
  • Можно копировать изображения!
  • Для форматирование текста используются дополнительные плагины
  • Свободная лицензия
  • Отсутствует интерфейс перемещения файлов
  • Неудобный интерфейс создания таблиц
  • Есть подсветка блока при наведении
  • Нельзя задать цвет
  • Свободная лицензия
  • Работает как плагин для jQuery
  • Отсутствует интерфейс перемещения файлов
  • Неудобное редактирование таблиц
  • Таблицы нельзя редактировать
  • Свободная лицензия
  • Отсутствует интерфейс перемещения файлов
  • Есть API
  • Странный он, но в целом почти все есть
  • Свободная лицензия
  • Используется React
  • Нельзя сделать перевод строки в таблицах
  • Нельзя копировать изображения
  • Отсутствует интерфейс загрузки и перемещения файлов
  • Есть API
  • Свободная лицензия
  • Долго загружается
  • Убогий интерфейс
  • Отсутствует интерфейс загрузки и перемещения файлов
  • Нет таблиц
  • Свободная лицензия
  • Отсутствует интерфейс загрузки и перемещения файлов
  • Нет таблиц
  • Свободная лицензия
  • Работает как плагин для jQuery
  • Отсутствует интерфейс загрузки и перемещения файлов
  • Свободная лицензия
  • Отсутствует интерфейс загрузки и перемещения файлов
  • Нет таблиц
  • Нет API
  • Свободная лицензия
  • Отсутствует интерфейс загрузки и перемещения файлов
  • Нет таблиц
  • Нет API
  • Свободная лицензия
  • Отсутствует интерфейс загрузки и перемещения файлов
  • Нет таблиц
  • Нет API
  • Свободная лицензия
  • Отсутствует интерфейс загрузки (кроме изображений) и перемещения файлов
  • Нет таблиц
  • Размер: 200 (js) + 280 (css) = 480
  • Свободная лицензия
  • Отсутствует интерфейс загрузки и перемещения файлов
  • Нет таблиц
  • Ограниченная функциональность
  • Свободная лицензия
  • Ограниченная функциональность
  • Свободная лицензия
  • Жуткий интерфейс
  • Свободная лицензия
  • Жуткий интерфейс
  • Свободная лицензия
  • Используется React
  • Нет таблиц
  • Отсутствует интерфейс загрузки и перемещения файлов
  • Это все-таки феймворк, а не готовый модуль
  • Свободная лицензия
  • Markdown-редактор
  • Свободная лицензия
  • Какая-то убогая альтернатива Офису
  • Работает как плагин для jQuery
  • Убогий интерфейс
  • Убогий интерфейс
  • Работает как плагин для jQuery
  • Использует Boostrap
  • Ограниченная функциональность
  • Свободная лицензия
  • Убогий интерфейс
  • Свободная лицензия
  • Работает как плагин для jQuery
  • Убогий интерфейс
  • Свободная лицензия
  • Работает как плагин для jQuery
  • Убогий интерфейс
  • Отсутствует API
  • Свободная лицензия
  • Отсутствует интерфейс загрузки и перемещения файлов
  • Ограниченная функциональность
  • Нет таблиц
  • Нет колорпикера
  • Есть API
  • Небольшой размер 35KB
  • Свободная лицензия
  • Заброшенный клон Medium'a
  • Свободная лицензия
  • Клон Medium'a
  • Свободная лицензия
  • Ограниченная функциональность
  • Свободная лицензия
  • Отсутсвует интерфейс
  • Свободная лицензия
  • Заброшен
  • Свободная лицензия
  • Ограниченная функциональность
  • Свободная лицензия
  • Используется React
  • Ограниченная функциональность
  • Отсутсвуют таблицы и пр.

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

  • Интерфейс устраивает полностью, хотя есть баги
  • Стоимость лицензии $800
  • Работает как плагин для jQuery
  • Размер 173 + 5 (css) + 25.4 (css) + 88 (jQuery) = 290.5kb
  • Свободная лицензия
  • Размер: 63 (css) + 202 (js) = 263
  • Тормозит перенос строк (или мне так кажется)
  • Отсутствует загрузка файлов отличных от изображений
  • По функциональности и интерфейсу напоминает Froala!
  • Свободная лицензия
  • Отсутствует интерфейс перемещения файлов
  • Неудобный интерфейс создания таблиц
  • Есть подсветка блока при наведении
  • Нельзя задать цвет
  • Свободная лицензия
  • Работает как плагин для jQuery
  • Отсутствует интерфейс перемещения файлов
  • Неудобное редактирование таблиц
  • Очень напоминает froala
  • $500 в месяц!
  • Облачное решение
  • Переопределено контекстное меню (вставка текста только с помощью клавиатуры)
  • Стоимость лицензии и от $1 за пользователя
  • Стоимость лицензии $1000+
  • Неудобный интерфейс для работы с таблицами, ссылками и изображениями
  • Размер: 200 (js) + 280 (css) = 480
  • Свободная лицензия
  • Хороша работа с таблицами
  • Отсутствует интерфейс загрузки и перемещения файлов
  • Стоимость лицензии $200
  • Убогое добавление таблиц
  • Можно копировать изображения!
  • Для форматирование текста используются дополнительные плагины
  • Стоимость лицензии $2899
  • Жуткий интерфейс
  • Свободная лицензия
  • Отсутствует интерфейс перемещения файлов
  • Есть API
  • Странный он, но в целом почти все есть
  • Для WordPress
  • Для WordPress
  • Редкостный хлам
  • Свободная лицензия
  • Используется React
  • Нельзя сделать перевод строки в таблицах
  • Нельзя копировать изображения
  • Отсутствует интерфейс загрузки и перемещения файлов
  • Есть API
  • Свободная лицензия
  • Нет таблиц
  • Ограниченная фунциональность
  • Нет API
  • Жуткий интерфейс
  • Свободная лицензия
  • Долго загружается
  • Убогий интерфейс
  • Отсутствует интерфейс загрузки и перемещения файлов
  • Нет таблиц
  • Свободная лицензия
  • Отсутствует интерфейс загрузки и перемещения файлов
  • Нет таблиц
  • Свободная лицензия
  • Работает как плагин для jQuery
  • Отсутствует интерфейс загрузки и перемещения файлов
  • Свободная лицензия
  • Отсутствует интерфейс загрузки и перемещения файлов
  • Нет таблиц
  • Нет API
  • Свободная лицензия
  • Отсутствует интерфейс загрузки и перемещения файлов
  • Нет таблиц
  • Нет API
  • Свободная лицензия
  • Отсутствует интерфейс загрузки и перемещения файлов
  • Нет таблиц
  • Нет API
  • Свободная лицензия
  • Отсутствует интерфейс загрузки (кроме изображений) и перемещения файлов
  • Нет таблиц
  • Размер: 200 (js) + 280 (css) = 480
  • Свободная лицензия
  • Отсутствует интерфейс загрузки и перемещения файлов
  • Нет таблиц
  • Ограниченная функциональность
  • Свободная лицензия
  • Ограниченная функциональность
  • Свободная лицензия
  • Жуткий интерфейс
  • Свободная лицензия
  • Жуткий интерфейс
  • Свободная лицензия
  • Используется React
  • Нет таблиц
  • Отсутствует интерфейс загрузки и перемещения файлов
  • Это все-таки феймворк, а не готовый модуль
  • Свободная лицензия
  • Markdown-редактор
  • Свободная лицензия
  • Какая-то убогая альтернатива Офису
  • Работает как плагин для jQuery
  • Убогий интерфейс
  • Убогий интерфейс
  • Работает как плагин для jQuery
  • Использует Boostrap
  • Ограниченная функциональность
  • Свободная лицензия
  • Убогий интерфейс
  • Свободная лицензия
  • Работает как плагин для jQuery
  • Убогий интерфейс
  • Свободная лицензия
  • Работает как плагин для jQuery
  • Убогий интерфейс
  • Отсутствует API
  • Свободная лицензия
  • Отсутствует интерфейс загрузки и перемещения файлов
  • Ограниченная функциональность
  • Нет таблиц
  • Нет колорпикера
  • Есть API
  • Небольшой размер 35KB
  • Свободная лицензия
  • Заброшенный клон Medium'a
  • Свободная лицензия
  • Клон Medium'a
  • Свободная лицензия
  • Ограниченная функциональность
  • Свободная лицензия
  • Отсутствует интерфейс
  • Свободная лицензия
  • Заброшен
  • Свободная лицензия
  • Ограниченная функциональность
  • Свободная лицензия
  • Используется React
  • Ограниченная функциональность
  • Отсутствуют таблицы и пр.
  • Свободная лицензия
  • Отсутствует интерфейс
  • Свободная лицензия
  • Убогий интерфейс
  • Свободная лицензия
  • Заброшен
  • Убогий интерфейс
  • Свободная лицензия
  • Убогий интерфейс
  • Ограниченная функциональность
  • Свободная лицензия
  • Малофункциональный движок

Фавориты:

Проблемы

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

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

@sergeycw
Copy link

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

@dapi
Copy link

dapi commented Jun 17, 2019

Уфф! Мощно!

@AkioSarkiz
Copy link

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

@WinterSilence
Copy link

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

@AnarCom
Copy link

AnarCom commented Jul 23, 2021

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

@dvluhin
Copy link

dvluhin commented Apr 17, 2023

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

Работал с ним несколько лет. По редактированию таблиц функционал минимальный, через интерфейс почти ничего сделать нельзя.
Все делал через Code View (caption, rowspan / colspan, bgcolor, header и др.).

@AkioSarkiz
Copy link

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

Работал с ним несколько лет. По редактированию таблиц функционал минимальный, через интерфейс почти ничего сделать нельзя. Все делал через Code View (caption, rowspan / colspan, bgcolor, header и др.).

Это же тебе не Google Sheet, конечно функционал меньше 🙂. Факт в том, что он есть

@dvluhin
Copy link

dvluhin commented Apr 17, 2023

Работал с ним несколько лет. По редактированию таблиц функционал минимальный, через интерфейс почти ничего сделать нельзя. Все делал через Code View (caption, rowspan / colspan, bgcolor, header и др.).

Это же тебе не Google Sheet, конечно функционал меньше 🙂. Факт в том, что он есть

Если так подходить к вопросу, то любой редактор с Code View имеет все возможности для создания HTML элемента😉
В Summernote и редактор кода сделан криво - все в одну строку)

@AkioSarkiz
Copy link

Работал с ним несколько лет. По редактированию таблиц функционал минимальный, через интерфейс почти ничего сделать нельзя. Все делал через Code View (caption, rowspan / colspan, bgcolor, header и др.).

Это же тебе не Google Sheet, конечно функционал меньше 🙂. Факт в том, что он есть

Если так подходить к вопросу, то любой редактор с Code View имеет все возможности для создания HTML элемента😉

Осталось пользователям выучить HTML. Что за сравнения…

@Keratry
Copy link

Keratry commented Aug 19, 2023

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

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