CKEditor TextSelection voor Drupal: behoud uw cursor en selectie bij het overschakelen naar de Source-modus

Wat de module doet

CKEditor TextSelection is een Drupal-module die de CKEditor 5-plugin “Text Selection” integreert in Drupal’s CKEditor 5-editor. Het hoofddoel is simpel: uw cursorpositie en tekstselectie behouden bij het wisselen tussen WYSIWYG en Source — en de selectie zichtbaar houden door ernaartoe te scrollen.

• Behoudt de cursorpositie bij het wisselen WYSIWYG ↔ Source.
• Behoudt een echte tekstselectie (niet alleen de caret).
• Scrolt de viewport zodat de selectie in beide modi zichtbaar is.
• Werkt goed samen met CKEditor CodeMirror Source Editing voor een prettigere Source-bewerkingservaring.
• Geïnspireerd door het gedrag van de klassieke CKEditor 4-addon: CKEditor 4 TextSelection .

Waarom dit belangrijk is (een UX-detail dat echt tijd bespaart)

Redacteuren schakelen om goede redenen naar de Source-modus: geplakte markup opschonen, een linkattribuut aanpassen, een lijststructuur corrigeren, koppen verifiëren, of zeker weten dat de HTML exact is zoals bedoeld. Het verliezen van selectie/caret bij elke wissel geeft wrijving—zeker bij langere artikelen. Het doel van deze module is simpel: u in de flow houden.

Hoe het werkt (op hoofdlijnen)

Bij het overschakelen van WYSIWYG naar Source brengt de plugin uw huidige cursorpositie of selectie vanuit het editormodel in kaart naar de corresponderende positie in de HTML-bron. Bij het terugschakelen leest hij de cursor/selectie in Source en herstelt die in de rich text-editor. Als iets niet perfect kan worden gemapt (edge cases gebeuren nu eenmaal), faalt het netjes zonder de editor te breken.

Probeer het (demo)

Wilt u de onderliggende CKEditor 5-plugin in actie zien? Open de demo, selecteer een frase, schakel Source in en zie hoe de selectie op zijn plek blijft: CKEditor 5 Text Selection Plugin Demo .

Drupal-projectlinks

• Projectpagina: https://www.drupal.org/project/ckeditor_textselection 
• Releases: https://www.drupal.org/project/ckeditor_textselection/releases (kijk hier voor de nieuwste versie en compatibiliteitsnotities)
• Git-instructies (clone/patch-workflow): https://www.drupal.org/project/ckeditor_textselection/git-instructions 
• Issues: https://www.drupal.org/project/issues/ckeditor_textselection 

Installatie

1) Installeren via Composer

Installeer de module met Composer (aanbevolen). Als u een specifieke versie wilt, kies die dan op de Releases-pagina .

composer require drupal/ckeditor_textselection

2) Schakel de module in

Schakel CKEditor TextSelection in zoals elke andere contributed module (UI of Drush).

3) Schakel het in uw tekstformaat in

1. Ga naar Administration → Configuration → Content authoring → Text formats and editors.
2. Open het formaat dat CKEditor 5 gebruikt.
3. Schakel onder CKEditor 5-instellingen de plugin Text Selection in.
4. Zorg dat de knop Source editing beschikbaar is in de werkbalk (u hebt Source nodig om te kunnen wisselen).
5. Sla de configuratie van het tekstformaat op.

4) Klaar

Er zijn geen extra instellingen nodig. Na inschakelen werkt het behoud van de selectie automatisch telkens wanneer u van modus wisselt.

Gebruiken met CodeMirror Source Editing

Als uw redactionele team syntax highlighting in Source prefereert, combineer deze module dan met CKEditor CodeMirror Source Editing . Dit verbetert de leesbaarheid terwijl het behoud van de selectie intact blijft.

Onder de motorkap: upstream-projecten

De Drupal-module is gebouwd rond de upstream CKEditor 5-plugin. Als u die wilt bekijken of eraan wilt bijdragen:

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

Feedback & bijdragen welkom

Ik hoor graag feedback van Drupal-editors, site builders en developers — vooral rond lastige edge cases waarbij het mappen van de selectie tussen WYSIWYG en HTML ambigu kan zijn. Deel uw bevindingen, open issues of draag bij: CKEditor TextSelection op Drupal.org .