CKEditor TextSelection per Drupal: mantieni il cursore e la selezione quando passi alla modalità Source

Cosa fa il modulo

CKEditor TextSelection è un modulo Drupal che integra il plugin CKEditor 5 “Text Selection” nell’editor CKEditor 5 di Drupal. Il suo obiettivo principale è semplice: preservare la posizione del cursore e la selezione del testo quando si passa tra la modalità WYSIWYG e la modalità Source — e mantenere la selezione visibile scorrendola nell’area visibile.

• Mantiene la posizione del cursore nei passaggi WYSIWYG ↔ Source.
• Mantiene una vera selezione di testo (non solo il cursore).
• Scorre la viewport per mostrare la selezione in entrambe le modalità.
• Funziona bene insieme a CKEditor CodeMirror Source Editing per un’esperienza di editing in Source più piacevole.
• Ispirato al comportamento del classico addon di CKEditor 4: CKEditor 4 TextSelection .

Perché è importante (un dettaglio UX che fa risparmiare tempo reale)

Gli editor passano alla modalità Source per buoni motivi: ripulire markup incollato, modificare un attributo di un link, sistemare la struttura di un elenco, verificare le intestazioni o assicurarsi che l’HTML sia esattamente quello che intendono. Perdere selezione/cursore a ogni cambio introduce frizione — soprattutto negli articoli più lunghi. L’obiettivo di questo modulo è semplice: tenerti nel flusso.

Come funziona (a grandi linee)

Quando si passa da WYSIWYG alla modalità Source, il plugin mappa la posizione corrente del cursore o la selezione dal modello dell’editor alla posizione corrispondente nel sorgente HTML. Quando si torna indietro, legge cursore/selezione in Source e la ripristina nell’editor rich text. Se qualcosa non può essere mappato perfettamente (i casi limite capitano), fallisce in modo elegante senza compromettere l’editor.

Provalo (demo)

Vuoi vedere il plugin CKEditor 5 sottostante in azione? Apri la demo, seleziona una frase, attiva Source e guarda la selezione rimanere dov’è: CKEditor 5 Text Selection Plugin Demo .

Link del progetto Drupal

• Pagina del progetto: https://www.drupal.org/project/ckeditor_textselection 
• Release: https://www.drupal.org/project/ckeditor_textselection/releases (controlla qui l’ultima versione e le note di compatibilità)
• Istruzioni Git (workflow clone/patch): https://www.drupal.org/project/ckeditor_textselection/git-instructions 
• Issue: https://www.drupal.org/project/issues/ckeditor_textselection 

Installazione

1) Installa tramite Composer

Installa il modulo usando Composer (consigliato). Se vuoi una versione specifica, sceglila dalla pagina delle release .

composer require drupal/ckeditor_textselection

2) Abilita il modulo

Abilita CKEditor TextSelection come qualsiasi modulo contrib (UI o Drush).

3) Abilitalo nel tuo formato di testo

1. Vai su Administration → Configuration → Content authoring → Text formats and editors.
2. Apri il formato che utilizza CKEditor 5.
3. Nelle impostazioni di CKEditor 5, abilita il plugin Text Selection.
4. Assicurati che il pulsante Source editing sia disponibile nella toolbar (ti serve la modalità Source per alternare).
5. Salva la configurazione del formato di testo.

4) Fatto

Non sono necessarie impostazioni aggiuntive. Una volta abilitato, il mantenimento della selezione funziona automaticamente ogni volta che alterni le modalità.

Usarlo con CodeMirror Source Editing

Se il tuo team editoriale preferisce l’evidenziazione della sintassi in modalità Source, abbina questo modulo a CKEditor CodeMirror Source Editing . Questo migliora la leggibilità mantenendo intatto il mantenimento della selezione.

Sotto il cofano: progetti upstream

Il modulo Drupal è costruito attorno al plugin upstream di CKEditor 5. Se vuoi vederlo o contribuire:

• Repository GitHub: https://github.com/levmyshkin/ckeditor5-textselection 
• Pacchetto Packagist: https://packagist.org/packages/levmyshkin/ckeditor5-textselection 

Feedback & contributi benvenuti

Mi farebbe piacere ricevere feedback da editor Drupal, site builder e sviluppatori — soprattutto su casi limite complessi in cui la mappatura della selezione tra WYSIWYG e HTML può essere ambigua. Condividi i tuoi riscontri, apri issue o contribuisci: CKEditor TextSelection su Drupal.org .