document.execCommand('copy')が非推奨になったのでClipboardAPIに代替

 

 

document.execCommand('copy') が現在非推奨になった。(MDN)

当面は動作するとは思われるが、ClipboardAPIと言う便利な仕様があるのでこちらに移行。

 

 

document.execCommand('copy')の代替

var clipboardText = "clipboard";
navigator.clipboard.writeText(clipboardText);

 

変数に入れて、navigator.clipboard.writeText()に入れるだけ。

ただしIEには非対応。

 

window.clipboardData（IE）

IEに対応するにはこうなるらしい。

 

var clipboardText = "clipboard";
window.clipboardData.setData('Text', clipboardText ); 

 

両方に対応するならこうなるらしい。

 

var clipboardText = "clipboard";
if(navigator.clipboard == undefined) {
    window.clipboardData.setData('Text', clipboardText);
} else {
    navigator.clipboard.writeText(clipboardText);
}

 

まあ、個人的にはIEは無視でいこう。

 

 

結果TinyMCEのコピーが楽に

これまで、TinyMCEの更新したデータを取得するには、tinyMCE.activeEditor.getContent() を使っていたので、いったん疑似的にtextareaを生成してその中に入れてからselectしてコピー。

その後textareaを削除、みたいな流れだったが、ClipboardAPIを使うと取得したものをそのままコピーできるようになったので便利。

 

execCommand('copy')

$(function() {
  function execCopy() {
    var text = tinyMCE.activeEditor.getContent();
    var clipboard = $('<textarea></textarea>');
    clipboard.text(text);
    $('body').append(clipboard);
    clipboard.select();
    document.execCommand('copy');
    clipboard.remove();
		$('.success-msg').fadeIn("slow", function () {
			$(this).delay(2000).fadeOut("slow");
		});
  }
  $('#copy-url').on('click', execCopy);
});

 

 ClipboardAPI

$(function() {
  $("#copy-url").click(function(){
    var text = tinyMCE.activeEditor.getContent();
    navigator.clipboard.writeText(text);
		$('.success-msg').fadeIn("slow", function () {
			$(this).delay(2000).fadeOut("slow");
		});
  });
});

 

※なお、navigator.clipboard.writeText() は、ブラウザのセキュリティポリシーにより、非SSL
環境では動作しない。