CKEditor 5

CKEditor 5 — это современный текстовый редактор с открытым исходным кодом, предназначенный для встраивания в веб-приложения. Он относится к классу WYSIWYG-редакторов (What You See Is What You Get), позволяя пользователям редактировать контент в режиме, визуально близком к финальному результату. Разрабатывается и поддерживается польской компанией CKSource, которая также является создателем предыдущей версии — CKEditor 4. CKEditor 5 представляет собой полную переработку архитектуры редактора, написанную на современном JavaScript (ES6+) с использованием модульной системы и фреймворка MVC.

История

Разработка CKEditor 5 началась в 2014 году, когда команда CKSource осознала необходимость создания редактора с нуля, чтобы преодолеть архитектурные ограничения CKEditor 4. Основной целью было создание более гибкой, производительной и легко расширяемой системы, соответствующей современным стандартам веб-разработки.

Первая публичная бета-версия была выпущена в 2016 году. В 2018 году вышла стабильная версия 1.0.0, которая, однако, не обладала полным набором функций, доступных в CKEditor 4. В последующие годы функциональность активно расширялась: были добавлены поддержка таблиц, изображений, медиа-вставок, режим совместного редактирования в реальном времени и интеграция с различными фреймворками (React, Angular, Vue.js).

В 2023 году CKSource объявила о прекращении активной разработки CKEditor 4, сосредоточив все усилия на CKEditor 5. Последнее обновление CKEditor 4 (LTS-версия) вышло в 2024 году, после чего проект перешёл в режим поддержки безопасности.

Архитектура и ключевые особенности

CKEditor 5 принципиально отличается от своего предшественника по архитектуре. Он построен на модульной системе, где каждый функциональный блок (плагин) является отдельным модулем. Это позволяет разработчикам собирать редактор «под себя», включая только необходимые функции.

Основные компоненты архитектуры

• Ядро (Core): Базовый набор классов, отвечающих за работу с данными, моделью документа, командами и событиями.
• Модель данных (Model): Внутреннее представление документа, основанное на собственной модели данных, а не на HTML. Это позволяет более гибко управлять структурой контента и упрощает реализацию сложных операций, таких как отслеживание изменений.
• Представление (View): Отвечает за рендеринг модели в DOM (Document Object Model) браузера. Редактор использует собственный движок рендеринга, который минимизирует прямое взаимодействие с DOM, что повышает производительность.
• Плагины (Plugins): Все функции редактора, от форматирования текста до вставки изображений, реализованы в виде плагинов. Разработчики могут создавать собственные плагины, расширяя функциональность редактора.
• Интерфейс (UI): Пользовательский интерфейс, включающий панели инструментов, меню, диалоговые окна. Он также модульный и настраиваемый.

Ключевые особенности

• Современный стек технологий: Написан на TypeScript, что обеспечивает лучшую типизацию и поддержку при разработке.
• Высокая производительность: Благодаря эффективной работе с DOM и асинхронной обработке данных, редактор работает быстро даже с большими объёмами текста.
• Настраиваемость: Возможность собрать редактор с нужным набором функций, изменить внешний вид, добавить собственные плагины.
• Поддержка современных веб-стандартов: Использует ContentEditable API, но с собственным слоем абстракции, что позволяет избежать многих проблем, связанных с этим API.
• Совместное редактирование: Встроенная поддержка коллаборативного редактирования в реальном времени (доступна в коммерческой лицензии).
• Интеграция с фреймворками: Официальные пакеты для React, Angular, Vue.js, а также возможность интеграции с другими фреймворками.

Виды и конфигурации

CKEditor 5 предлагает несколько предварительно собранных сборок (builds), которые охватывают наиболее распространённые сценарии использования:

• Classic Editor: Традиционный WYSIWYG-редактор, встраиваемый в текстовую область (textarea) на странице.
• Inline Editor: Редактор, который активируется при клике на редактируемый элемент, отображая панель инструментов поверх него.
• Balloon Editor: Редактор, где панель инструментов появляется в виде «шарика» (balloon) рядом с выделенным текстом.
• Balloon Block Editor: Вариант Balloon Editor, который дополнительно показывает панель инструментов для вставки блоков (например, заголовков, списков) при наведении на пустую область.
• Document Editor: Редактор, имитирующий интерфейс текстового процессора, с фиксированной шириной страницы, нумерацией страниц и колонтитулами (доступен в коммерческой лицензии).

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

Применение

CKEditor 5 широко используется в различных веб-приложениях, где требуется редактирование форматированного текста:

• Системы управления контентом (CMS): Платформы, такие как Drupal (начиная с версии 9), используют CKEditor 5 в качестве основного редактора. Существуют плагины для интеграции с WordPress.
• Системы управления обучением (LMS): Платформы для создания и управления учебными курсами, такие как Moodle, используют CKEditor 5 для редактирования контента.
• Платформы для совместной работы: Сервисы для создания документов, вики-страниц и баз знаний (например, Confluence, хотя последний использует собственный редактор, CKEditor 5 является популярным выбором для многих корпоративных решений).
• Веб-приложения для бизнеса: Системы электронной почты, CRM, ERP, где требуется создание и редактирование форматированных сообщений и отчётов.
• Редакторы блогов и форумов: Многие блог-платформы и форумы встраивают CKEditor 5 для упрощения создания контента пользователями.

Лицензирование и стоимость

CKEditor 5 распространяется под двумя основными лицензиями:

• GNU General Public License v2+ (GPLv2+): Бесплатная лицензия с открытым исходным кодом. Подходит для проектов, которые также распространяются под GPL-совместимой лицензией.
• Коммерческая лицензия: Платная лицензия, которая позволяет использовать CKEditor 5 в проприетарных (закрытых) проектах без необходимости раскрывать исходный код. Коммерческая лицензия также включает доступ к расширенным функциям, таким как совместное редактирование в реальном времени, поддержка отслеживания изменений и Document Editor.

Стоимость коммерческой лицензии зависит от количества разработчиков и типа проекта (веб-приложение, SaaS-продукт). Для некоммерческих и образовательных проектов существуют специальные условия.

Критика и ограничения

Несмотря на широкую популярность, CKEditor 5 имеет ряд критических замечаний и ограничений:

• Сложность миграции с CKEditor 4: API и архитектура CKEditor 5 полностью отличаются от CKEditor 4. Миграция существующих плагинов и конфигураций требует значительных усилий и переписывания кода.
• Отсутствие некоторых функций из CKEditor 4: На момент запуска CKEditor 5 не имел ряда функций, доступных в CKEditor 4, таких как редактор формул, поддержка некоторых сложных таблиц и расширенных возможностей вставки. Хотя многие из них были добавлены позже, некоторые пользователи отмечают, что функциональность всё ещё не достигла полного паритета.
• Зависимость от современного браузера: CKEditor 5 не поддерживает устаревшие браузеры, такие как Internet Explorer 11. Это может быть проблемой для организаций, использующих старое программное обеспечение.
• Сложность настройки: Хотя модульность является преимуществом, она также усложняет процесс настройки для начинающих разработчиков. Сборка собственного редактора требует понимания архитектуры и инструментов сборки (например, webpack).
• Вес и производительность: При включении большого количества плагинов размер пакета редактора может быть значительным, что может влиять на время загрузки страницы, особенно на мобильных устройствах.

Интересные факты

• CKEditor 5 использует собственную модель данных, которая не является прямым представлением HTML. Это позволяет редактору более точно управлять семантикой контента и избегать некорректного HTML-кода, который часто генерируют другие WYSIWYG-редакторы.
• Проект CKEditor изначально назывался FCKeditor, по инициалам его создателя Фредерико Кнаббена (Frederico Caldeira Knabben). Первая версия была выпущена в 2003 году.
• CKEditor 5 является одним из немногих WYSIWYG-редакторов, который имеет встроенную поддержку совместного редактирования в реальном времени, реализованную на основе операционных трансформаций (Operational Transformation).

Источники

1. Официальная документация CKEditor 5. CKSource.
2. CKEditor 5: The Next Generation of Rich Text Editing. CKSource Blog.
3. Сравнение CKEditor 4 и CKEditor 5. CKSource.
4. Лицензионные соглашения CKEditor. CKSource.
5. Статья «CKEditor 5» на сайте Wikipedia (английская версия).
6. Обзоры и сравнения WYSIWYG-редакторов на сайтах разработчиков (например, Drupal, Moodle).