Я использовал некоторые отличные библиотеки буфера обмена, однако обнаружил, что иногда большинство вещей, которые мне нужны, были чем-то простым, я заметил это, увидев работу других разработчиков, которые вместо использования библиотеки использовали основы, которые API для браузеры предоставляют document.execDocument() (хотя и считаются устаревшими).
Я понял, что большая проблема (по крайней мере, для меня) заключается в том, что, хотя библиотеки небольшие и используют сжатие Gzip, на серверах, отключенных для этой функции, это в конечном итоге должно было весить в среднем ~ 2 КБ, в конечном итоге стало ~ 10 КБ. (я имею в виду отдельные библиотеки), я прекрасно понимаю, что есть стратегии сжатия и минификации (которые я всегда использую) и даже некоторая функция «ленивой загрузки», но в этом процессе мне нужно было что-то легкое, не зависящее от большого планирования.
Признаюсь, в начале я не думал о том, чтобы поделиться прототипом библиотеки, но это было достаточно интересно, при использовании на серверах с включенным GZip, библиотека получала ~ 1,2 КБ, при отключенном GZip она получала ~ 2,5 КБ, то есть , то есть минимальная разница (~1 КБ).
Я работаю над тем, чтобы библиотека в будущем использовала ClipboardAPI, сохраняя при этом обратную совместимость со старыми браузерами.
Настроить
Вы можете использовать CDN (jsdelivr) и разместить прямо на своей странице:
<script src="https://cdn.jsdelivr.net/npm/[email protected]/simple-copy.min.js"></script>Можно скачать из источника: https://github.com/brcontainer/simple-copy.js/blob/0.5.2/simple-copy.min.js
Также можно установить с помощью npm:
npm i simple-copy.jsИ используйте с require():
const SimpleCopy = require('simple-copy.js');Или используйте с модулями ECMAScript:
import SimpleCopy from 'simple-copy.js'использование
Копирование содержимого из элемента с помощью селектора:
SimpleCopy.copy("<selector>");Копирование текста из элемента с помощью селектора:
SimpleCopy.copy("<selector>", { "text": true });Копирование всего элемента с помощью селектора:
SimpleCopy.copy("<selector>", { "node": true });Копирование содержимого из элемента с помощью селектора:
var element = document.querySelector(".foobar");SimpleCopy.copy(element);
Копирование текста из элемента с помощью селектора:
var element = document.getElementById("idelement");SimpleCopy.copy(element, { "text": true });
Копирование всего элемента:
var element = document.getElementsByClassName("<class>");SimpleCopy.copy(element[0], { "node": true });
Выберите текст в элементе с помощью селектора:
SimpleCopy.select("<selector>");Выберите содержимое в элементе:
var element = document.querySelector(".foobar");SimpleCopy.select(element);
Выбрать весь узел:
var element = document.querySelector(".foobar");SimpleCopy.select(element, { "node": true });
Установить текст в буфер обмена:
SimpleCopy.data("Hello, world!");Скопируйте содержимое из элемента, определенного в атрибутах данных:
<button data-simplecopy-target="<selector>">Copy</button>Скопируйте весь элемент, определенный в атрибутах данных:
<button data-simplecopy-target="<selector>" data-simplecopy-node="true">Copy</button>Выберите содержимое из элемента, определенного в атрибутах данных:
<button data-simplecopy-target="<selector>" data-simplecopy-select="true">Select text</button>Скопируйте html-контент без формата:
<button data-simplecopy-target="<selector>" data-simplecopy-text="true">Copy</button>Установить текст в буфер обмена по атрибуту данных:
<button data-simplecopy-data="Hello, world!">Copy text</button>