브라우저에서 사용자 지정 clipboardData 데이터 유형

Question

우리는 사용자가 두 시스템간에 데이터를 복사하여 붙여 넣을 수 있도록 노력하고 있습니다. 웹 페이지에서 전자 앱으로

사용자는 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 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>`); 
} 

I Base64로

일반 HTML 페이스트와의 충돌을 최소화하려고 btoa()로 ID를 인코딩합니다.