CKEditor TextSelection para Drupal: mantén tu cursor y tu selección al cambiar al modo Fuente
Si editas contenido en Drupal el tiempo suficiente, probablemente te hayas topado con esta pequeña pero molesta ruptura del flujo de trabajo: seleccionas una palabra o colocas el cursor, cambias a Fuente para ajustar el marcado y… pierdes tu lugar. Construí un pequeño módulo para solucionar exactamente eso.
Qué hace el módulo
CKEditor TextSelection es un módulo de Drupal que integra el plugin “Text Selection” de CKEditor 5 en el editor CKEditor 5 de Drupal. Su objetivo principal es simple: preservar la posición del cursor y la selección de texto al alternar entre el modo WYSIWYG y el modo Fuente — y mantener la selección visible desplazándola hasta ponerla a la vista.
- Conserva la posición del cursor al alternar entre WYSIWYG ↔ Fuente.
- Conserva una selección de texto real (no solo el cursor).
- Desplaza la vista para mostrar la selección en ambos modos.
- Funciona bien junto con CKEditor CodeMirror Source Editing para una experiencia de edición en Fuente más agradable.
- Inspirado en el comportamiento del clásico addon de CKEditor 4: CKEditor 4 TextSelection .
Por qué esto importa (un detalle de UX que ahorra tiempo real)
Los editores cambian al modo Fuente por buenas razones: limpiar marcado pegado, ajustar un atributo de enlace, corregir la estructura de una lista, verificar encabezados o asegurarse de que el HTML sea exactamente lo que pretenden. Perder la selección/el cursor en cada alternancia introduce fricción, especialmente en artículos largos. El objetivo de este módulo es simple: mantenerte en flujo.
Cómo funciona (a alto nivel)
Al cambiar de WYSIWYG al modo Fuente, el plugin mapea tu posición actual del cursor o selección desde el modelo del editor hasta la posición correspondiente en el código fuente HTML. Al volver, lee el cursor/la selección en el modo Fuente y la restaura en el editor de texto enriquecido. Si algo no puede mapearse perfectamente (a veces hay casos límite), falla de forma elegante sin romper el editor.
Pruébalo (demo)
¿Quieres ver el plugin subyacente de CKEditor 5 en acción? Abre la demo, selecciona una frase, alterna a Fuente y observa cómo la selección se mantiene en su lugar: CKEditor 5 Text Selection Plugin Demo .
Enlaces del proyecto en Drupal
- Página del proyecto: https://www.drupal.org/project/ckeditor_textselection
- Versiones: https://www.drupal.org/project/ckeditor_textselection/releases (consulta aquí la última versión y las notas de compatibilidad)
- Instrucciones Git (flujo de clonación/parches): https://www.drupal.org/project/ckeditor_textselection/git-instructions
- Incidencias: https://www.drupal.org/project/issues/ckeditor_textselection
Instalación
1) Instalar con Composer
Instala el módulo usando Composer (recomendado). Si quieres una versión específica, elígela en la página de Versiones .
composer require drupal/ckeditor_textselection2) Habilitar el módulo
Habilita CKEditor TextSelection como cualquier módulo contribuido (UI o Drush).
3) Habilítalo en tu formato de texto
- Ve a Administración → Configuración → Autoría de contenido → Formatos de texto y editores.
- Abre el formato que usa CKEditor 5.
- En la configuración de CKEditor 5, habilita el plugin Text Selection.
- Asegúrate de que el botón Edición de fuente esté disponible en la barra de herramientas (necesitas el modo Fuente para alternar).
- Guarda la configuración del formato de texto.
4) Listo
No se requiere ninguna configuración adicional. Una vez habilitado, la conservación de la selección funciona automáticamente cada vez que alternas de modo.
Usarlo con CodeMirror Source Editing
Si tu equipo editorial prefiere el resaltado de sintaxis en el modo Fuente, combina este módulo con CKEditor CodeMirror Source Editing . Esto mejora la legibilidad manteniendo intacta la conservación de la selección.
Bajo el capó: proyectos upstream
El módulo de Drupal está construido alrededor del plugin upstream de CKEditor 5. Si quieres verlo o contribuir a él:
- Repositorio de GitHub: https://github.com/levmyshkin/ckeditor5-textselection
- Paquete en Packagist: https://packagist.org/packages/levmyshkin/ckeditor5-textselection
Comentarios y contribuciones bienvenidos
Me encantaría recibir comentarios de editores de Drupal, site builders y desarrolladores — especialmente sobre casos límite complicados donde el mapeo de la selección entre WYSIWYG y HTML puede ser ambiguo. Comparte tus hallazgos, abre incidencias o contribuye: CKEditor TextSelection en Drupal.org .