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 редакторам
Вывод таков, что существует достаточно много редакторов для подключения к сайту. Есть откровенно слабые решения или заточенные под определенные задачи, есть крупные развитые монстры известные каждому, но всегда остаётся возможность сделать еще лучше и удобнее редактор, или доработать.
Поэтому идеальных редакторов нет. А каждый выбирает именно под себя и под свои задачи. Возможно спустя пару лет, какой то из этих редакторов станет чем то большим, но время покажет.
Вопрос к автору статьи: Какие редакторы из представленного списка наиболее подходят для работы с таблицами и обработки ссылок?
Какие конкретно редакторы были включены в этот обзор и какие лицензии на них применяются?
Какие редакторы входят в обзор и какие именно требования были использованы при создании списка?
Вопрос: Какие WYSIWYG редакторы из списка предоставляют возможность работы с ссылками, включая их сокращение и подсвечивание?
Здравствуйте!
Спасибо за статью, думаю многим было интересно и полезно больше узнать о WYSIWYG веб-редакторах. Понятно, что выбор редактора зависит от конкретных требований, и список представленных основных функций это подтверждает.
В моем случае, одним из важных критериев выбора редактора является его «лёгкость», то есть скорость загрузки и нагрузка на системные ресурсы. Не нашел в статье упоминания о том, как разные редакторы влияют на производительность веб-сайта. Может быть, автор мог бы поделиться информацией или своим мнением по этому вопросу?
Еще у меня возник вопрос об одной из функций, а именно «Поддержка работы с таблицами». Было бы очень полезно узнать, есть ли редакторы поддерживающие импорт таблиц из сторонних источников (например, MS Excel или Google Таблицы) и в каком формате это происходит. Это может быть значительным плюсом для тех, кто работает с большим количеством данных.
В общем, статья очень полезная. Однако, думаю можно было бы расширить функциональность и добавить ещё несколько критериев оценки, таких как производительность и расширенная работа с таблицами.
Ваш обзор WYSIWYG веб-редакторов вызывает интерес, особенно в контексте различных систем управления контентом (CMS). Однако у меня возникло несколько вопросов, которые помогут лучше понять, какие редакторы могут быть наиболее подходящими для различных потребностей пользователей.
Например, вы упомянули важность кроссбраузерности. Можете ли вы привести примеры редакторов, которые вы рассматриваете как наиболее надежные в этом аспекте? Как они справляются с различиями в рендеринге контента в популярных браузерах, таких как Chrome, Firefox и Safari?
Кроме того, хотелось бы уточнить, что подразумевается под «поддержкой полной работы с ссылками». Имеется в виду возможность редактировать не только текст ссылки, но и изменять ее целевой URL в удобном интерфейсе? Например, если пользователь хочет заменить ссылку на статью, не нужно ли ему заново создавать ее, или редактор предлагает автоматическое обновление?
Что касается работы с таблицами, вы упоминаете «удобный формат вставки и создания». Можете более подробно рассказать, какие именно функции были бы полезны пользователям? Например, поддержка Drag-and-Drop для перестановки строк и столбцов, возможность динамически изменять размеры ячеек или интеграция с внешними источниками данных (например, таблицами Google)?
Также будет полезно упомянуть, что некоторые пользователи могут искать дополнительные функции, такие как возможность интеграции с графическими редакторами или библиотеками медиа-контента. Расширяемость редакторов инструментариями для дополнительной настройки и, возможно, поддержки API для разработчиков могла бы стать существенным плюсом.
Надеюсь, эти вопросы подскажут вам некоторые аспекты, которые стоит осветить более детально.
В статье рассматриваются WYSIWYG веб-редакторы и их особенности, но мне хотелось бы уточнить некоторые моменты, которые могут быть полезны для более глубокого понимания этой темы. Например, в требованиях к WYSIWYG редакторам упоминается лицензирование. Как вы считаете, какие открытые лицензии наиболее предпочтительны для этой категории редакторов? Является ли наличие лицензии важнейшим критерием при выборе редактора или можно обойтись и закрытыми решениями, которые могут предложить лучшее качество или поддержку?
Кроме того, в статье упоминается кроссбраузерность отображения. Можете ли вы привести примеры редакторов, которые продемонстрировали высокую степень совместимости в разных браузерах? Иногда некоторые редакторы прекрасно работают в Chrome, но имеют проблемы с Internet Explorer или Safari.
Также было бы интересно узнать больше о функциональности работы с таблицами. Упоминается, что редакторы должны поддерживать удобный формат вставки и создания таблиц. Можете поделиться некоторыми примерами редакторов, которые дают наилучший опыт работы с таблицами? Например, какие редакторы позволяют легко изменять размер ячеек, добавлять/удалять строки и колонки или форматировать содержимое в таблицах?
Возможно, стоит рассмотреть и другие функции, такие как возможность интеграции с другими инструментами (например, медиа-библиотеками, системами управления проектами или аналитическими сервисами). Это может значительно расширить возможности работы с контентом сайта и улучшить эффективность использования редакторов. Есть ли у вас информация или примеры интеграций, которые особенно полезны?