CKEditor 5 Paste Filter
Filtra el contenido pegado en CKEditor 5 mediante reglas configurables de búsqueda y reemplazo basadas en expresiones regulares.
ckeditor5_paste_filter
Instalar
composer require 'drupal/ckeditor5_paste_filter:^1.1'
Overview
CKEditor 5 Paste Filter te permite limpiar y sanear el contenido pegado en áreas de texto de CKEditor 5 utilizando un conjunto personalizable de filtros basados en expresiones regulares. Cada filtro consiste en un patrón de expresión regular de JavaScript y una cadena de reemplazo.
El caso de uso más común es la limpieza del marcado desordenado generado por fuentes de texto enriquecido como Microsoft Word y Google Docs. Aunque el CKEditor 5 del núcleo de Drupal incluye alguna funcionalidad de limpieza al pegar, no proporciona las capacidades de filtrado completas que estaban disponibles en la función 'Pegar desde Word' de CKEditor 4. Este módulo llena ese vacío proporcionando filtrado de contenido configurable basado en regex.
Este módulo es el sucesor para CKEditor 5 del módulo CKEditor Paste Filter. Se ha creado como un proyecto separado para permitir que los sitios en transición de CKEditor 4 a CKEditor 5 puedan tener ambos módulos instalados simultáneamente durante el proceso de migración.
Features
- Filtra el contenido pegado en CKEditor 5 usando expresiones regulares de JavaScript con soporte completo de regex (flags global, ignoreCase, multiline, dotAll y unicode)
- Viene preconfigurado con 13 filtros predeterminados optimizados para limpiar contenido de Microsoft Word y Google Docs
- Elimina el marcado específico de Office no deseado, incluyendo etiquetas <o:p>, atributos style, atributos class, atributos face y atributos valign
- Elimina etiquetas font y span innecesarias mientras preserva el formato significativo
- Elimina elementos de párrafo, negrita y cursiva vacíos
- Limpia las etiquetas anchor OLE_LINK insertadas por Microsoft Office
- Configuración de filtros completamente personalizable: agregar, editar, eliminar, habilitar/deshabilitar y reordenar filtros mediante arrastrar y soltar
- Las cadenas de reemplazo soportan referencias a grupos de captura ($1, $2, etc.) de la expresión de búsqueda
- Configurable por formato de texto - diferentes formatos pueden tener diferentes reglas de filtrado al pegar
- Manejo elegante de errores para expresiones regulares inválidas con registro de errores en consola
Use Cases
Limpiar contenido pegado desde Microsoft Word
Cuando los editores de contenido copian y pegan texto de documentos de Microsoft Word, el contenido pegado típicamente incluye marcado excesivo como estilos en línea, etiquetas XML específicas de Office (<o:p>), etiquetas font y span, atributos class y otro formato que ensucia el HTML. Los filtros predeterminados eliminan estos elementos, preservando solo el marcado semántico como párrafos, negrita, cursiva y enlaces.
Limpiar contenido pegado desde Google Docs
Similar a Word, Google Docs genera etiquetas span innecesarias, atributos style y nombres de clase cuando se copia contenido. El filtro de pegado elimina estos mientras mantiene la estructura semántica del documento.
Transformaciones de contenido personalizadas al pegar
Más allá de la limpieza, el sistema basado en regex puede usarse para transformaciones personalizadas. Por ejemplo, convertir automáticamente ciertos patrones de texto, corregir problemas de formato comunes o estandarizar el marcado según los requisitos específicos del sitio.
Aplicar HTML limpio en áreas de texto
Las organizaciones con estándares de contenido estrictos pueden configurar filtros para asegurar que todo el contenido pegado cumpla con sus requisitos de limpieza de HTML, evitando que estilos en línea y atributos innecesarios entren en la base de datos de contenido.
Migración desde CKEditor 4
Los sitios que dependían de la funcionalidad 'Pegar desde Word' de CKEditor 4 pueden usar este módulo para replicar y personalizar ese comportamiento en CKEditor 5, haciendo la transición más suave para los editores de contenido acostumbrados a las funciones de limpieza.
Tips
- Usa la consola del navegador para probar expresiones regulares antes de agregarlas a la configuración. El constructor RegExp de JavaScript usa la misma sintaxis.
- La cadena de reemplazo puede referenciar grupos de captura del patrón de búsqueda usando $1, $2, etc. Esto es útil para preservar partes del contenido coincidente mientras se modifica el marcado circundante.
- Los filtros se ejecutan en orden de peso, por lo que las operaciones de limpieza complejas pueden dividirse en múltiples filtros secuenciales para mejor mantenibilidad.
- Para eliminar todos los filtros predeterminados y empezar de nuevo, simplemente vacía el campo de expresión de búsqueda para cada fila y guarda - las filas vacías se eliminan automáticamente.
- Al depurar, deshabilita temporalmente los filtros uno por uno para identificar cuál está causando el comportamiento inesperado.
- Los caracteres especiales en patrones regex que necesitan escape incluyen: \ . + * ? ^ $ { } [ ] ( ) | / - Usa barra invertida antes de cada uno.
- El flag 'g' (global) se aplica automáticamente, por lo que todas las coincidencias en el contenido pegado son reemplazadas, no solo la primera ocurrencia.
Technical Details
Admin Pages 1
/admin/config/content/formats/manage/{format_name}
Configura el plugin CKEditor 5 Paste Filter dentro de la configuración de CKEditor 5 de un formato de texto. La configuración del filtro de pegado aparece como una pestaña vertical bajo 'Configuración de plugins de CKEditor 5' cuando CKEditor 5 está seleccionado como editor de texto.
Troubleshooting 5
Asegúrate de que la casilla 'Filtrar contenido pegado' esté habilitada en la configuración del formato de texto. También verifica que los filtros individuales en la tabla tengan su casilla 'Habilitado' marcada.
Verifica la sintaxis de la expresión de búsqueda. Recuerda que los caracteres especiales de regex (como las barras diagonales) deben escaparse con barra invertida. El mensaje de error identificará qué expresión de búsqueda es inválida.
Verifica los valores de peso para cada filtro. Los filtros con pesos menores se ejecutan primero. Usa los manejadores de arrastrar y soltar o ajusta los valores de peso para controlar el orden de ejecución.
Asegúrate de que tanto la expresión de búsqueda como los campos de reemplazo estén completados apropiadamente. Las filas con expresiones de búsqueda vacías se eliminan automáticamente al guardar.
Agrega filtros personalizados para apuntar a los patrones no deseados específicos. Usa las herramientas de desarrollo del navegador para inspeccionar el HTML pegado y crear patrones regex apropiados. Considera que parte del marcado puede ser agregado por el propio CKEditor 5 después del filtrado.
Security Notes 2
- Las expresiones regulares se ejecutan en el contexto JavaScript del navegador sobre el contenido pegado. Aunque esto opera sobre contenido que se está editando en lugar de mostrando, se debe tener cuidado con patrones configurables por usuarios en entornos multiusuario.
- Este módulo tiene cobertura de seguridad del Drupal Security Team, lo que indica que ha sido revisado siguiendo las mejores prácticas de seguridad.