TinyMCE 万能コピーボタンの実装

TinyMCEビジュアルエディタ内のコンテンツを全選択してコピーし、万能に貼り付ける事が出来る、Jqueryを使ったボタンの実装。

コピー後、HTMLエディタに貼り付けると、HTMLが反映される形で貼り付けられ、テキストエディタに貼り付けると、テキストとして貼り付けられ、MarkDownエディタに貼り付けるとMarkDownとして貼り付けられ、Wordに貼り付けると、Word形式として貼り付けが可能。

$(function() {
    $("#copy-url, #copy-url2").click(function(){
        var editor = tinyMCE.activeEditor;
        var htmlContent = editor.getContent();
        
        // プレーンテキストを取得
        var tempDiv = document.createElement("div");
        tempDiv.innerHTML = htmlContent;
        var textContent = tempDiv.textContent || tempDiv.innerText || "";

        // モダンなクリップボードAPIを使用
        if (navigator.clipboard && navigator.clipboard.write) {
            navigator.clipboard.write([
                new ClipboardItem({
                    'text/html': new Blob([htmlContent], {type: 'text/html'}),
                    'text/plain': new Blob([textContent], {type: 'text/plain'})
                })
            ]).then(showSuccessMessage).catch(handleCopyError);
        } 
        // フォールバック: execCommandを使用
        else if (document.execCommand) {
            var tempTextArea = document.createElement("textarea");
            tempTextArea.value = textContent;
            document.body.appendChild(tempTextArea);
            tempTextArea.select();
            try {
                var successful = document.execCommand('copy');
                if (successful) {
                    showSuccessMessage();
                } else {
                    handleCopyError(new Error('execCommand failed'));
                }
            } catch (err) {
                handleCopyError(err);
            }
            document.body.removeChild(tempTextArea);
        }
        // どちらの方法も使えない場合
        else {
            alert("お使いのブラウザはクリップボード操作をサポートしていません。");
        }
    });

    function showSuccessMessage() {
        $('.success-msg').fadeIn("slow", function () {
            $(this).delay(2000).fadeOut("slow");
        });
    }

    function handleCopyError(err) {
        console.error('クリップボードへのコピーに失敗しました', err);
        alert("クリップボードへのコピーに失敗しました。ブラウザの設定を確認してください。");
    }
});

<a id="copy-url" class="ui button green" style="padding: 10px 30px;">コピー</a>

<div class="success-msg">クリップボードにコピーしました</div>

.success-msg{
	display: none;
	position: fixed;
	width: 300px;
	height: 40px;
	line-height: 40px;
	background-color: rgb(196, 196, 3);
	color: #fff;
	top: 100px;
	left: 0;
	right: 0;
	margin: auto;
	text-align: center;
	border-radius: 5px;
}