2017-11-18 9 views
0

ボタンをクリックしたときに画像をクリップボードにコピーしたいが、貼り付けるときにはいつも削除したいstyle="..."がある。クリーンHTMLをクリップボードにコピーするにはどうすればいいですか?

私は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(); 
} 

はHTMLです:

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

私はボタンをクリックして、画像を表示するなどのTinyMCEなどのWebテキストエディタに貼り付け、私は、ソースコードを開いたとき、それはstyle="..."を持っていますこれは私が明らかに必要はありません。

<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;" /> 

は、どのように私はそれが次だけ&ペーストするのですか?

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

どのようにデータがコピーされることを確認しますか?

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

UPDATE私は、画像を右クリックしてみてくださいとコピー画像を選択し、テキストエディタに貼り付けて、ソースコードをチェックし、そうstyle="..."そのないテキストエディタなしできれいなのimg HTMLを取得

style="..."を追加しますか?

+0

'$ temp.removeAttr( "スタイル")は' – mplungjan

+0

@mplungjanノー、style属性がTinyMCEのエディタによって追加されると思います! –

+0

それがtempオブジェクトにない場合はyes – mplungjan

答えて

0

問題が実際にTinyMCEの最後にある場合は、画像用にペーストフィルタを有効にすることができます。エディタに配置される前にHTMLをキャッチして、必要なものを実行できます。

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

+0

おかげでスタイルがきれいになりました –

関連する問題