Page Comparison

This article explains how we can select a content by clicking on a user can copy the contents from the HTML macro in a confluence page with an option/button with an HTML script in confluence cloud.

\uD83D\uDCD8 Instructions

Create a confluence page in the cloud environment & add an HTML macro

...

.

...

Add the below code to your HTML content:
The content can be modified as per your requirement. Here in the snippet, replace the value parameter with the one you want to show to the user under the “Add the content you want to see“ section.

Code Block

<!-- 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="

...

bam -i |grep byn > /tmp/mpplist_alive || grep byn /etc/opt/teradata/tdconfig/mpplist|awk '{print $1}' > /tmp/mpplist_all">

<!-- 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.
Image Added

Info
Please ensure, you have installed the HTML for confluence app is installed in your environment You can modify the content as per your requirement . Ensure to have proper permission to perform/apply changes.

Versions Compared

Old Version 2

New Version Current

Key

\uD83D\uDCD8 Instructions