Page Comparison

...

Create a confluence page in cloud environment & add HTML macro to add HTML content.

Add below code to your HTML content

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

Info

Ensure to have install our app

Please ensure, you have installed HTML for confluence app in your environment
You can modify the content as per your requirement
Ensure to have proper

premission

permission to perform/apply changes

Versions Compared

Old Version 1

New Version 2

Key