Member Avatar for jeadeb

Hi there all

I am in the process of developing a knowledgebase..

I have some cool click and copy script but it doesnt allow me to format the text that is copied so that I can copy an already fromatted email..

for example:

Hi,

thank you for contacting us, blablablablablablablablablablabla
blablablablablablablablablablablablablablablablabla

Kind regards

blabla.


here is the jscript I have:

<script language="javascript" type="text/javascript">
<!--
function copy_clip(meintext)
{
 if (window.clipboardData)
  {
  
  window.clipboardData.setData("Text", meintext);
 
  }
  else if (window.netscape)
  {
  
  netscape.security.PrivilegeManager.enablePrivilege('UniversalXPConnect');
 
  var clip = Components.classes['@mozilla.org/widget/clipboard;1']
                .createInstance(Components.interfaces.nsIClipboard);
  if (!clip) return;

  var trans = Components.classes['@mozilla.org/widget/transferable;1']
                 .createInstance(Components.interfaces.nsITransferable);
  if (!trans) return;
 
  trans.addDataFlavor('text/unicode');
  
  var str = new Object();
  var len = new Object();
  var str = Components.classes["@mozilla.org/supports-string;1"]
               .createInstance(Components.interfaces.nsISupportsString);
  var copytext=meintext;
  str.data=copytext;
  trans.setTransferData("text/unicode",str,copytext.length*2);
  var clipid=Components.interfaces.nsIClipboard;
  if (!clip) return false;
  clip.setData(trans,null,clipid.kGlobalClipboard);
  }
  alert("The following text has been copied:\n\n" + meintext);
  return false;
}
//-->
</script>

 
<p><span onclick='return copy_clip("this text will be copied to clipboard'>
when you click on this text, the above is copied.(but you cant see it untill you paste it.
</span> </p>

here is my problem.


I cant format any thing in this area

<p><span onclick='return copy_clip("this text will be copied to clipboard'>

I get that jscript error if i try...


I want to for example, do something like this:

<p><span onclick='return copy_clip("hi there,
<p>thank you for contacting us etc</p>")'>


so that when pasted you can have a nicely formatted email/...


Please HELP

thanks!!

  • 2 Contributors
  • 1 Reply
  • 517 Views
  • 7 Hours Discussion Span
  • Latest Post Latest Post by tgreer

Dani AI

Generated

's inline onclick approach (putting raw HTML inside an attribute) is fragile and will break on quoting/line breaks. was right for the era — old hacks were inconsistent. Modern browsers can copy formatted HTML to the clipboard: use the async Clipboard API (navigator.clipboard.write) with a ClipboardItem that contains a 'text/html' blob. This is the preferred, standards-based route for copying a preformatted email body. (developer.mozilla.org)

A practical pattern: keep the formatted email in a <template> (or a hidden element), attach a click handler, then try the Clipboard API and fall back to a short-lived contentEditable + document.execCommand('copy') selection if needed.

<template id="emailTpl">
  <p>Hi,</p>
  <p>Thank you for contacting us...<br/>More details here.</p>
  <p>Kind regards,<br/>Support</p>
</template>

<button id="copyEmail">Copy formatted email</button>

<script>
async function copyHtml(html) {
  try {
    const plain = (() => { const d = document.createElement('div'); d.innerHTML = html; return d.textContent || ''; })();
    const item = new ClipboardItem({
      'text/html': new Blob([html], { type: 'text/html' }),
      'text/plain': new Blob([plain], { type: 'text/plain' })
    });
    await navigator.clipboard.write([item]); // preferred
    return;
  } catch (e) {
    // fallback: select a temporary contentEditable element and execCommand('copy')
    const tmp = document.createElement('div');
    tmp.contentEditable = 'true';
    tmp.style.position = 'fixed';
    tmp.style.left = '-9999px';
    tmp.innerHTML = html;
    document.body.appendChild(tmp);
    const range = document.createRange();
    range.selectNodeContents(tmp);
    const sel = window.getSelection();
    sel.removeAllRanges();
    sel.addRange(range);
    document.execCommand('copy');
    sel.removeAllRanges();
    document.body.removeChild(tmp);
  }
}

document.getElementById('copyEmail').addEventListener('click', () =>
  copyHtml(document.getElementById('emailTpl').innerHTML)
);
</script>

Falling back to execCommand('copy') can preserve HTML when copying a selected DOM fragment, but it's deprecated and behavior varies between browsers. The Clipboard API requires a secure context (HTTPS) and may need transient user activation or the clipboard-write permission in some environments; include both 'text/html' and 'text/plain' in the clipboard item for best compatibility. Test pasting into the actual target (Gmail compose, Outlook desktop, etc.) because different paste targets may sanitize or convert clipboard formats. (developer.mozilla.org)

Summary: store the formatted email in the DOM (not inside an inline attribute), use the async Clipboard API first, and fall back to the contentEditable + execCommand trick if necessary. This avoids quoting errors and gives the best chance of pasting as formatted HTML.

Member Avatar for tgreer

First, there is a difference between Jscript and JavaScript. They are two different languages. Second, I don't know of any OS that will copy fully-formatted HTML to the clipboard. Sorry.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.