Plugin CKEditor Media Embed
Añade el plugin Media Embed de CKEditor 5 a Drupal, permitiendo a los autores de contenido incrustar medios de proveedores externos como YouTube, Vimeo, Twitter y más de 1700 otras fuentes de contenido.
ckeditor_media_embed
Instalar
composer require 'drupal/ckeditor_media_embed:^2.0'
composer require 'drupal/ckeditor_media_embed:8.x-1.14'
Overview
El módulo CKEditor Media Embed integra el plugin Media Embed de CKEditor 5 con la implementación de CKEditor en Drupal, permitiendo a los autores de contenido incrustar contenido multimedia enriquecido de proveedores externos directamente en su contenido utilizando el editor WYSIWYG.
El módulo utiliza el protocolo oEmbed para obtener códigos de incrustación de proveedores configurables. Por defecto, utiliza el servicio proxy Iframely que soporta más de 1715 proveedores de contenido incluyendo YouTube, Vimeo, Twitter, Instagram, Imgur, GitHub, Google Maps y muchos más. También se pueden configurar proveedores alternativos como Noembed o embed.ly.
El módulo almacena etiquetas <oembed> en la base de datos en lugar del HTML de incrustación completo, y utiliza un filtro de texto para transformar estas etiquetas en HTML de incrustación real durante el renderizado. Este enfoque garantiza una mejor portabilidad y permite que el código de incrustación se mantenga actualizado incluso si los proveedores actualizan su formato de incrustación.
Además, el módulo proporciona un formateador de campo que permite que los campos Link se rendericen como incrustaciones de medios oEmbed, habilitando la incrustación de medios fuera de los campos de texto.
Features
- Botón de barra de herramientas Media Embed de CKEditor 5 para insertar medios desde URLs
- Soporte para más de 1700 proveedores de contenido a través de servicios proxy oEmbed configurables (Iframely, Noembed, embed.ly, etc.)
- Filtro de texto que convierte etiquetas <oembed> a HTML de medios incrustados al renderizar
- Formateador de campo Link para mostrar campos Link como medios incrustados utilizando el proveedor oEmbed configurado
- Comandos Drush para instalar y actualizar los archivos del plugin CKEditor requeridos
- Mejora automática de accesibilidad añadiendo atributos title a los iframes incrustados
- URL de proveedor configurable con sustitución de tokens {url} y {callback}
- Seguimiento de versiones e informes de estado para los plugins CKEditor instalados
Use Cases
Incrustar videos de YouTube en el contenido
Los editores de contenido pueden pegar una URL de YouTube en CKEditor y usar el botón Media Embed para convertirla en un reproductor de video incrustado. El video se mostrará directamente en el contenido sin requerir que los usuarios abandonen el sitio.
Incrustar publicaciones de redes sociales
Los tweets de Twitter, publicaciones de Instagram y otro contenido de redes sociales pueden incrustarse pegando sus URLs y usando la función Media Embed. Esto permite la integración de contenido social enriquecido mientras se mantiene el formato e interactividad originales.
Crear una galería de videos con campos Link
Cree un tipo de contenido con un campo Link de múltiples valores y use el formateador 'Elemento Oembed usando el proveedor CKEditor Media Embed'. Esto permite crear galerías de video estructuradas donde cada enlace se renderiza automáticamente como un reproductor de video incrustado.
Incrustar fragmentos de código desde GitHub Gists
Los desarrolladores pueden incrustar GitHub Gists pegando la URL del Gist y usando Media Embed. El fragmento de código se mostrará con el resaltado de sintaxis apropiado directamente en el contenido.
Incrustar mapas interactivos
Las URLs de Google Maps y otros servicios de mapas pueden incrustarse para mostrar mapas interactivos dentro del contenido, útil para contenido basado en ubicación, páginas de eventos o información de contacto.
Tips
- Use un servicio proxy como Iframely o Noembed en lugar de URLs de proveedores directos para soportar la mayor variedad de fuentes de medios con una sola configuración.
- Siempre habilite el filtro 'Convertir etiquetas Oembed a incrustaciones de medios' en cualquier formato de texto que use el botón Media Embed, de lo contrario las incrustaciones no se renderizarán.
- El módulo almacena etiquetas <oembed> en lugar de HTML, por lo que si cambia proveedores o configuraciones de proveedores, las incrustaciones existentes usarán automáticamente la nueva configuración.
- Para personalizar el tema de las incrustaciones, implemente hook_ckeditor_media_embed_object_alter() para modificar el contenedor HTML de la incrustación o añadir clases personalizadas.
- Después de actualizar Drupal core, ejecute 'drush ckeditor_media_embed:update' para asegurar la compatibilidad del plugin con la nueva versión de CKEditor.
- Puede anular la versión de CKEditor usada para descargar plugins estableciendo el valor de configuración ckeditor_version usando 'drush config-edit ckeditor_media_embed.settings'.
Technical Details
Admin Pages 1
/admin/config/media/ckeditor-media-embed/settings
Configura la URL del proveedor oEmbed utilizada por el plugin CKEditor Media Embed para obtener códigos de incrustación para recursos multimedia.
Hooks 1
hook_ckeditor_media_embed_object_alter
Permite a los módulos alterar el objeto oEmbed antes de que sea renderizado. El propio módulo implementa este hook para añadir atributos title a los iframes para accesibilidad.
Drush Commands 2
drush ckeditor_media_embed:install
Descarga e instala los archivos requeridos del plugin CKEditor Media Embed desde el registro NPM al directorio libraries.
drush ckeditor_media_embed:update
Actualiza los archivos del plugin CKEditor Media Embed para coincidir con la versión de CKEditor instalada con Drupal core.
Troubleshooting 5
Asegúrese de que los plugins de CKEditor estén instalados ejecutando 'drush ckeditor_media_embed:install'. Verifique el informe de estado en /admin/reports/status para cualquier error de plugin faltante.
Habilite el filtro 'Convertir etiquetas Oembed a incrustaciones de medios' en el formato de texto que se está utilizando. Vaya a Administración > Configuración > Autoría de contenido > Formatos de texto y editores, edite el formato y marque la casilla del filtro.
Los plugins instalados tienen una versión diferente a CKEditor core. Ejecute 'drush ckeditor_media_embed:update' para actualizar los plugins a la versión de CKEditor core.
El proveedor oEmbed configurado puede no soportar esa fuente de contenido. Considere cambiar a un proveedor como Iframely que soporta más proveedores de contenido, o consulte la documentación del proveedor para conocer las fuentes soportadas.
El endpoint predeterminado de Iframely usa HTTP. Para soporte HTTPS, cree una cuenta de Iframely y actualice la URL del proveedor en la configuración del módulo para usar su clave API con HTTPS.
Security Notes 3
- El contenido incrustado se renderiza desde fuentes de terceros, así que asegúrese de confiar en el proveedor oEmbed configurado.
- El módulo añade atributos title a los iframes incrustados para cumplir con los requisitos de accesibilidad.
- Considere las implicaciones de seguridad de permitir que usuarios no confiables incrusten contenido externo, ya que esto podría potencialmente usarse para phishing o contenido malicioso.