logo

Extra Block Types (EBT) - Neue Erfahrung im Layout Builder❗

Extra Block Types (EBT) - gestylte, anpassbare Blocktypen: Diashows, Registerkarten, Karten, Akkordeons und viele andere. Eingebaute Einstellungen für Hintergrund, DOM Box, Javascript Plugins. Erleben Sie die Zukunft der Layouterstellung schon heute.

Demo EBT-Module EBT-Module herunterladen

❗Extra Absatztypen (EPT) - Erfahrung mit neuen Absätzen

Extra Paragraph Types (EPT) - analoger, auf Absätzen basierender Satz von Modulen.

Demo EPT-Module EPT-Module herunterladen

GLightbox is a pure javascript lightbox (Colorbox alternative without jQuery)❗

It can display images, iframes, inline content and videos with optional autoplay for YouTube, Vimeo and even self-hosted videos.

Demo GLightbox Download GLightbox

Scroll
  1. Startseite
  2. Blog

CKEditor TextSelection für Drupal: Cursor und Auswahl beim Wechsel in den Source-Modus beibehalten

12/05/2026, by Ivan

Wenn du lange genug Inhalte in Drupal bearbeitest, bist du wahrscheinlich schon auf diesen kleinen, aber nervigen Workflow-Bruch gestoßen: Du markierst ein Wort oder setzt den Cursor, wechselst zu Source, um das Markup anzupassen, und … du verlierst deine Position. Ich habe ein kleines Modul gebaut, das genau dieses Problem behebt.

Was das Modul macht

CKEditor TextSelection ist ein Drupal-Modul, das das CKEditor-5-Plugin „Text Selection“ in Drupals CKEditor-5-Editor integriert. Das Hauptziel ist ganz einfach: die Cursorposition und die Textauswahl erhalten, wenn zwischen WYSIWYG und Source umgeschaltet wird — und die Auswahl sichtbar halten, indem sie in den sichtbaren Bereich gescrollt wird.

  • Behält die Cursorposition beim Umschalten WYSIWYG ↔ Source bei.
  • Behält eine echte Textauswahl bei (nicht nur die Einfügemarke).
  • Scrollt den Viewport so, dass die Auswahl in beiden Modi sichtbar ist.
  • Funktioniert gut zusammen mit CKEditor CodeMirror Source Editing für ein angenehmeres Editing-Erlebnis im Source-Modus.
  • Inspiriert vom Verhalten des klassischen CKEditor-4-Add-ons: CKEditor 4 TextSelection .

Warum das wichtig ist (ein UX-Detail, das wirklich Zeit spart)

Redakteur:innen wechseln aus guten Gründen in den Source-Modus: um eingefügtes Markup zu bereinigen, ein Link-Attribut anzupassen, eine Listenstruktur zu korrigieren, Überschriften zu prüfen oder sicherzustellen, dass das HTML genau dem entspricht, was beabsichtigt ist. Die Auswahl/Einfügemarke bei jedem Umschalten zu verlieren, erzeugt Reibung — besonders bei längeren Artikeln. Das Ziel dieses Moduls ist simpel: im Flow bleiben.

Wie es funktioniert (auf hoher Ebene)

Beim Wechsel von WYSIWYG in den Source-Modus ordnet das Plugin deine aktuelle Cursorposition oder Auswahl vom Editor-Modell der entsprechenden Position im HTML-Quelltext zu. Beim Zurückwechseln liest es Cursor/Auswahl im Source-Modus und stellt sie im Rich-Text-Editor wieder her. Wenn sich etwas nicht perfekt abbilden lässt (Edge Cases passieren), schlägt es sauber fehl, ohne den Editor zu beeinträchtigen.

Ausprobieren (Demo)

Möchtest du das zugrunde liegende CKEditor-5-Plugin in Aktion sehen? Öffne die Demo, markiere eine Phrase, schalte auf Source um und sieh zu, wie die Auswahl an Ort und Stelle bleibt: CKEditor 5 Text Selection Plugin Demo .

Drupal-Projektlinks

Installation

1) Installation über Composer

Installiere das Modul mit Composer (empfohlen). Wenn du eine bestimmte Version möchtest, wähle sie auf der Releases-Seite aus.

composer require drupal/ckeditor_textselection

2) Modul aktivieren

Aktiviere CKEditor TextSelection wie jedes andere Contrib-Modul (UI oder Drush).

3) Im Textformat aktivieren

  1. Gehe zu Administration → Configuration → Content authoring → Text formats and editors.
  2. Öffne das Format, das CKEditor 5 verwendet.
  3. Aktiviere unter den CKEditor-5-Einstellungen das Plugin Text Selection.
  4. Stelle sicher, dass die Schaltfläche Source editing in der Toolbar verfügbar ist (du brauchst den Source-Modus zum Umschalten).
  5. Speichere die Konfiguration des Textformats.

4) Fertig

Es sind keine zusätzlichen Einstellungen nötig. Sobald aktiviert, funktioniert das Beibehalten der Auswahl automatisch, jedes Mal wenn du die Modi umschaltest.

Verwendung mit CodeMirror Source Editing

Wenn dein Redaktionsteam Syntax-Highlighting im Source-Modus bevorzugt, kombiniere dieses Modul mit CKEditor CodeMirror Source Editing . Das verbessert die Lesbarkeit, während die Auswahl weiterhin erhalten bleibt.

Unter der Haube: Upstream-Projekte

Das Drupal-Modul basiert auf dem Upstream-Plugin von CKEditor 5. Wenn du es dir ansehen oder dazu beitragen möchtest:

Feedback & Beiträge willkommen

Ich freue mich über Feedback von Drupal-Redakteur:innen, Site Buildern und Entwickler:innen — besonders zu kniffligen Edge Cases, in denen das Mapping der Auswahl zwischen WYSIWYG und HTML mehrdeutig sein kann. Teile deine Erkenntnisse, eröffne Issues oder trage bei: CKEditor TextSelection auf Drupal.org .