Слияние кода завершено, страница обновится автоматически
ВНИМАНИЕ
В этой ветке master находится кодовая база версии v2.x ZeroClipboard! Для кодовой базы версии v1.x, смотрите ветку 1.x-master.
Библиотека ZeroClipboard предоставляет простой способ скопировать текст в буфер обмена с помощью невидимого фильма Adobe Flash и интерфейса JavaScript. «Zero» означает, что библиотека невидима, а пользовательский интерфейс полностью остаётся на ваше усмотрение.
Это достигается путём автоматического размещения невидимого фильма поверх элемента DOM по вашему выбору. Стандартные события мыши даже распространяются на ваш элемент DOM, так что вы всё ещё можете иметь эффекты при наведении курсора и нажатии кнопки мыши.
Из-за ограничений безопасности браузера и Flash эта инъекция в буфер обмена может произойти только тогда, когда пользователь щёлкает по невидимому фильму Flash. Имитированное событие click из JavaScript не подойдёт, поскольку это позволит включить отравление буфера обмена (clipboard poisoning).
copy
Если обработчик события copy намеревается изменить ожидаемые данные для инъекции в буфер обмена, он должен работать синхронно, чтобы сохранить временно повышенные разрешения, предоставленные событием click пользователя. Наиболее распространённая проблема этого ограничения заключается в том, что кто-то хочет сделать асинхронный XMLHttpRequest в ответ на событие copy, чтобы получить данные для внедрения — это не сработает. Вы должны сделать его синхронным XMLHttpRequest или выполнить работу заранее до того, как будет запущено событие copy.
См. разделы Поддержка и Известные проблемы, связанные с конкретным браузером ниже.
См. раздел Рассмотрение ОС ниже.
См. раздел sandboxed iframe Ограничения ниже.
См. разделы Межпротокольные ограничения и file:// Протокольные ограничения ниже.
npm install zeroclipboard
bower install zeroclipboard
spm install zeroclipboard
component install zeroclipboard/zeroclipboard
Для любых пользователей PHP Composer ZeroClipboard также доступен на Packagist.
Для всех пользователей Rails доступен Ruby Gem zeroclipboard-rails, который позволяет автоматически добавлять ZeroClipboard в конвейер активов Rails.
Если вы хотите использовать ZeroClipboard, размещённый через CDN (сеть доставки контента), вы можете попробовать:
— cdnjs: http://cdnjs.com/libraries/zeroclipboard;
— jsDelivr: http://www.jsdelivr.com/#!zeroclipboard.
Чтобы использовать библиотеку, просто включите следующий файл JavaScript на своей странице:
<script type="text/javascript" src="ZeroClipboard.js"></script>
Вам также необходимо иметь файл "ZeroClipboard.swf" доступным для... Использование библиотеки ZeroClipboard
Браузер Если этот файл расположен в том же каталоге, что и ваши файлы ZeroClipboard.js, то он будет работать «из коробки». Однако если SWF-файл размещён в другом месте, вам необходимо установить URL следующим образом (поместите этот код после тега script):
ZeroClipboard.config( { swfPath: "http://YOURSERVER/path/ZeroClipboard.swf" } );
Использование минифицированной библиотеки Если вы собираетесь использовать минифицированную версию ZeroClipboard, вы, вероятно, также захотите сделать одну из следующих двух вещей:
//# sourceMappingURL=. Удаление этой строки предотвратит запрос файла инструментами разработки браузеров.Сообщения об ошибках SourceMap
SourceMap не обязателен для нормальной работы и обычно не запрашивается браузером, если инструменты разработки не открыты. Если вы не включаете SourceMap в свой размещённый каталог [или удаляете комментарий sourceMappingURL], то вы можете увидеть различные запутанные предупреждения в консоли JavaScript инструментов разработки вашего браузера:
[Error] Failed to load resource: the server responded with a status of 404 (Not Found) (ZeroClipboard.min.map, line 0)
http://YOURSERVER/path/ZeroClipboard.min.js is being assigned a //# sourceMappingURL, but already has one
ZeroClipboard.min.map 404 (Не найден)
Теперь вы готовы создать один или несколько клиентов. Клиент — это единственный экземпляр библиотеки буфера обмена на странице, связанный с одним или несколькими элементами DOM. Вот как создать экземпляр клиента:
var client = new ZeroClipboard();
Также можно включить элемент или массив элементов в новый клиент. Этот пример использует jQuery для поиска «кнопок копирования».
var client = new ZeroClipboard($(".copy-button"));
Для получения полной документации по API см. api/ZeroClipboard.md. Полный набор параметров конфигурации также задокументирован там.
Для разработчиков, которые хотят обернуть ZeroClipboard в сторонний плагин (например, jquery.zeroclipboard), см. документацию api/ZeroClipboard.Core.md вместо этого.
Установка текста буфера обмена может быть выполнена различными способами:
Добавьте обработчик событий copy, в котором вы вызываете event.clipboardData.setData, чтобы установить соответствующие данные. Это событие запускается каждый раз, когда ZeroClipboard пытается вставить данные в буфер обмена. Пример:
client.on( "copy", function (event) {
var clipboard = event.clipboardData;
clipboard.setData( "text/plain", "Copy me!" );
clipboard.setData( "text/html", "<b>Copy me!</b>" );
clipboard.setData( "application/rtf", "{\\rtf1\\ansi\n{\\b Copy me!}}" );
});
Установите сегменты буфера обмена «text/plain» [и обычно «text/html»] через атрибут data-clipboard-target на кнопке. ZeroClipboard будет искать целевой элемент по ID и пытаться получить значение HTML через .value, .outerHTML или .innerHTML, а текстовое значение через .value, .textContent или .innerText. Если значения HTML и текста для целевого элемента совпадают, значение будет помещено только в сегмент буфера обмена «text/plain» (т. е. сегмент «text/html» будет очищен).
<button id="my-button_text" data-clipboard-target="clipboard_text">Copy to Clipboard</button>
<button id="my-client_textarea" data-clipboard-target="clipboard_textarea">Copy to Clipboard</button>
<button id="my-button_pre" data-clipboard-target="clipboard_pre">Copy to Clipboard</button>
<input type="text" id="clipboard_text" value="Clipboard ### Текст
3. Установите сегмент «text/plain» буфера обмена с помощью атрибута data-clipboard-text на кнопке. Это позволит ZeroClipboard позаботиться обо всём остальном.
```html
<button id="my-button" data-clipboard-text="Скопируйте меня!">Скопировать в буфер обмена</button>
ZeroClipboard.setData( "text/plain", "Скопируйте меня!" );
Важным предостережением использования ZeroClipboard.setData является то, что заданные данные временны и будут использоваться только для одной операции копирования. Поэтому мы не рекомендуем использовать ZeroClipboard.setData (и его аналоги) иначе, чем внутри обработчика событий copy, хотя API не помешает вам использовать их другими способами.
client.setText( "Скопируйте меня!" );
Важным предостережением использования client.setData (и его аналогов) является то, что заданные данные временны и будут использоваться только для одной операции копирования. Поэтому мы не рекомендуем использовать client.setData (и его аналоги) иначе, чем внутри обработчика событий copy, хотя API не помешает вам использовать их другими способами.
Копирование относится к процессу «связывания» Flash-фильма с элементом DOM на странице. Поскольку Flash-фильм полностью прозрачен, пользователь не видит ничего необычного.
Flash-фильм получает событие клика и копирует текст в буфер обмена. Кроме того, такие действия мыши, как наведение курсора и mousedown, генерируют события, которые вы можете перехватить (см. раздел «Обработчики событий» ниже).
Чтобы скопировать элементы, необходимо передать элемент или массив элементов функции clip.
Вот как можно скопировать экземпляр вашей клиентской библиотеки в элемент DOM:
client.clip( document.getElementById("d_clip_button") );
Вы можете передать ссылку на сам объект элемента DOM или массив объектов DOM. Всё остальное происходит автоматически: фильм создаётся, все ваши параметры устанавливаются, и он плавает над элементом, ожидая щелчков пользователя.
<button id="my-button" data-clipboard-text="Copy me!" title="Нажмите, чтобы скопировать в буфер обмена.">Копировать в буфер обмена</button>
И код:
var client = new ZeroClipboard( $("button#my-button") );
Поскольку Flash-фильм плавает поверх вашего элемента DOM, он будет получать все события мыши до того, как браузер сможет их перехватить. Однако для удобства эти события передаются вашему клиенту буфера обмена, который вы можете зафиксировать (см. «Обработчики событий» ниже), если свойство конфигурации bubbleEvents остаётся установленным в true. Помимо этого, ZeroClipboard также может управлять классами CSS на обрезанном элементе, которые имитируют псевдоклассы CSS ":hover" и ":active" в вашем элементе DOM. Это позволяет вашим элементам вести себя нормально, даже если плавающий флэш-ролик является первым объектом, получающим все события мыши во время фазы всплытия событий. Эти имена «псевдо-псевдоклассов» можно настроить с помощью свойств конфигурации hoverClass и activeClass.
Пример CSS, нацеленный на элемент DOM с классом "clip_button":
.clip_button {
width: 150px;
text-align: center;
border: 1px solid black;
background-color: #ccc;
margin: 10px;
padding: 10px;
}
.clip_button.zeroclipboard-is-hover { background-color: #eee; }
.clip_button.zeroclipboard-is-active { background-color: #aaa; }
Ниже приведены полные рабочие примеры использования клиентской библиотеки буфера обмена в HTML-страницах.
Вот быстрый пример с использованием минимального количества вызовов:
<html>
<body>
<div id="d_clip_button" class="clip_button" data-clipboard-text="Copy Me!" title="Click to copy." style="border:1px solid black; padding:20px;">Copy To Clipboard</div>
<script type="text/javascript" src="ZeroClipboard.js"></script>
<script type="text/javascript">
var client = new ZeroClipboard( document.getElementById('d_clip_button') );
</script>
</body>
</html>
При нажатии текст «Copy me!» будет скопирован в буфер обмена.
Вот более полный пример, который использует многие параметры конфигурации и обработчики событий:
<html>
<head>
<style type="text/css">
.clip_button {
text-align: center;
border: 1px solid black;
background-color: #ccc;
margin: 10px;
padding: 10px;
}
.clip_button.zeroclipboard-is-hover { background-color: #eee; }
.clip_button.zeroclipboard-is-active { background-color: #aaa; }
</style>
</head>
<body>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="ZeroClipboard.js"></script>
<div class="clip_button">Copy To Clipboard</div>
<div class="clip_button">Copy This Too!</div>
<script type="text/javascript">
var client = new ZeroClipboard( $('.clip_button') );
client.on( 'ready', function(event) {
// console.log( 'movie is loaded' );
client.on( 'copy', function(event) {
event.clipboardData.setData('text/plain', event.target.innerHTML);
} );
client.on( 'aftercopy', function(event) {
console.log('Copied text to clipboard: ' + event.data['text/plain']);
} );
} );
client.on( 'error', function(event) {
// console.log( 'ZeroClipboard error of type "' + event.name + '": ' + event.message );
ZeroClipboard.destroy();
} );
</script>
</body>
</html>
ВАЖНО: ZeroClipboard НЕ будет работать на страницах «Редактировать» ни на одном из следующих онлайн-сайтов игровых площадок из-за ограничений безопасности, накладываемых их использованием iframe sandboxing. Однако ZeroClipboard будет работать на страницах «Просмотр», если и только если вы используете очень специфически отформатированные URL-адреса, указанные ниже.
ZeroClipboard создаёт элементы DOM с предварительно настроенными атрибутами, например, элемент div с идентификатором "global-zeroclipboard-html-bridge" для инкапсуляции флэш-объекта.
Если у вас есть необходимость изменить значения по умолчанию, их можно настроить, передав значения для КонтейнерId, контейнерКласс и/или swfObjectId с использованием метода ZeroClipboard.config. Конфигурация этих значений не является обязательной. Эти значения нельзя перенастроить, пока SWF-файл ZeroClipboard активно внедрён, и поэтому в это время они полностью игнорируются.
Значения для containerId и swfObjectId проверяются на соответствие спецификации HTML4 для токенов ID и Name.
При использовании AMD с такой библиотекой, как RequireJS, вам не нужно выполнять какую-либо специальную настройку для корректной работы ZeroClipboard в качестве модуля AMD.
При использовании CommonJS с такими библиотеками, как Browserify или Webmake, вам не нужно выполнять какую-либо специальную конфигурацию для корректной работы ZeroClipboard как модуля CommonJS.
if (/MSIE|Trident/.test(window.navigator.userAgent)) {
(function($) {
var zcContainerId = ZeroClipboard.config('containerId');
$('#' + zcContainerId).on('focusin', false);
})(window.jQuery);
}
if (/MSIE|Trident/.test(window.navigator.userAgent)) {
(function($) {
var zcClass = '.' + ZeroClipboard.config('containerClass');
var proto = $.fn.modal.Constructor.prototype;
proto.enforceFocus = function() {
$(document)
.off('focusin.bs.modal') /* Guard against infinite focus loop */
.on('focusin.bs.modal', $.proxy(function(e) {
if (this.$element[0] !== e.target &&
!this.$element.has(e.target).length &&
/* Adding this final condition check is the only real change */
!$(e.target).closest(zcClass).length
) {
this.$element.focus();
}
}, this));
};
})(window.jQuery);
}
if (/MSIE|Trident/.test(window.navigator.userAgent)) {
(function($) {
var zcClass = '.' + ZeroClipboard.config('containerClass');
$.widget( 'ui.dialog', $.ui.dialog, {
_allowInteraction: function( event ) {
return this._super(event) || $( event.target ).closest( zcClass ).length;
}
} );
})(window.jQuery);
}
Эта библиотека полностью совместима с Flash Player 11.0.0 и выше, который требует, чтобы операция копирования буфера обмена была инициирована событием щелчка пользователя внутри флэш-фильма. Это достигается путём автоматического всплытия невидимого фильма поверх элемента DOM вашей... Выбор. Стандартные события мыши также распространяются на ваш элемент DOM, так что вы можете по-прежнему использовать эффекты при наведении курсора и нажатия кнопки мыши, но с чуть большими усилиями.
ZeroClipboard версии 2.x должен работать в IE9+ и всех современных браузерах. Хотя поддержка IE7 и IE8 была официально прекращена в версии 2.0.0, фактически она всё ещё технически поддерживалась до версии 2.0.2.
— Проблема: В подключаемом модуле Flash Player для NPAPI в браузере Opera невозможно соблюсти как неявное наблюдение за свойством CSS cursor у обрезанных элементов, так и параметр конфигурации forceHandCursor: true.
— Обходной путь: Конечные пользователи должны установить Opera 24+ И отдельный подключаемый модуль PPAPI Flash Player, который в настоящее время доступен только в бета-версии Adobe Flash Player 16 (ищите загрузку для конкретной ОС под названием «Download Flash Player for Opera and Chromium based applications — PPAPI»). Начиная с Opera 27 (в настоящее время находящейся в альфа/разрабатываемой версии), Opera будет автоматически предупреждать пользователей, у которых установлен только подключаемый модуль NPAPI Flash Player, и направлять их на установку подключаемого модуля PPAPI Flash Player от Adobe.
Поскольку ZeroClipboard будет взаимодействовать с буфером обмена ваших пользователей, существуют некоторые особенности, характерные для операционных систем пользователей, о которых вам следует знать. Имея эту информацию, вы сможете принять обоснованные решения о том, как ваш сайт должен обрабатывать каждую из этих ситуаций.
— По умолчанию ZeroClipboard обеспечивает соответствие ОС окончаниям строк, то есть "\r\n" в Windows и "\n" во всех операционных системах, отличных от Windows. Если такое поведение нежелательно, вы можете отключить его, установив для параметра конфигурации fixLineEndings значение false, например:
ZeroClipboard.config({
fixLineEndings: false
});
— Система буфера обмена Linux (также известная как «атомы выбора» в Руководстве по стандартным межклиентским коммуникационным соглашениям X Consortium) представляет собой сложную, но функциональную настройку. Однако для обычных конечных пользователей она оставляет желать лучшего. API буфера обмена Flash Player может либо:
Таким образом, поведение ZeroClipboard по умолчанию при работе в Linux заключается в том, чтобы вставлять простой текст только в «Системный буфер обмена». Если вы хотите проигнорировать это предостережение и использовать «Буфер обмена рабочего стола» в любом случае, просто установите для параметра конфигурации forceEnhancedClipboard значение true, например:
ZeroClipboard.config({
forceEnhancedClipboard: true
});
Также существует последнее связанное с этим поведенческое предостережение: если ожидающие данные буфера обмена содержат ТОЛЬКО данные формата "text/plain", ZeroClipboard разумно выберет использование «Системного буфера обмена» независимо от значения свойства конфигурации forceEnhancedClipboard.
sandboxed iframe
Атрибут sandbox элемента iframe (новый в HTML5, поддерживается в IE10+ и во всех других современных браузерах) предоставляет веб-разработчикам способ ужесточить ограничения для встроенного контента сверх того, что обеспечивает политика безопасности контента (CSP) для неsandboxed фреймов с разными источниками. С помощью атрибута sandbox вы можете указать браузеру загружать содержимое определённого фрейма в среде с низкими привилегиями, начиная с... Минимальные привилегии и белый список необходимых возможностей
Также важно отметить, что атрибут sandbox отнимает некоторые привилегии у обрамлённого контента, которые НЕЛЬЗЯ вернуть обратно через белый список. Например, любая страница во фрейме, работающая в песочнице, абсолютно не может запускать собственные плагины (например, Flash, SilverLight, Java и т. д.). Это решение было принято потому, что собственные плагины запускают неуправляемый код, для которого браузер не может предложить никаких дополнительных проверок безопасности, и часто поставляются третьими сторонами.
Таким образом, ZeroClipboard совершенно непригоден для использования внутри iframe, помещённого в песочницу. Были предприняты все усилия, чтобы обнаружить песочницу и уведомить пользователей через событие error (error[name = "flash-sandboxed"]), но, к сожалению, не все конфигурации песочницы можно надёжно обнаружить из обрамлённого содержимого.
Эта песочница также является причиной того, почему ZeroClipboard нельзя использовать как обычно на многих онлайн-площадках для кода, таких как JSFiddle, JSBin, CodePen и т.д. Однако мы собрали несколько «стартовых сниппетов» для таких сайтов, чтобы вы могли быстро приступить к работе.
Для более глубокого анализа и нескольких «непристойных» обходных путей (которые работают только в ограниченных ситуациях) ознакомьтесь с проектом sandblaster.js (JamesMGreene/sandblaster).
iframe в песочницеiframe sandboxОграничения кросс-протокола
ZeroClipboard был намеренно настроен так, чтобы не разрешать SWF-файлу обслуживаться из безопасного домена (HTTPS), но скрипт — из небезопасного домена (HTTP).
Если вы столкнулись с этой ситуацией (как в проблеме № 170), рассмотрите следующие варианты:
//s3.amazonaws.com/blah/ZeroClipboard.swf) вместо абсолютного протокола (https://s3.amazonaws.com/blah/ZeroClipboard.swf).allowInsecureDomain, затем перекомпилируйте SWF со своими пользовательскими изменениями.Ограничения протокола file://
Если вы хотите либо использовать ZeroClipboard на странице, размещённой по протоколу file://, либо обслуживать активы ZeroClipboard по протоколу file://, вы почти наверняка столкнётесь с некоторыми препятствиями из-за ограничений безопасности Flash Player. Сможете ли вы обойти эти препятствия, сильно зависит от специфики используемого браузера и плагина Flash Player.
Различные потенциальные и/или частичные обходные пути подробно описаны ниже. Мы рекомендуем попробовать их в том порядке, в котором они перечислены, за исключением тех, которые не применимы к вашему браузеру/настройке Flash.
file://
Вам действительно нужно размещать это по протоколу file://? Если нет, пожалуйста, не делайте этого: это может превратиться в бесконечную (или откровенно проигрышную) битву за конфигурацию безопасности для вас.
Мы рекомендуем вместо этого просто установить простой HTTP-сервер и использовать его. Сегодня существует множество приложений HTTP-серверов, которые даже не требуют настройки или правильной «установки», это просто исполняемые файлы, которые могут динамически размещать текущий рабочий каталог (или принимать... Конфигурирование параметров командной строки. Просто, легко, готово.
Но если вам действительно нужно разместить это через протокол file://, пожалуйста, прочтите дальше... и мы желаем вам столь необходимой удачи.
В редких случаях для некоторых настроек браузера/Flash вы можете обойти это ограничение безопасности так же легко, как специально настроить ZeroClipboard для доверия ВСЕМ доменам для взаимодействия SWF через подстановочный знак. Эту конфигурацию необходимо установить перед созданием экземпляров клиента ZeroClipboard в качестве обычного потребителя или перед вызовом ZeroClipboard.create() в сторонней оболочке:
ZeroClipboard.config({ trustedDomains: ["*"] });
Эта конфигурация с подстановочным знаком НЕ должна использоваться в средах, размещённых по HTTP/HTTPS.
Если вы используете любой браузер с включённым традиционным плагином NPAPI Flash Player И предпочтительным (т. е. плагины PPAPI Flash Player не поддерживаются, не установлены или отключены для рассматриваемого экземпляра браузера) или используете плагин PPAPI Flash Player версии v16.0.0 (или выше), вы можете отредактировать системные настройки безопасности Flash Player, чтобы внести свой URL SWF в белый список с помощью диспетчера локальных настроек Flash Player:
+).Это должно работать для всех подключаемых модулей NPAPI Flash Player. Однако это может не работать для всех плагинов PPAPI Flash Player.
Если вы используете какой-либо браузер с включенным традиционным плагином NPAPI Flash Player и предпочитаете (то есть плагины PPAPI Flash Player не поддерживаются, не устанавливаются или отключены для экземпляра браузера), вы можете изменить настройки безопасности устройства NPAPI Flash Player, чтобы добавить свой SWF-URL в белый список, используя диспетчер онлайн-настроек Flash Player:
Некоторые версии Flash также включают опцию «разрешить всё» в глобальном диспетчере настроек.
Это должно работать для всех подключаемых модулей NPAPI Flash Player. Однако это НЕ БУДЕТ работать для любых подключаемых модулей PPAPI Flash Player.
Если вы используете подключаемый модуль PPAPI Flash Player и все вышеупомянутые обходные пути вместе по-прежнему не позволяют вам обойти это ограничение безопасности, вы официально исчерпали надлежащие обходные пути, поскольку почти наверняка столкнулись с ещё более строгой моделью безопасности в слое Chromium «Pepper» (PPAPI) Flash. Этот повышенный уровень безопасности повлияет на подключаемые модули PPAPI Flash Player.
Вы можете оставить комментарий после Вход в систему
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.
Опубликовать ( 0 )