Clipboard

The clipboard components provide access to the clipboard.

Note that the paste function requires that the user gives permission to the system to use paste. This does not work on Firefox - this is a fundamental limitation of the browser, not a flaw in our implementation.

copy-me

Add the class "copy-me" to an element to make it easy to copy the element. A copy icon will be shown when the user hovers over the area.

<div class="copy-me">
<p>Something to be copied.</p>
</div>

Would give

Something to be copied.

copy-target

Add the class "copy-target" to a button to copy the element identified by data-target.

<p>
<button type="button" class="btn btn-default copy-target" data-target="#thing">
Copy thing
</button>
</p>
<p id="thing">123-456-789</p>

Would give

123-456-789

paste-submit

Add the class "paste-submit" to a submit button on the form to copy the clipboard to a generated field with the name "paste" which holds the clipboard content.

The form should be submitted after retrieving the clipboard. Do not use "paste-submit" with "submit-multiple", because "submit-multiple" leaves the form on the page.

The clipboard content will be a JSON string object, where the properties are content types and the values are the values.

In most cases, the clipboard will contain html and plain text versions of the clipboard.

{
"text/html": "<div class=\"\"><p>Line 1</p>\n<p>Line 2</p></div>",
"text/plain": "Line 1\nLine 2"
}

If an image has been pasted, a base64 representation of the image is returned.

{
"image/png": ".. base64 representation of image .."
}