CKEditor TextSelection pour Drupal : conservez votre curseur et votre sélection lors du passage en mode Source

Ce que fait le module

CKEditor TextSelection est un module Drupal qui intègre le plugin CKEditor 5 “Text Selection” dans l’éditeur CKEditor 5 de Drupal. Son objectif principal est simple : préserver la position du curseur et la sélection de texte lors du basculement entre WYSIWYG et le mode Source — et garder la sélection visible en la faisant défiler jusqu’à l’afficher à l’écran.

• Conserve la position du curseur lors des basculements WYSIWYG ↔ Source.
• Conserve une véritable sélection de texte (pas seulement le curseur).
• Fait défiler la vue pour afficher la sélection dans les deux modes.
• Fonctionne très bien avec CKEditor CodeMirror Source Editing pour une expérience d’édition en mode Source plus agréable.
• Inspiré du comportement de l’addon classique de CKEditor 4 : CKEditor 4 TextSelection .

Pourquoi c’est important (un détail UX qui fait gagner du temps)

Les éditeurs passent en mode Source pour de bonnes raisons : nettoyer du balisage collé, ajuster un attribut de lien, corriger la structure d’une liste, vérifier les titres, ou s’assurer que le HTML correspond exactement à leur intention. Perdre la sélection/le curseur à chaque basculement crée de la friction — surtout dans des articles longs. L’objectif de ce module est simple : vous garder dans le flow.

Comment ça marche (vue d’ensemble)

Lors du passage de WYSIWYG au mode Source, le plugin mappe votre position de curseur ou votre sélection depuis le modèle de l’éditeur vers la position correspondante dans la source HTML. Lors du retour, il lit la position du curseur/la sélection en mode Source et la restaure dans l’éditeur riche. Si quelque chose ne peut pas être mappé parfaitement (des cas limites arrivent), il échoue de façon élégante sans casser l’éditeur.

Essayez-le (démo)

Vous voulez voir le plugin CKEditor 5 sous-jacent en action ? Ouvrez la démo, sélectionnez une phrase, basculez en Source, et observez la sélection rester en place : CKEditor 5 Text Selection Plugin Demo .

Liens du projet Drupal

• Page du projet : https://www.drupal.org/project/ckeditor_textselection 
• Versions : https://www.drupal.org/project/ckeditor_textselection/releases (consultez ici la dernière version et les notes de compatibilité)
• Instructions Git (workflow clone/patch) : https://www.drupal.org/project/ckeditor_textselection/git-instructions 
• Tickets (issues) : https://www.drupal.org/project/issues/ckeditor_textselection 

Installation

1) Installer via Composer

Installez le module avec Composer (recommandé). Si vous voulez une version spécifique, choisissez-la sur la page des versions .

composer require drupal/ckeditor_textselection

2) Activer le module

Activez CKEditor TextSelection comme n’importe quel module contribué (UI ou Drush).

3) L’activer dans votre format de texte

1. Allez dans Administration → Configuration → Content authoring → Text formats and editors.
2. Ouvrez le format qui utilise CKEditor 5.
3. Dans les paramètres CKEditor 5, activez le plugin Text Selection.
4. Assurez-vous que le bouton Source editing est disponible dans la barre d’outils (vous avez besoin du mode Source pour basculer).
5. Enregistrez la configuration du format de texte.

4) Terminé

Aucun réglage supplémentaire n’est requis. Une fois activée, la conservation de la sélection fonctionne automatiquement à chaque basculement de mode.

Utilisation avec CodeMirror Source Editing

Si votre équipe éditoriale préfère la coloration syntaxique en mode Source, associez ce module à CKEditor CodeMirror Source Editing . Cela améliore la lisibilité tout en conservant la préservation de la sélection.

Sous le capot : projets upstream

Le module Drupal est construit autour du plugin upstream CKEditor 5. Si vous voulez le consulter ou y contribuer :

• Dépôt GitHub : https://github.com/levmyshkin/ckeditor5-textselection 
• Package Packagist : https://packagist.org/packages/levmyshkin/ckeditor5-textselection 

Retours & contributions bienvenus

J’aimerais beaucoup avoir des retours d’éditeurs Drupal, de site builders et de développeurs — en particulier sur des cas limites délicats où le mapping de la sélection entre WYSIWYG et HTML peut être ambigu. Partagez vos résultats, ouvrez des tickets ou contribuez : CKEditor TextSelection sur Drupal.org .