-1

Goal

I'm trying to copy <table id=signature> to clipboard such that the contents can be pasted into a rich HTML text box while retaining its structure and image.

Problem

When we use Jquery clipboard/copy methods like document.execCommand("copy"); we end up with plain text instead of rich HTML like the signature generated in the preview window.

Edit: if I highlight the signature and copy it, it work's like a charm. I'm trying to simulate that "highlight and copy" for the user so they don't have to.

enter image description here

<div id="preview">
    <table id="signature">
        <tbody>
            <tr>
                <td></td>
            </tr>
        </tbody>
    </table>

    <div id="copy-signature">
        Copy Signature
    </div>
</div>
dwashburn
  • 37
  • 1
  • 1
  • 8
  • why signature is in table? – Prajwal Jan 29 '18 at 06:57
  • @Prajwal We plan to paste it into Gmail and use as email signatures. We tried using DIV's but that didn't seem to format correctly in Google. We just reverted to tables since that seemed to work. – dwashburn Jan 29 '18 at 06:58
  • Not certain what the requirement is? – guest271314 Jan 29 '18 at 07:03
  • @guest271314 apologies, I'm not certain what you mean. – dwashburn Jan 29 '18 at 07:05
  • What are you trying to achieve? What issue are you having with the code that you have tried? – guest271314 Jan 29 '18 at 07:07
  • @guest271314 understood, the issue we are having is that we cannot figure out how to copy the HTML to clipboard. When we use tools like clipboard.js they only copy plain text. They don't copy the table structure, image, or any fonts/colors. It's just plain HTML but we want to copy the rich HTML generated in the preview. Edit: added clarification in the main post. – dwashburn Jan 29 '18 at 07:08

1 Answers1

1

You can set all CSS at style attributes of the elements, set the <img> element src to a data URL, then set the .outerHTML of #preview element to the clipboard.

guest271314
  • 1
  • 15
  • 104
  • 177
  • Can you clarify that last part? We currently have all CSS in-line on the elements, I just removed it from my sample to save space. What do you mean when you say set the outerHTML of #preview to clipboard? – dwashburn Jan 29 '18 at 07:17
  • Exactly that. At the `copy` event handler [Javascript - copy text string on click](https://stackoverflow.com/questions/45071353/javascript-copy-text-string-on-click/) – guest271314 Jan 29 '18 at 07:24