Oh!Coder

Coding Life

ZeroClipboard-Rails Gem简介

| Comments

今天介绍一个功能很简单的gem,名字叫ZeroClipboard

简介

这个gem实现的功能只有一个,就是从浏览器的页面上复制文字,把复制好的内容粘贴到系统剪切板上。这个gem实现的原理其实是对js做了封装。如果自己实现,可能会碰到一些坑,比如浏览器的兼容性问题。如果使用这个gem,或许可以避免很多脏活累活。

安装

首先在Gemfile文件中添加如下一行:

1
gem 'zeroclipboard-rails'

然后执行:

1
$ bundle

然后在app/assets/javascripts/application.js文件里添加一行:

1
//= require zeroclipboard

用法

对于用法的相关信息,浏览器的支持,详情可参见ZeroClipboard文档

例子(HTML,ERB)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<div class='demo-area'>
  <button class='my_clip_button' data-clipboard-target='fe_text' data-clipboard-text='Default clipboard text from attribute' id='d_clip_button' title='Click me to copy to clipboard.'>
    <b>Copy To Clipboard...</b>
  </button>
  <h4>
    <label for='fe_text'>Change Copy Text Here</label>
  </h4>
  <textarea cols='50' id='fe_text' rows='3'>Copy me!</textarea>
  <h4>
    <label for='testarea'>Paste Text Here</label>
  </h4>
  <textarea cols='50' id='testarea' rows='3'></textarea>
  <p>
    <button id='clear-test'>Clear Test Area</button>
  </p>
</div>
<script>
  $(document).ready(function() {
    var clip = new ZeroClipboard($("#d_clip_button"))
  });

  $("#clear-test").on("click", function(){
    $("#fe_text").val("Copy me!");
    $("#testarea").val("");
  });
</script>

例子(HAML)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.demo-area
  %button#d_clip_button.my_clip_button{"data-clipboard-target" => "fe_text", "data-clipboard-text" => "Default clipboard text from attribute", :title => "Click me to copy to clipboard."}
    %b Copy To Clipboard...
  %h4
    %label{:for => "fe_text"} Change Copy Text Here
  %textarea#fe_text{:cols => "50", :rows => "3"} Copy me!
  %h4
    %label{:for => "testarea"} Paste Text Here
  %textarea#testarea{:cols => "50", :rows => "3"}
  %p
    %button#clear-test Clear Test Area
:javascript
  $(document).ready(function() {
    var clip = new ZeroClipboard($("#d_clip_button"))
  });

  $("#clear-test").on("click", function(){
    $("#fe_text").val("Copy me!");
    $("#testarea").val("");
  });

更多

基本使用就是这些,更多详情可参见原文档

Comments