I apologize in advanced if I'm even posting this in the wrong area. I'm not as familiar with HTML and barely understand JavaScript at all.
I'm creating a page in SharePoint that will consist of various email 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.
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.
A SharePoint Page Example Showing how I got the HTML for the div
This is the code I found for the copy button:
<!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 the HTML for the div I want to copy from:
<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>
When I inspected the code, as someone who again doesn't know a lot about this stuff, it appeared that the id which is set to "myInput" is a key part of this. I tried to use the ID from the div that I found "1212fc8d-dd6b-408a-8d5d-9f1cc787efbb" and that didn't work. I didn't know what else to try.
My end goal is to have just the button element housed inside the script editor web part on the SharePoint page and learn exactly how I can reference the div of my choice to copy the text from that container on the page to the clipboard. Learning how that works will allow me to use this feature on other templates that I plan to have on the same SharePoint page.
I posted this on the Microsoft SharePoint forums with no responses and I assume it was because I needed to reach out to a discussion community that was more about web elements and coding so I hope I'm in the right place.
Thanks again for all of your help in advanced. Jake