Clipboard.js
Integra la biblioteca Clipboard.js con Drupal, proporcionando funcionalidad de copiar al portapapeles para campos de texto.
clipboardjs
Instalar
composer require 'drupal/clipboardjs:^2.0'
Overview
El módulo Clipboard.js proporciona una integración perfecta de la popular biblioteca JavaScript Clipboard.js con Drupal. Esto permite a los constructores de sitios agregar funcionalidad moderna de copiar al portapapeles a cualquier campo basado en texto sin escribir código JavaScript.
El módulo ofrece múltiples estilos de visualización a través de field formatters, incluyendo un botón simple, campo de texto con botón de copiar, área de texto con botón de copiar y visualización de fragmento de código. Cada estilo puede personalizarse con diferentes opciones de retroalimentación de alerta (tooltip, alerta del navegador o ninguna) y etiquetas personalizadas.
Los desarrolladores también pueden usar las funciones de tema proporcionadas directamente en render arrays o formularios para crear elementos copiables programáticamente, lo que lo hace flexible para implementaciones personalizadas.
Features
- Proporciona cuatro field formatters distintos para la funcionalidad de copiar al portapapeles: estilos de Botón, Campo de texto, Área de texto y Fragmento
- Soporta tipos de campo email, link, string y string_long
- Retroalimentación de confirmación de copia configurable con modos de tooltip, alerta del navegador o silencioso
- Etiquetas personalizables de botón/hover y texto de alerta para soporte multilingüe
- Funciones de tema disponibles para uso programático en formularios y render arrays
- Comando Drush para descarga e instalación fácil de la biblioteca
- Estilizado CSS completo con animaciones de tooltip para retroalimentación visual
- Manejo elegante de errores con instrucciones alternativas para dispositivos que no soportan la API del portapapeles
Use Cases
Visualización de claves API
Muestra claves API o tokens con un botón de copiar usando el formatter de Fragmento. Los usuarios pueden copiar fácilmente la clave sin seleccionar manualmente el texto, reduciendo errores en las operaciones de copiar y pegar.
Compartir enlaces
Agrega funcionalidad de copiar a campos de URL o enlaces para permitir a los usuarios copiar rápidamente enlaces compartibles. Usa el formatter de Botón para una huella mínima o Campo de texto para visualización visible de URL.
Ejemplos de código
Muestra ejemplos de código o códigos de inserción con el formatter de Fragmento, proporcionando un bloque de código estilizado con funcionalidad de copiar con un clic para desarrolladores o editores de contenido.
Información de contacto
Agrega botones de copiar a campos de correo electrónico o números de teléfono, facilitando que los visitantes copien la información de contacto directamente a su portapapeles.
Elementos de formulario personalizados
Los desarrolladores pueden usar las funciones de tema directamente en formularios personalizados o render arrays para agregar elementos copiables en cualquier parte del sitio, como páginas de confirmación de pedidos con números de seguimiento.
Tips
- Usa el formatter de Fragmento para código o contenido técnico ya que proporciona renderizado estilizado pre/code
- El formatter de Botón es el más compacto y funciona bien en línea con otro contenido
- Personaliza la configuración alert_text para diferentes idiomas o contextos (ej., '¡Enlace copiado!' para campos de URL)
- Establece alert_style en 'none' si deseas copiado silencioso sin retroalimentación visual
- Las funciones de tema pueden usarse programáticamente: usa '#theme' => 'clipboardjs_button' con '#value' conteniendo el texto a copiar
Technical Details
Hooks 2
hook_theme
Define implementaciones de tema para todos los estilos de visualización del portapapeles. Proporciona theme hooks para formatos de botón, campo de texto, área de texto y fragmento con variables consistentes.
hook_library_info_alter
Altera las definiciones de biblioteca para soportar rutas alternativas de instalación de biblioteca. Detecta automáticamente si la biblioteca está instalada en 'clipboard.js' en lugar de 'clipboard' (nomenclatura de activos composer de Wikimedia).
Drush Commands 1
drush clipboardjs:download
Descarga e instala la biblioteca Clipboard.js en el directorio de bibliotecas. Usa wget o curl para descargar el archivo de la biblioteca desde GitHub y lo extrae.
Troubleshooting 3
Asegúrate de que la biblioteca Clipboard.js esté correctamente instalada. Usa 'drush clipboardjs:download' o instala vía Composer con 'composer require npm-asset/clipboard:^2.0.11'. La biblioteca debe estar en /libraries/clipboard/dist/clipboard.js o /libraries/clipboard.js/dist/clipboard.js.
Verifica que la configuración alert_style esté establecida en 'tooltip' en las configuraciones del field formatter. También verifica que el CSS se esté cargando correctamente buscando la biblioteca clipboardjs/drupal en el código fuente de la página.
iOS Safari tiene limitaciones con la API del Portapapeles HTML5. El módulo muestra un mensaje útil instruyendo a los usuarios a copiar manualmente en dispositivos no soportados.