Clipboard.js

Overview

The Clipboard.js module provides integration with the clipboard.js library, which allows non-flash based clipboard copying using the HTML5 Clipboard API.

Drupal 8

The Drupal 8 version of the module provides a field formatter for email, link, string and string_long fields.

Available are the Clipboard.js Button, the Clipboard.js Snippet, the Clipboard.js Textarea and the well-known Clipboard.js Textfield formatter.

Manual or developer usage like described for the Drupal 7 version is still possible, just slightly changed:

    $form['copy_this'] = [
      '#theme' => 'clipboardjs_textfield',
      '#title' => $this->t('Clipboard.js Textfield'),
      '#value' => 'Any copyable value.',
      '#label' => $this->t('Click to copy'),
      '#alert_style' => 'tooltip', // e.g., 'tooltip', 'alert' or 'none'
      '#alert_text' => $this->t('Copied!'),
    ];

Requirements

• clipboard.js library
• ext-zip

Installation
It is assumed you are installing Drupal through Composer using the Drupal
Composer facade. See https://www.drupal.org/docs/develop/using-composer/using-composer-to-man...

composer require wikimedia/composer-merge-plugin
composer require oomphinc/composer-installers-extender

Add the following to your composer.json file under "extra"

"merge-plugin": {
    "include": [
        "web/modules/contrib/clipboardjs/composer.libraries.json"
    ]
}

Then run

composer require drupal/clipboardjs

Drupal 7

Requirements

• clipboard.js library
• Libraries 2.x
• jQuery Update (jQuery >= 1.7)

Usage

The Clipboard.js can be added to any text field by visiting the manage display
page for the entity and and choosing Clipboard.js as the field formatter.

Custom text fields can also use clipboard.js using the form api or in a render
array. Just use the theme function to build the render array:

function example_form($form, $form_state) {
  $form = array();

  // Load clipboard.js library.
  libraries_load('clipboard');

  // Build the form or render element using the theme function.
  $form['copy_this'] = theme('clipboardjs', array(
    'text' => t('This is the text to be copied...'),
    'alert_style' => 'tooltip',
    'alert_text' => 'Copy was successful!',
    'button_label' => 'Click to Copy',
  ));

  return $form;
}

Logo icon by Solar Icons in CC Attribution License via SVG Repo