CKEditor TextSelection za Drupal: sačuvajte kursor i selekciju pri prelasku u Source režim
Ako dovoljno dugo uređujete sadržaj u Drupalu, verovatno ste naišli na ovaj sitan, ali iritantan prekid toka rada: označite reč ili postavite kursor, prebacite na Source da dotegnete markup, i… izgubite svoje mesto. Napravio sam mali modul koji rešava baš to.
Šta modul radi
CKEditor TextSelection je Drupal modul koji integriše CKEditor 5 dodatak “Text Selection” u Drupalov CKEditor 5 editor. Njegov glavni cilj je jednostavan: sačuva poziciju kursora i selekciju teksta pri prebacivanju između WYSIWYG i Source režima — i zadrži selekciju vidljivom tako što je skroluje u prikaz.
- Čuva poziciju kursora pri prebacivanju WYSIWYG ↔ Source.
- Čuva stvarnu selekciju teksta (ne samo karet).
- Skroluje prikaz kako bi selekcija bila vidljiva u oba režima.
- Dobro radi zajedno sa CKEditor CodeMirror Source Editing za prijatnije uređivanje u Source režimu.
- Inspirisan ponašanjem klasičnog CKEditor 4 dodatka: CKEditor 4 TextSelection .
Zašto je ovo važno (UX detalj koji stvarno štedi vreme)
Urednici prelaze u Source režim iz dobrih razloga: čišćenje zalepljenog markupa, podešavanje atributa linka, ispravljanje strukture liste, provera naslova ili potvrda da je HTML tačno onakav kako su zamislili. Gubitak selekcije/kareta pri svakom prebacivanju unosi trenje — naročito u dužim člancima. Cilj ovog modula je jednostavan: da ostanete u toku.
Kako radi (na visokom nivou)
Pri prebacivanju iz WYSIWYG u Source režim, dodatak mapira trenutnu poziciju kursora ili selekciju iz modela editora na odgovarajuću poziciju u HTML izvornom kodu. Pri povratku, očitava kursor/selekciju u Source režimu i vraća je u vizuelni (rich text) editor. Ako nešto ne može savršeno da se mapira (dešavaju se rubni slučajevi), sve se završava elegantno bez „lomljenja“ editora.
Isprobajte (demo)
Želite da vidite osnovni CKEditor 5 dodatak na delu? Otvorite demo, označite frazu, prebacite na Source i gledajte kako selekcija ostaje na mestu: CKEditor 5 Text Selection Plugin Demo .
Linkovi Drupal projekta
- Stranica projekta: https://www.drupal.org/project/ckeditor_textselection
- Izdanja: https://www.drupal.org/project/ckeditor_textselection/releases (ovde proverite najnoviju verziju i napomene o kompatibilnosti)
- Git uputstva (clone/patch tok): https://www.drupal.org/project/ckeditor_textselection/git-instructions
- Problemi (issues): https://www.drupal.org/project/issues/ckeditor_textselection
Instalacija
1) Instalirajte putem Composer-a
Instalirajte modul koristeći Composer (preporučeno). Ako želite određenu verziju, izaberite je na stranici izdanja .
composer require drupal/ckeditor_textselection2) Omogućite modul
Omogućite CKEditor TextSelection kao i bilo koji drugi contributed modul (UI ili Drush).
3) Omogućite ga u vašem tekstualnom formatu
- Idite na Administration → Configuration → Content authoring → Text formats and editors.
- Otvorite format koji koristi CKEditor 5.
- U CKEditor 5 podešavanjima omogućite dodatak Text Selection.
- Proverite da je dugme Source editing dostupno na traci alata (potreban je Source režim za prebacivanje).
- Sačuvajte konfiguraciju tekstualnog formata.
4) Gotovo
Nisu potrebna dodatna podešavanja. Kada je omogućeno, čuvanje selekcije radi automatski svaki put kada prebacujete režime.
Korišćenje sa CodeMirror Source Editing
Ako vaš urednički tim preferira isticanje sintakse u Source režimu, uparite ovaj modul sa CKEditor CodeMirror Source Editing . Ovo poboljšava čitljivost, a pritom zadržava očuvanje selekcije.
Ispod haube: upstream projekti
Drupal modul je izgrađen oko upstream CKEditor 5 dodatka. Ako želite da ga pogledate ili doprinesete:
- GitHub repozitorijum: https://github.com/levmyshkin/ckeditor5-textselection
- Packagist paket: https://packagist.org/packages/levmyshkin/ckeditor5-textselection
Feedback & doprinosi su dobrodošli
Rado bih čuo povratne informacije od Drupal urednika, site builder-a i developera — posebno oko nezgodnih rubnih slučajeva gde mapiranje selekcije između WYSIWYG i HTML-a može biti dvosmisleno. Podelite nalaze, otvorite issues ili doprinesite: CKEditor TextSelection na Drupal.org .