0

I have a segment of code I would like to copy and subsequently paste into an HTML reader (MS Word or Outlook).

It should retain the HTML formatting, but not paste the HTML as text.

I have three functions: 

copyHTMLToClipboard(id:string): void {
    const fromHtml = this._eRef.nativeElement.querySelector(id).innerHTML;
    const newNode = this.render.createElement('div');
    this.render.appendChild(this._eRef.nativeElement, newNode);
    this.render.setProperty(newNode, 'innerHTML', fromHtml);
    this._clipboardService.copyFromContent(fromHtml);
    alert(fromHtml);
  }

  copyToClipboard(): void {
    this._clipboardService.copyFromContent(this.buildFile());
  }

  copyMessage(val: string){
    const selBox = document.createElement('textarea');
    selBox.style.position = 'fixed';
    selBox.style.left = '0';
    selBox.style.top = '0';
    selBox.style.opacity = '0';
    selBox.value = val;
    document.body.appendChild(selBox);
    selBox.focus();
    selBox.select();
    document.execCommand('copy');
    document.body.removeChild(selBox);
  }

called by three buttons: 

<button mat-raised-button (click)="copyMessage(buildFile())" value="click to copy" >Copy</button>
<button mat-raised-button ngxClipboard (click)="buildFile();copyToClipboard()" >Copy</button>
<button mat-raised-button (click)="copyHTMLToClipboard('#ExistingUserBox')">Copy text</button>

buildFile() creates a string of the HTML code below, so it can be saved as an .htm file.

The buttons/functions are trying to copy:

<div class="innerbox layoutbox" id="ExistingUserBox" #ExistingUserBox >
<div class="col editorbox" style="font-family: Lato, Arial, Helvetica, sans-serif; font-size: 12pt; font-weight:400; color:#464646; line-height: 16pt;">
    <div style="font-family: Lato, Arial, Helvetica, sans-serif; font-size: 12pt; font-weight:400; color:#464646; line-height: 16pt;" >{{Employee_Name}}</div>
    <div style="font-family: Lato, Arial, Helvetica, sans-serif; font-size: 10pt; font-weight:400; color:#464646; line-height: 12pt;">{{Employee_Phone}}</div>
</div>
</div>

All three functions successfully get the HTML as a text string, but when I paste it I get all the HTML markup and not just the formatting.

I have looked at:

Javascript - copy all html code into clipboard

Copy html to clipboard (Angular)

and while they reference similar code to what I'm doing, neither answers the question of how to get formatted html code into the clipboard.

I want to get this: John Doe 123-4567

Rather than getting this: 

<div class="innerbox layoutbox" id="ExistingUserBox" #ExistingUserBox >
<div class="col editorbox" style="font-family: Lato, Arial, Helvetica, sans-serif; font-size: 12pt; font-weight:400; color:#464646; line-height: 16pt;">
    <div style="font-family: Lato, Arial, Helvetica, sans-serif; font-size: 12pt; font-weight:400; color:#464646; line-height: 16pt;" >John Doe</div>
    <div style="font-family: Lato, Arial, Helvetica, sans-serif; font-size: 10pt; font-weight:bold; color:#002a5f; line-height: 12pt;">123-4567</div>
</div>
</div>
Chip
  • 123
  • 1
  • 14
  • What do you mean by "retain the HTML formatting, but not paste the HTML as text"? Can you show an example of what you want and what you get with your current code? – ConnorsFan Mar 11 '20 at 20:17
  • Does this answer your question? [javascript copy rich text contents to clipboard](https://stackoverflow.com/questions/23934656/javascript-copy-rich-text-contents-to-clipboard) – Heretic Monkey Mar 11 '20 at 20:20
  • Heretic Monkey - it might if I understood how to manipulate copyToClip(str) for my purposes – Chip Mar 11 '20 at 20:42
  • Is the part of your question "I want to get this" exactly what you want? I was about to edit the question to format it with the `{}` tool of the editor, but then I saw that this part was the same as the part shown in "Rather than getting this"... – ConnorsFan Mar 11 '20 at 20:58

2 Answers2

0

Because you put into the clipboard the raw HTML from the innerHTML, it does not have to be formatted. To get what you want, you need manually format it before putting it into the clipboard. You can use any library to format HTML.

slesh
  • 1,412
  • 12
  • 26
0

https://www.npmjs.com/package/clipboard-polyfill

Works!!!! 

copyMessage(file: string): void {
    var htmlFile = new clipboard.DT();
    htmlFile.setData("text/html", file);
    clipboard.write(htmlFile);
  }

file is a string which includes the html. htmlFile is the same data in text/html format clipboard.write - copies the htmlFile to the clipboard.

This will NOT paste as plain text in say Notepad++.
But it DOES paste to Outlook and MSWord with fully formatted html.

Chip
  • 123
  • 1
  • 14