rte_ckeditor_image para TYPO3: Edición de imágenes en el Rich Text Editor

rte_ckeditor_image lleva la gestión profesional de imágenes al Rich Text Editor

El CKEditor de TYPO3 solo permite incrustar imágenes sencillas mediante etiqueta img, sin conexión con el File Abstraction Layer y sin variantes responsive. Para redacciones que insertan regularmente imágenes en artículos, noticias o textos de revista eso no basta: necesitan escalado, texto alternativo, pie de imagen, destino de enlace y, sobre todo, una salida nítida en pantallas de alta densidad. rte_ckeditor_image de Netresearch amplía el CKEditor con justamente esas funciones y lo integra limpiamente en el FAL. En cualquier proyecto TYPO3 con imágenes mantenidas editorialmente en texto corrido, la extensión es desde hace años la herramienta estándar y una de las ayudas de redacción más instaladas del ecosistema.

Escenarios típicos: redacciones con alto volumen de imágenes

Las revistas digitales y las páginas corporativas de noticias son el público objetivo clásico. Una revista con 200 artículos al año incluye por artículo entre dos y cinco imágenes en el texto corrido, además de imágenes de teaser y de cabecera. Sin rte_ckeditor_image, la redacción tendría que aceptar un cambio de elemento de contenido por cada imagen inline e interrumpir el flujo de texto. Con la extensión inserta la imagen directamente desde un botón de la barra de herramientas, selecciona la referencia FAL, pone el texto alternativo y el pie de imagen y vuelve a escribir sin cambio de contexto. La ganancia de eficiencia es medible en la práctica: en una redacción con 200 publicaciones al año y una media de cuatro imágenes por publicación ahorramos por artículo unos dos minutos de configuración, lo que al año suma cerca de 30 horas de trabajo.

Un segundo escenario son los catálogos de producto y la documentación técnica. Quien mantiene en un catálogo TYPO3 instrucciones paso a paso con capturas inline necesita las imágenes directamente en el texto. rte_ckeditor_image lo permite con las mismas referencias FAL que se usan en el resto del proyecto: las actualizaciones de imágenes se hacen en un solo sitio y tienen efecto en todas partes.

Un tercer escenario es la migración de instalaciones TYPO3 de la era htmlArea. Quien venía usando RTEhtmlArea encontraba allí una gestión de imágenes similar. Al cambiar a CKEditor, rte_ckeditor_image es la extensión de sustitución directa para que los redactores puedan seguir usando el flujo al que estaban acostumbrados. Sin la extensión la redacción no solo pierde una función al actualizar, sino un paso de trabajo completo que solo difícilmente puede sustituirse mediante elementos de contenido adicionales.

Arquitectura técnica: ampliación de la barra del CKEditor mediante plugin

La extensión consta de un plugin CKEditor que registra el botón de imagen y el diálogo de imagen, y de un renderizado del lado del servidor que traduce el marcador del HTML guardado en una salida Fluid. El plugin se comunica con un endpoint AJAX que procesa la referencia FAL, las dimensiones de la imagen y los textos alternativos.

En el contenido de base de datos la imagen queda como marcador HTML con los atributos data-htmlarea-file-uid y data-htmlarea-file-table, acompañados de otros atributos para zoom, nivel de calidad, anchura y altura. En el renderizado, una preUserFunc en lib.parseFunc_RTE procesa la etiqueta marcadora: escala la imagen mediante el procesamiento de imágenes de TYPO3, añade el atributo de lazy loading y genera figure, enlace y pie de imagen con partials Fluid que se pueden sobrescribir. Los límites de anchura y altura se definen en el Page TSconfig (maxWidth, maxHeight). Una configuración típica de revista trabaja con entre tres y cinco anchos (480, 768, 1024, 1440, 2048) y necesita para el srcset una preUserFunc propia, como la que muestra de ejemplo la documentación de la extensión; la extensión por sí sola no genera srcset.

El diálogo de imagen define anchura, altura, texto alternativo, título, nivel de calidad y la ampliación al hacer clic. El recorte con variantes solo lo ofrece el elemento de contenido Image regular. La anchura y la altura se guardan por instancia de imagen, de modo que la misma imagen FAL puede aparecer con distinto tamaño en diferentes artículos. Eso es especialmente importante cuando una imagen se usa con distinto tamaño tanto en el teaser de revista como en el texto corrido, sin que la redacción tenga que mantener dos archivos separados.

Problemas frecuentes: salida responsive, WebP y compatibilidad con CKEditor 5

El tema de soporte más habitual es la ausencia de salida srcset. El camino de renderizado por defecto no genera nunca srcset, sino una versión escalada de la imagen. No existe ningún ajuste para anchos srcset, ni en el YAML del RTE ni en la configuración de la extensión. La solución es una preUserFunc propia según el ejemplo de la documentación, que genera una variante procesada para cada anchura.

El segundo problema es WebP. Quien quiera entregar formatos modernos de imagen debe configurar el provider ImageMagick de TYPO3 o un setup GraphicsMagick con soporte WebP. rte_ckeditor_image no genera por sí mismo la conversión WebP, sino que recurre al Image Processor del núcleo. Sin una configuración correcta del provider, las imágenes se quedan como JPEG en la salida.

En tercer lugar, CKEditor 5 supone un cambio de arquitectura. TYPO3 v12 trae CKEditor 5, que utiliza un modelo de plugins distinto. Las versiones 12.x para TYPO3 v12 y 13.x para v13 y v14 de rte_ckeditor_image están portadas a CKEditor 5 y funcionan de fábrica. Los ajustes propios basados en CKEditor 4 deben adaptarse al actualizar. Quien haya construido plugins personalizados o botones propios de la barra de herramientas debería reservar entre uno y dos días de desarrollo para la migración.

La migración a TYPO3 v12 y v13 exige un salto de versión de la extensión

rte_ckeditor_image la mantiene activamente Netresearch y está disponible para TYPO3 v11, v12 y v13. El mayor salto está entre la serie 11.x de la extensión, con CKEditor 4, y las series 12.x y 13.x, con CKEditor 5. Quien eleve una instalación TYPO3 v10 o v11 con la extensión 10.x u 11.x a TYPO3 v12 debe cambiar al mismo tiempo a la serie 12.x de la extensión. La representación en base de datos de las imágenes inline se mantiene compatible, de modo que los artículos existentes funcionan sin migración de contenido.

En Gosign comprobamos antes de cada upgrade de TYPO3 si el YAML del RTE del proyecto debe adaptarse a la versión de la extensión y si existen ajustes propios de plugin o ViewHelpers sobrescritos. En muchos proyectos con TYPO3 v12 puede comprobarse además si bastan las imágenes como elementos de contenido propios y la extensión puede retirarse a medio plazo. Para redacciones que necesitan imágenes dentro del texto corrido, rte_ckeditor_image sigue siendo la opción más pragmática. La alternativa sería un botón de barra de imagen propio con un plugin CKEditor personalizado, lo que es claramente más costoso y deja el mantenimiento en manos del proyecto de forma permanente.