Component that adds clipboard.js library to a view or block.

clipboard Mantra component

This component integrates cliboard.js library developed by Zeno Rocha under MIT license. Thanks Zeno!

You can use it to enable copy to clipboard functionality to your Mantra views or blocks.

This component needs jQuery library to work.

Adding clipboard to your views

Two js files should be added to your view or block to enable this clipboard function:

• clipboard.clipboard.min: this is the core of clipboard.js library.

• clipboard.clipboardMain: this is a simple script to indicate "Copied!" message to the text copied you can modify or use your own version.

To add those two js files, you have two options:

• As a property of your view:

yourview_js: ["clipboard.clipboard.min","clipboard.clipboardMain"],
yourview: async (req,res) => {
   // ...
}

• Explicity with Mantra.AddJs API:

yourview: async (req,res) => {
   const Mantra = res.MantraAPI;
   Mantra.AddJs( "clipboard.clipboard.min","clipboard.clipboardMain" );

   // ...
}

Enabling a HTML element to be copied to clipboard

clipboard.js library expects to find the attribute "data-clipboard-target" indicating the ID of the element to copy its content to the clipboard.

The element to trigger the copy of the text to the clipboard, should be have "copybutton" class, like in this example using some Bootstrap and Fontawesome classes:

<div class="input-group mb-3">
    <div class="input-group-prepend">
    <button data-clipboard-target="#texttocopy" class="copybutton btn btn-outline-secondary" type="button"><i class="fa fa-copy"></i></button>
    </div>
    <a type="text" class="form-control userlicense text-center"><span id="texttocopy">Your text to be copied</span></a>
</div>