CKEditor TextSelection для Drupal: сохраняйте курсор и выделение при переключении в режим Source

Что делает модуль

CKEditor TextSelection — это модуль Drupal, который интегрирует плагин CKEditor 5 “Text Selection” в редактор CKEditor 5 в Drupal. Его основная цель проста: сохранять позицию курсора и выделение текста при переключении между WYSIWYG и Source — и оставлять выделение видимым, прокручивая его в область просмотра.

• Сохраняет позицию курсора при переключении WYSIWYG ↔ Source.
• Сохраняет реальное выделение текста (а не только каретку).
• Прокручивает область просмотра так, чтобы выделение было видно в обоих режимах.
• Отлично работает вместе с CKEditor CodeMirror Source Editing для более удобного редактирования в режиме Source.
• Вдохновлён поведением классического аддона CKEditor 4: CKEditor 4 TextSelection .

Почему это важно (UX-деталь, которая реально экономит время)

Редакторы переключаются в Source по уважительным причинам: очистить вставленную разметку, поправить атрибут ссылки, исправить структуру списка, проверить заголовки или убедиться, что HTML именно такой, как задумано. Потеря выделения/каретки при каждом переключении создаёт трение — особенно в длинных материалах. Цель этого модуля проста: помочь вам не выпадать из потока.

Как это работает (в общих чертах)

При переходе из WYSIWYG в Source плагин сопоставляет текущую позицию курсора или выделение из модели редактора с соответствующей позицией в HTML-исходнике. При переключении обратно он считывает курсор/выделение в Source и восстанавливает его в визуальном редакторе. Если что-то нельзя сопоставить идеально (иногда случаются крайние случаи), модуль корректно отрабатывает без поломки редактора.

Попробуйте (демо)

Хотите увидеть базовый плагин CKEditor 5 в действии? Откройте демо, выделите фразу, переключитесь в Source — и увидите, что выделение остаётся на месте: CKEditor 5 Text Selection Plugin Demo .

Ссылки на проект Drupal

• Страница проекта: https://www.drupal.org/project/ckeditor_textselection 
• Релизы: https://www.drupal.org/project/ckeditor_textselection/releases (здесь можно посмотреть последнюю версию и примечания по совместимости)
• Инструкции Git (workflow clone/patch): https://www.drupal.org/project/ckeditor_textselection/git-instructions 
• Задачи/ошибки: https://www.drupal.org/project/issues/ckeditor_textselection 

Установка

1) Установка через Composer

Установите модуль с помощью Composer (рекомендуется). Если нужна конкретная версия, выберите её на странице релизов .

composer require drupal/ckeditor_textselection

2) Включите модуль

Включите CKEditor TextSelection как любой модуль из contrib (через UI или Drush).

3) Включите его в вашем текстовом формате

1. Перейдите в Administration → Configuration → Content authoring → Text formats and editors.
2. Откройте формат, который использует CKEditor 5.
3. В настройках CKEditor 5 включите плагин Text Selection.
4. Убедитесь, что кнопка Source editing доступна на панели инструментов (режим Source нужен для переключения).
5. Сохраните настройки текстового формата.

4) Готово

Дополнительные настройки не требуются. После включения сохранение выделения работает автоматически каждый раз при переключении режимов.

Использование вместе с CodeMirror Source Editing

Если ваша редакционная команда предпочитает подсветку синтаксиса в режиме Source, используйте этот модуль вместе с CKEditor CodeMirror Source Editing . Это улучшает читаемость, сохраняя при этом работу сохранения выделения.

Под капотом: upstream-проекты

Модуль Drupal построен вокруг upstream-плагина CKEditor 5. Если хотите посмотреть код или внести вклад:

• Репозиторий GitHub: https://github.com/levmyshkin/ckeditor5-textselection 
• Пакет на Packagist: https://packagist.org/packages/levmyshkin/ckeditor5-textselection 

Отзывы и вклад приветствуются

Буду рад отзывам от редакторов Drupal, site builder’ов и разработчиков — особенно по сложным крайним случаям, где сопоставление выделения между WYSIWYG и HTML может быть неоднозначным. Делитесь результатами, открывайте задачи или подключайтесь к разработке: CKEditor TextSelection на Drupal.org .