Using Modern Script Editor web part to copy text from a div container in SharePoint Page
I'm creating a page in SharePoint that will consist of various templates. I don't want to use mailto links because these templates will vary on who they are sent to and I want to person to review them before using them. My goal is to create a quick copy text button on the page for that body of text. In some cases it will be 3 or 4 paragraphs. I found some relatively basic code that uses a copy text function. I'm not very savvy when it comes to JavaScript and I only know enough to know that this is possible if I use the Script Editor. What I did was inspect the element of the body of text/section of the page so I can get the code needed and plug it and modify the copy text code that I found. I've added the code and images for reference below. Can anyone help me with this? Thanks in advanced. This is the code for the copy text button that I found: <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> .tooltip { position: relative; display: inline-block; } .tooltip .tooltiptext { visibility: hidden; width: 140px; background-color: #555; color: #fff; text-align: center; border-radius: 6px; padding: 5px; position: absolute; z-index: 1; bottom: 150%; left: 50%; margin-left: -75px; opacity: 0; transition: opacity 0.3s; } .tooltip .tooltiptext::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: #555 transparent transparent transparent; } .tooltip:hover .tooltiptext { visibility: visible; opacity: 1; } </style> </head> <body> <input type="text" value="I need help!" id="myInput"> <div class="tooltip"> <button onclick="myFunction()" onmouseout="outFunc()"> <span class="tooltiptext" id="myTooltip">Copy to clipboard</span> Copy Template </button> </div> <script> function myFunction() { var copyText = document.getElementById("myInput"); copyText.select(); copyText.setSelectionRange(0, 99999); navigator.clipboard.writeText(copyText.value); var tooltip = document.getElementById("myTooltip"); tooltip.innerHTML = "Copied"; } function outFunc() { var tooltip = document.getElementById("myTooltip"); tooltip.innerHTML = "Copy to clipboard"; } </script> </body> </html> This is code of the web element from the SharePoint page: <div class="ControlZone ControlZone--clean a_c_50a7110f" data-automation-id="CanvasControl" id="1212fc8d-dd6b-408a-8d5d-9f1cc787efbb"> <div class="ControlZone--control"> <div data-sp-feature-tag="Rich Text Editor" class="rte-webpart rte--ck5 rte--read-ck5 uniformSpacingForElements" data-sp-feature-instance-id="1212fc8d-dd6b-408a-8d5d-9f1cc787efbb" dir="auto"> <div data-automation-id="textBox" class="ck-content rteEmphasis root-153"><p>This is the area I want the copy template button to copy from.</p></div> </div> </div> </div>
