ブラウザ間のカスタムclipboardDataデータタイプ

Question

私たちはユーザーが2つのシステム間でデータをコピー・ペーストできるようにしています。ウェブページから電子アプリまで。

ユーザーは、copy-to-clipboardのヘルプを使用してコピーイベントをトリガーするボタンをクリックします。我々はpasteイベントに耳を傾ける電子アプリで

import copy from "copy-to-clipboard"; 

const copyHandler = (evt) => { 
    evt.preventDefault(); 

    evt.clipboardData.setData("text/plain", url); 
    evt.clipboardData.setData("mumbo/jumbo", JSON.stringify({ 
     foo: "bar" 
    })); 
} 

document.addEventListener("copy", copyHandler); 
copy(); 
document.removeEventListener("copy", copyHandler); 

：

onPaste = (evt) => { 
    if(evt.clipboardData.getData("mumbo/jumbo")) { 
     // Handle custom data-type 
    } else if(evt.clipboardData.getData("text/html")) { 
     // Handle html 
    } else { 
     // Handle plain text 
    } 
} 

クロームすべての作品には、ユーザーが当社のウェブページを使用しています

。カスタムデータ型のデータを読み取ることができます。しかし、ユーザがFirefoxのWebページにアクセスすると、 evt.clipboardData.getData("mumbo/jumbo")は未定義を返します。 text/plainと text/htmlに設定したデータは引き続き使用できます。

データをFirefoxに戻すとevt.clipboardData.getData("mumbo/jumbo")は正しく設定されたデータを返します。

これは動作するはずですが、何も見つかりませんでしたかについての情報を見つけようとしました。カスタムのclipboardDataデータ型はブラウザ間でサポートされていますか？何か間違っていますか？それとも、それは決してうまくいかなかったのですか？

application/jsonと同じことをすると、FirefoxとElectronの間でデータ型も機能しません。私たちが作業できるデータタイプは、text/plainとtext/htmlですが、すでに他の目的で使用されています。

Answer 1

最後に、clipboard W3C Working Draftにリストされているすべてのデータ型を調べました。この時点では、FirefoxとChromeをコピーアンドペーストするときにはtext/plainとtext/htmlしか動作しません。

私は、データを渡すためにtext/htmlを使用して終了：

const copyHandler = (evt) => { 
    evt.preventDefault(); 

    evt.clipboardData.setData("text/plain", url); 
    evt.clipboardData.setData("text/html", `<div id="${btoa("mumbo/jumbo")}" data-foo="${bar}"></div>`); 
} 

私は、通常のHTMLのペーストとの競合を最小化しようとするbtoa()でIDをエンコードBASE64。