CKEditor

CKEditor — это семейство веб-ориентированных текстовых редакторов с открытым исходным кодом, предназначенных для создания и редактирования форматированного контента (WYSIWYG) непосредственно в браузере. Разрабатывается и поддерживается польской компанией CKSource sp. z o.o. с ограниченной ответственностью. Редакторы семейства CKEditor встраиваются в HTML-страницы и позволяют пользователям форматировать текст, вставлять изображения, таблицы, ссылки и другие элементы без знания HTML-кода. Является одним из наиболее распространённых решений в данной категории наряду с TinyMCE и Quill.

История

Разработка CKEditor началась в 2003 году под названием FCKeditor (аббревиатура от Frederico Caldeira Knabben — имени основателя проекта). Первая версия была написана на JavaScript и работала только в Internet Explorer, но быстро получила поддержку других браузеров. В 2009 году проект был переименован в CKEditor (от «Content and Knowledge Editor») в связи с выходом третьей версии, которая была полностью переписана с нуля.

В 2014 году вышла версия CKEditor 4, ставшая стандартом для многих CMS и фреймворков. Она отличалась модульной архитектурой, поддержкой плагинов и высокой степенью настраиваемости. В 2018 году была анонсирована версия CKEditor 5, построенная на новой архитектуре Model-View-Controller (MVC) и использующая современные технологии, такие как ES6, Promises и Web Components. Переход на пятую версию был сопряжён с обратной несовместимостью, что вызвало критику со стороны разработчиков, привыкших к API четвёртой версии.

Архитектура и принцип работы

CKEditor представляет собой JavaScript-приложение, которое загружается в iframe или непосредственно в DOM-дерево страницы. Редактор преобразует редактируемую область в визуальный интерфейс, где пользователь видит результат форматирования в реальном времени. За кулисами редактор работает с HTML-кодом, который генерируется и обновляется динамически.

CKEditor 4

Архитектура CKEditor 4 основана на классическом подходе: редактор создаёт iframe, внутри которого загружается отдельный документ с редактируемым содержимым. Все операции форматирования выполняются через команды, которые изменяют DOM внутри iframe. Плагины расширяют функциональность, добавляя кнопки панели инструментов, диалоговые окна или новые типы контента.

CKEditor 5

CKEditor 5 использует модель данных (Data Model), которая отделена от представления (View). Редактор работает с внутренней моделью документа, а HTML-код генерируется только при сохранении или экспорте. Это позволяет более эффективно управлять сложным форматированием, поддерживать совместное редактирование и обеспечивать лучшую производительность. Архитектура MVC также упрощает тестирование и разработку плагинов.

Основные возможности

Форматирование текста

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

Работа с мультимедиа

Редактор позволяет вставлять изображения (как локальные, так и по URL), видео, аудиофайлы, а также внедрять контент из внешних сервисов (YouTube, Vimeo, Twitter) через oEmbed. В CKEditor 5 встроен механизм загрузки изображений на сервер через адаптеры.

Таблицы

Поддерживается создание и редактирование таблиц с возможностью объединения ячеек, изменения ширины столбцов, добавления и удаления строк. В CKEditor 5 реализована продвинутая работа с таблицами, включая вложенные таблицы.

Ссылки и якоря

Редактор позволяет создавать гиперссылки, редактировать их, добавлять атрибуты target и rel, а также создавать якоря для навигации внутри документа.

Шаблоны и стили

В CKEditor 4 доступна система стилей, которая позволяет применять предопределённые CSS-классы к элементам. CKEditor 5 предлагает систему блоков и инлайн-стилей через механизм «Style».

Совместное редактирование

Начиная с версии CKEditor 5, реализована поддержка совместного редактирования в реальном времени через операционную трансформацию (Operational Transformation). Эта функция доступна в платной редакции Collaboration Features.

Версии и лицензирование

CKEditor 4

Распространяется под лицензией GPL v2 или более поздней версии. Существуют также коммерческие лицензии для проектов, несовместимых с GPL. Версия 4 продолжает поддерживаться, но находится в режиме сопровождения без добавления новых функций.

CKEditor 5

Базовая версия (Classic, Inline, Balloon, Balloon Block, Document) распространяется под лицензией GPL v2+. Расширенные функции, такие как совместное редактирование, ревизии, комментарии и трекинг изменений, требуют покупки коммерческой лицензии. Также доступна облачная версия CKEditor Cloud Services.

Применение

CKEditor используется в качестве редактора контента в тысячах веб-приложений, включая:

• Системы управления контентом (CMS): Drupal, Joomla, WordPress (через плагины), Magento, OpenCart.
• Фреймворки и библиотеки: Ruby on Rails, Django, Laravel, Angular, React, Vue.js.
• Платформы для совместной работы: OwnCloud, Nextcloud, Redmine.
• Корпоративные системы: SAP, Salesforce, IBM Connections.

Критика

Основные претензии пользователей и разработчиков к CKEditor касаются следующих аспектов:

• Обратная несовместимость CKEditor 5: многие проекты, построенные на CKEditor 4, не могли легко перейти на пятую версию из-за кардинальных изменений в API и архитектуре.
• Сложность кастомизации: в CKEditor 5 процесс создания собственных плагинов требует глубокого понимания архитектуры MVC и инструментов сборки (webpack, Rollup).
• Производительность: в некоторых сценариях (например, при работе с очень большими документами) редактор может демонстрировать замедление, особенно в версии 4.
• Зависимость от коммерческих функций: ряд востребованных возможностей (совместное редактирование, комментарии) доступен только по платной подписке, что ограничивает использование в open-source проектах.

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

• Название «FCKeditor» было изменено на «CKEditor» после того, как аббревиатура FCK стала ассоциироваться с нецензурным выражением в англоязычном интернете.
• CKEditor 4 был одним из первых редакторов, полностью поддерживающих стандарт HTML5.
• В 2023 году CKSource объявила о прекращении активной разработки CKEditor 4, рекомендовав пользователям мигрировать на пятую версию.
• Исходный код редактора написан на TypeScript, начиная с версии CKEditor 5.

Источники

• Официальная документация CKEditor 4 и CKEditor 5 (ckeditor.com/docs)
• Репозиторий CKEditor на GitHub (github.com/ckeditor)
• Статья «CKEditor» в английской Википедии
• Публикации блога CKSource (cksource.com/blog)