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 recorte, escalado, texto alternativo, copyright, destino de enlace y, sobre todo, salida srcset. 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, el recorte 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 recorte, zoom y altura. En el renderizado, un pre-processor sustituye la etiqueta marcadora por una llamada completa al ViewHelper Image, que genera srcset, variantes webp y atributos de lazy loading. Los anchos de imagen disponibles se definen por YAML en la configuración del RTE. Una configuración típica de revista trabaja con entre tres y cinco anchos (480, 768, 1024, 1440, 2048) y genera automáticamente un srcset responsive que en dispositivos móviles solo carga la variante más pequeña.

El recorte utiliza la herramienta de cropping del núcleo TYPO3: en el diálogo de imagen aparece el editor de recorte del backend, con los mismos presets de variantes que en el elemento de contenido Image regular. El recorte se guarda por instancia de imagen, de modo que la misma imagen FAL puede recortarse de forma distinta en diferentes artículos. Eso es especialmente importante cuando una imagen se usa tanto en el teaser de revista (cuadrada) como en el texto corrido (apaisada), 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 srcset si el YAML del RTE no contiene una definición de anchos de imagen. Muchas instalaciones han copiado el YAML del núcleo TYPO3 y en el proceso han omitido la sección “proc.entryHTMLparser_db.allowedAttribs” o “config.additionalAttributes”. La solución es un YAML completo con anchos srcset definidos explícitamente.

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 10.x y 11.x de rte_ckeditor_image están portadas a CKEditor 5 y funcionan en v12 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 las versiones 9.x (CKEditor 4) y 10.x/11.x (CKEditor 5) de la extensión. Quien eleve una instalación TYPO3 v10 o v11 con la extensión 9.x a TYPO3 v12 debe cambiar al mismo tiempo a la serie 10.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 las funciones nativas de imagen de CKEditor 5 son suficientes y la extensión puede retirarse a medio plazo. Para redacciones con necesidad de recorte y srcset, 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.