Skip to end of banner
Go to start of banner

How to auto select contents with an option in confluence cloud

Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 2 Next »

This article explains how we can select a content by clicking on an option/button with HTML script in confluence cloud

\uD83D\uDCD8 Instructions

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

  2. Add 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>
  3. Publish the page to see the result.

  • 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 permission to perform/apply changes

  • No labels