如何实现clipboard.js？

Question

如何创建“复制”按钮来复制Drupal 8中的文本？

我在文件夹/libraries中下载了以下库：

https://github.com/zenorocha/clipboard.js

这是我的bootstrap_subtheme_front_office.info.yml文件：

name: Bootstrap Subtheme Front Office
type: theme
description: 'SASS starter kit for a Bootstrap Barrio SubTheme.'
# version: VERSION
core: 8.x
core_version_requirement: ^8 || ^9
base theme: bootstrap_barrio

libraries:
  - bootstrap_subtheme_front_office/bootstrap
  - bootstrap_subtheme_front_office/global-styling
  - bootstrap_subtheme_front_office/clipboardjs
libraries-override:
  bootstrap_barrio/global-styling: true
  bootstrap_barrio/file: true
regions:
  navigation_collapsible_first: 'Navigation (Collapsible first)'
  navigation_collapsible_left: 'Navigation (Collapsible left)'
  navigation: 'Navigation'
  navigation_collapsible_right: 'Navigation (Collapsible right)'
  navigation_collapsible_second: 'Navigation (Collapsible second)'
  breadcrumb: 'Breadcrumb'
  header: 'Top Bar'
  sidebar_first: 'Primary'
  highlighted: 'Highlighted'
  help: 'Help'
  content: 'Content'
  sidebar_second: 'Secondary'
  footer: 'Footer'

# Information added by Drupal.org packaging script on 2020-10-11
version: '5.0.2'
project: 'bootstrap_subtheme_front_office'
datestamp: 1602444143

我在这个文件bootstrap_subtheme_front_office.libraries.yml中声明了这个库：

bootstrap:
  js:
    /libraries/bootstrap/dist/js/bootstrap.bundle.min.js: {}
  css:
    component:
      /libraries/bootswatch/dist/flatly/bootstrap.min.css: {}
global-styling:
  version: VERSION
  js: 
    js/popper.min.js: {}
    js/bootstrap.min.js: {}
    js/barrio.js: {}
    js/custom.js: {}
    js/back-to-top.js: {}
  css:
    component:
      css/style.min.css: {}
  dependencies:
    - core/jquery
    - core/drupal
clipboardjs:
  version: VERSION
  js:
    /libraries/clipboard.js/dist/clipboard.min.js: {}

我创建了这个HTML代码：

<button class="btn" data-clipboard-text="Just because you can doesn't mean you should — clipboard.js">
  Copy to clipboard
</button>

我已经检查了我的页面的源代码，并加载了库：

当我点击按钮时，它不会“复制”。如何使这个库与Drupal 8一起工作？

https://clipboardjs.com/

有一个步骤，我不知道在Drupal做什么：

现在，您需要通过传递DOM选择器、HTML元素或HTML元素列表来实例化它。new ClipboardJS('.btn');

Answer 1

我建议你做以下几点：

1. 安装Clipboard.js Drupal模块并启用它。
2. 如果您在Composer中安装了它，则可以跳过此步骤。如果没有，请将clipboard.js文件定位在/libraries/clipboard.js/dist/clipboard.js。因为这是模块所期望的：https://git.drupalcode.org/project/clipboardjs/-/blob/2.0.0/clipboardjs.libraries.yml#L27
3. 现在，将hook_preprocess_page中的库附加到每个页面，或者通过Twig中的{{ attach_library('clipboardjs/clipboardjs') }}直接连接。
4. 现在有一个<a>，一个<input>，或者一个带有class="clipboardjs-button"的<button>。因为这就是模块启动库的方式：https://git.drupalcode.org/project/clipboardjs/-/blob/2.0.0/js/clipboard.js#L15。

你就完蛋了。您可以继续添加Clipboard.js-specific属性。