Implementing Copy to Clipboard Feature in Rails 4.2 Apps

Setup Clipboard.js

Download clipboard.js. Extract the downloaded zip file and copy the dist/clipboard.js to vendor/assets/javascripts directory. Create the html file.

<!-- Target -->
<textarea id="bar">Mussum ipsum cacilds...</textarea>

<!-- Trigger -->
<button class="btn" data-clipboard-target="#bar">
    Copy to clipboard
</button>

In application.js, add:

//= require clipboard

I got the error:

jquery is not defined rails

Add bootstrap-sprockets after jquery and jquery_ujs.

//= require jquery
//= require jquery_ujs
//= require bootstrap-sprockets     

I got the error:

couldn't find file 'bootstrap-popover' with type 'application/javascript'

Change the order like this:

@import "bootstrap";
@import "bootstrap-sprockets";

I defined this in load_bootstrap.scss file. Now I got

clipboard is not defined error. 

Workaround

Add this to the bottom of the html file where you need the copy to clipboard feature.

<% content_for(:third_party_js) do %>
  <script src="https://cdn.rawgit.com/zenorocha/clipboard.js/v1.5.10/dist/clipboard.min.js"></script>
<% end %>   
<script>
    var clipboard = new Clipboard('.btn');
</script>

Inside head tag, add yield to application layout.

<%= yield :third_party_js %>

You will now be able to copy to clipboard by clicking on the button.

Summary

You can use Clipboard Rails that simplifies integrating clipboard.js to Rails apps. I only have this feature for admin section of rubyplus.com. So, I decided not to use it. Don't forget to play with the demo samples that comes with the clipboard.js zip file.


Related Articles


Ace the Technical Interview

  • Easily find the gaps in your knowledge
  • Get customized lessons based on where you are
  • Take consistent action everyday
  • Builtin accountability to keep you on track
  • You will solve bigger problems over time
  • Get the job of your dreams

Take the 30 Day Coding Skills Challenge

Gain confidence to attend the interview

No spam ever. Unsubscribe anytime.