0

I want to copy an image to clipboard when a button is clicked but when I paste it, it always has style="..." which I want to remove.

I used the function from another Stack Overflow question.

function copy(selector) {
  var $temp = $("<div>");
  $("body").append($temp);
  $temp.attr("contenteditable", true)
    .html($(selector).html())
    .select()
    .on("focus", function() { document.execCommand('selectAll', false, null); })
    .focus();
  document.execCommand("copy");
  $temp.remove();
}

Here is the HTML:

<p id="demo"><img src="/picture/img.jpg" alt="img"></p>
<button onclick="copy('#demo')">Copy Keeping Format</button>

When I click the button and paste it in a web text editor such as TinyMCE it displays the image, but when I open the source code it has style="..." which I obviously don't need:

<img src="/picture/img.jpg" alt="noname" style="box-sizing: border-box; border: 0px; vertical-align: middle; color: #454545; font-family: 'Helvetica Neue', Roboto, Arial, 'Droid Sans', sans-serif; font-size: 13px; background-color: #f9f9f9;" />

How do I make it paste just the following?

<img src="/picture/img.jpg" alt="noname"/>

How i check the data will be copy ?

console.log() // what var to print to check the data that will be copy by execcommand

UPDATE

i try to right click the image and chose copy image and paste it to the text editor and check the source code and get clean img html without style="..." so its not the text editor add the style="..." right ?

Ricky Wijaya
  • 65
  • 7
  • `$temp.removeAttr("style")` – mplungjan Nov 18 '17 at 06:58
  • @mplungjan I guess the style attribute is added by tinymce editor, no?! – A. Wolff Nov 18 '17 at 07:04
  • If it is not on the temp object then yes – mplungjan Nov 18 '17 at 07:09
  • @mplungjan where shuld i put that removeAttr ? i try to put it before contenteditable not work – Ricky Wijaya Nov 18 '17 at 07:17
  • Before document.execCommand("copy"); – mplungjan Nov 18 '17 at 07:18
  • not work its still have the style=" " on the img tag – Ricky Wijaya Nov 18 '17 at 07:22
  • @RickyWijaya This is how tinymce handles pasted html content. I don't know really this plugin but maybe there is an option to paste raw HTML element. Anyway, this has nothing to do with your posted method to copy element. Now i'm guessing there is valuable reason why this plugin add specific style attribute – A. Wolff Nov 18 '17 at 07:28
  • i try the other editor and have style too . how i check what the data that will be copy by document.execCommand("copy") , what to console.log? so i can check did the editor or the function wrong – Ricky Wijaya Nov 18 '17 at 07:42
  • If you just comment `//$temp.remove();` and then inspect the img element inside the contenteditable element, you can easily see what you get. I just tested it, and ya, the style attribute is added by tinymce editor. – A. Wolff Nov 18 '17 at 07:46
  • @A.Wolff do you find the way to copy the clean img html ? – Ricky Wijaya Nov 20 '17 at 01:35

1 Answers1

0

If the problem is indeed on TinyMCE's end, you might want to use paste filters enabled just for images. You'll be able to catch the HTML before it's placed in the editor and do whatever you want with it.

https://www.tinymce.com/docs/plugins/paste/#paste_preprocess