Clipboard.js
Integrates the Clipboard.js library with Drupal, providing copy-to-clipboard functionality for text fields.
clipboardjs
Install
composer require 'drupal/clipboardjs:^2.0'
Overview
The Clipboard.js module provides seamless integration of the popular Clipboard.js JavaScript library with Drupal. This enables site builders to add modern copy-to-clipboard functionality to any text-based field without writing any JavaScript code.
The module offers multiple display styles through field formatters, including a simple button, textfield with copy button, textarea with copy button, and code snippet display. Each style can be customized with different alert feedback options (tooltip, browser alert, or none) and custom labels.
Developers can also use the provided theme functions directly in render arrays or forms to create copyable elements programmatically, making it flexible for custom implementations.
Features
- Provides four distinct field formatters for copy-to-clipboard functionality: Button, Textfield, Textarea, and Snippet styles
- Supports email, link, string, and string_long field types
- Configurable copy confirmation feedback with tooltip, browser alert, or silent modes
- Customizable button/hover labels and alert text for multilingual support
- Theme functions available for programmatic use in forms and render arrays
- Drush command for easy library download and installation
- Full CSS styling with tooltip animations for visual feedback
- Graceful error handling with fallback instructions for devices that don't support clipboard API
Use Cases
API Key Display
Display API keys or tokens with a copy button using the Snippet formatter. Users can easily copy the key without manually selecting the text, reducing errors in copy-paste operations.
Share Links
Add copy functionality to URL or link fields to allow users to quickly copy shareable links. Use the Button formatter for a minimal footprint or Textfield for visible URL display.
Code Examples
Display code examples or embed codes with the Snippet formatter, providing a styled code block with one-click copy functionality for developers or content editors.
Contact Information
Add copy buttons to email fields or phone number fields, making it easy for visitors to copy contact information directly to their clipboard.
Custom Form Elements
Developers can use the theme functions directly in custom forms or render arrays to add copyable elements anywhere in the site, such as order confirmation pages with tracking numbers.
Tips
- Use the Snippet formatter for code or technical content as it provides styled pre/code rendering
- The Button formatter is most compact and works well inline with other content
- Customize the alert_text setting for different languages or contexts (e.g., 'Link copied!' for URL fields)
- Set alert_style to 'none' if you want silent copying without visual feedback
- The theme functions can be used programmatically: use '#theme' => 'clipboardjs_button' with '#value' containing the text to copy
Technical Details
Hooks 2
hook_theme
Defines theme implementations for all clipboard display styles. Provides theme hooks for button, textfield, textarea, and snippet formats with consistent variables.
hook_library_info_alter
Alters library definitions to support alternative library installation paths. Automatically detects if the library is installed at 'clipboard.js' instead of 'clipboard' (Wikimedia composer asset naming).
Drush Commands 1
drush clipboardjs:download
Downloads and installs the Clipboard.js library to the libraries directory. Uses wget or curl to download the library archive from GitHub and extracts it.
Troubleshooting 3
Ensure the Clipboard.js library is properly installed. Use 'drush clipboardjs:download' or install via Composer with 'composer require npm-asset/clipboard:^2.0.11'. The library should be at /libraries/clipboard/dist/clipboard.js or /libraries/clipboard.js/dist/clipboard.js.
Check that the alert_style setting is set to 'tooltip' in the field formatter settings. Also verify that CSS is loading correctly by checking for clipboardjs/drupal library in the page source.
iOS Safari has limitations with the HTML5 Clipboard API. The module displays a helpful message instructing users to copy manually on unsupported devices.