This article explains how we can select content by clicking on an option/button with an HTML script in the confluence cloud.
\uD83D\uDCD8 Instructions
Create a confluence page in the cloud environment & add an HTML macro to add HTML content.
Add the below code to your HTML content:
<!-- HTML code to copy into clipboard --> <!-- Include libraries --> <!-- a. Include font-awesome for the copy icon --> <head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <!-- b. Include the copy library <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script> --> <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.10/clipboard.min.js"></script> <!-- Instantiate clipboard by passing a string selector --> </head> <body> <!-- test --> <input id="foo" value="https://github.com/zenorocha/clipboard.js/releases/tag/v2.0.0"> <!-- Trigger --> <button class="btn" data-clipboard-target="#foo"> <img src="assets/clippy.svg" alt="Copy to clipboard"> </button> <script>// Select elements const target = document.getElementById('foo'); const button = target.nextElementSibling; // Init clipboard -- for more info, please read the offical documentation: https://clipboardjs.com/ var clipboard = new ClipboardJS(button, { target: target, text: function() { return target.innerText; } }); // Success action handler clipboard.on('success', function(e) { const currentLabel = button.innerHTML; // Exit label update when already in progress if(button.innerHTML === 'Copied!'){ return; } // Update button label button.innerHTML = 'Copied!'; // Revert button label after 3 seconds setTimeout(function(){ button.innerHTML = currentLabel; }, 3000) }); </script> </body>
Publish the page to see the result.
Please ensure, the HTML for confluence app is installed in your environment.
The content can be modified as per your requirement.
Ensure to have proper permission to perform/apply changes.