Forum Discussion
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>
Jake_Hembree I figured out the solution!
For anyone looking to use Script Editor to create a copy to the clipboard button on their SharePoint page, use the following code. Locate the ID of the Div and change the ID on line 31.
If you're looking to use this button more than once on the same page, remember to change "myFunction" to "myFunction2" and "myFunction3" and so on for additional buttons. Those changes must be made to line 10 and line 31.
The same with "myTooltip" to "myTooltip2" on lines 17 and 32.I hope this helps anyone looking for a way to do this.
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <script> function myFunction(divId) { const copyDiv = document.getElementById(divId); if (copyDiv) { const textToCopy = copyDiv.innerText; navigator.clipboard.writeText(textToCopy) .then(() => { let tooltip = document.getElementById("myTooltip"); tooltip.innerHTML = "Copied"; setInterval( () => {tooltip.innerHTML = "Copy Template"}, 1000); }) .catch(err => { console.error('Could not copy text: ', err); }); } else { console.error('Element to copy from could not be found'); } } </script> <div> <button onclick="myFunction('4fea53bd-80ff-45be-ad02-b29a65423712')" onmouseout="outFunc()"> <span class="tooltiptext" id="myTooltip">Copy Template</span> </button> </div> </body> </html>
Jake_Hembree I figured out the solution!
For anyone looking to use Script Editor to create a copy to the clipboard button on their SharePoint page, use the following code. Locate the ID of the Div and change the ID on line 31.
If you're looking to use this button more than once on the same page, remember to change "myFunction" to "myFunction2" and "myFunction3" and so on for additional buttons. Those changes must be made to line 10 and line 31.
The same with "myTooltip" to "myTooltip2" on lines 17 and 32.I hope this helps anyone looking for a way to do this.
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <script> function myFunction(divId) { const copyDiv = document.getElementById(divId); if (copyDiv) { const textToCopy = copyDiv.innerText; navigator.clipboard.writeText(textToCopy) .then(() => { let tooltip = document.getElementById("myTooltip"); tooltip.innerHTML = "Copied"; setInterval( () => {tooltip.innerHTML = "Copy Template"}, 1000); }) .catch(err => { console.error('Could not copy text: ', err); }); } else { console.error('Element to copy from could not be found'); } } </script> <div> <button onclick="myFunction('4fea53bd-80ff-45be-ad02-b29a65423712')" onmouseout="outFunc()"> <span class="tooltiptext" id="myTooltip">Copy Template</span> </button> </div> </body> </html>
