Copy Code

In this quick tutorial you'll find out how you can add a copy code button to your Forumotion forum, similar to the one that's on Forumactif Edge. Clicking this button will automatically copy the code contents to your clipboard without having to right click or CTRL+C !

Click to View Demo

Note : This may not work for some outdated browsers. See Browser Support for more information.

Installation

To install this plugin go to Admin Panel > Modules > JavaScript codes management and create a new script with the following settings.

Title : Copy Code
Placement : In all the pages

Code:

$.getScript('https://cdn.jsdelivr.net/clipboard.js/1.5.16/clipboard.min.js', function() {
  window.fae_copyCode = {
    copy : 'Copy Code',
    copied : 'Copied !'
  };
 
  $(function() {
    var a = $('.codebox dt').not('.spoiler > dt, .hidecode > dt'),
        i = 0,
        j = a.length;
 
    if (a[0]) {
      $('head').append('<style type="text/css">.fae_copy-code{float:right;cursor:pointer;}.fae_copy-code:hover{text-decoration:underline}</style>');
 
      for (; i < j; i++) {
        a[i].insertAdjacentHTML('beforeend', '<span class="fae_copy-code">' + fae_copyCode.copy + '</span>');
      }
 
      new Clipboard('.fae_copy-code',{
        target : function (copy) {
          if (copy.innerHTML != fae_copyCode.copied) {
            return $(copy).closest('.codebox').find('.cont_code, code')[0];
          }
        }

      }).on('success', function (e) {
        var copy = e.trigger;

        if (copy.innerHTML != fae_copyCode.copied) {
          copy.innerHTML = fae_copyCode.copied;
          copy.className += ' fae_copied';

          window.setTimeout(function() {
            copy.innerHTML = fae_copyCode.copy;
            copy.className = copy.className.replace('fae_copied', '');
          }, 1000);
        }

        e.clearSelection();
      });
    }
 
  });
});

Modifications
Click the spoiler below to reveal the modifications for this script, if you want to modify it.

Click to view modifications:

Once you're finished, save the script and you'll have a brand new copy code button ! What will you do with these few extra seconds you've gained ?

If you have any questions, comments, or find a bug, let me know below. Enjoy !

Notice

Tutorial written by @Ange Tuteur. Special thanks to Zeno Rocha for Clipboard.js.

Hello mate I still don't see this when i add the code

I Think i have so many codes running it messes things up can you please take a look for me.
it's in chat world.

use the staff room to test the code if your like
you also have admin powers

Hi @Ape,

There was a small JS error on your forum ; a semicolon was missing after one of the

Code: document.write();

statements. It should be fixed now, let me know if it's working okay now.

the code works perfectly on my forums invision and punbb / thank you

Thank you that worked your the best

thanks for this code

Great code thanks a lot!!!

is it possible to use it on non forumotion sites or pages or any page that use a code box im not sure what the ID of my forum using in code box but its very close to forumotion
for Example .postbody in phpbb2 in my forum is post_body
so i wonder if that is possible
@Ange Tuteur
you did before the Giphy button for me before and its still working like a charm

Hi @Michael_vx,

It is indeed applicable to any website. See https://clipboardjs.com/ for more info about cliboard js.
]

In regards to making it work, all you need to do is change the selectors on lines 8 and 22 respectively.

Code:

    var a = $('.codebox dt').not('.spoiler > dt, .hidecode > dt'),


Code:

            return $(copy).closest('.codebox').find('.cont_code, code')[0];