CODEWITHSUNDEEP
javascript
Stotra
Stotra

Reputation: 103

Issue when using event.clipboardData.setData for text/html data type

I added a custom copy listener to change the copied text on clipboard to something else. Now when I copy it as text/html , it doesn't work on following cases:

Copy - paste on word (works correctly) Copy - paste on notepad(Nothing gets pasted at all) Copy - paste on url bar (Nothing gets pasted at all)

document.getElementById(config.editorEl).addEventListener('copy', function(event) {
    const range = window.getSelection().getRangeAt(0);
    const content = range.cloneContents();
    const div = document.createElement('div');
    div.appendChild(content);
    $(div)
    .find('.remove_this_class')
    .contents()
    .unwrap();
    event.clipboardData.setData('text/html', div.innerHTML);
    event.preventDefault();
    });

However, when i replace text/html with text/paste, it works correctly by the html tags are not rendered.

Can anyone help me out to fix this for text/html too ?

Upvotes: 1

Views: 1796

Answers (2)

Stotra
Stotra

Reputation: 103

Finally, I was able to guess the solution myself. While we paste we use getData("DataType"). So if I add dataType to "text/html", then paste in url or the text area which allows only "text/plain", the getData("text/plain") will return nothing. Thus we need to add both:

event.clipboardData.setData('text/html', div.innerHTML); event.clipboardData.setData('text/plain', div.innerHTML.toString());

What this does is that it will allow paste to get the data according to the datatype and hence will work in the url as well.

Upvotes: 0

sandeep yadav
sandeep yadav

Reputation: 19

I can't justify your question, but see this code, it helped you. Because by copying I can paste the notepad and URL bar from it.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

</head>
<body>
  <div id="test" style="width:500px;height: 200px; border: 1px solid sandybrown;">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  </div>
  <script>
    document.getElementById("test").addEventListener('copy', function(event) {
    const range   = window.getSelection(); 
    const selRange = range.getRangeAt(0);
    const content = selRange.toString();
    alert(content);
    const div = document.createElement('div');
    div.style.color = "yellow";
    div.appendChild(content);
    $(div).find('.remove_this_class').contents().unwrap();
    event.clipboardData.setData('text/html', div.innerHTML);
    event.preventDefault();
    });
  </script>
</body>
</html>

Upvotes: 1

Related Questions