मान लें कि मेरे पास text/html है जो एक कॉपी-टू-क्लिपबोर्ड ईवेंट (जैसे document.execCommand) से जेनरेट किया गया है।

क्या text/html डेटा खोए बिना उस डेटा को text/plain mimetype में कॉपी करने का कोई तरीका है? यदि ऐसा है तो यह कैसे किया जा सकता है? ध्यान दें कि मेरे पास वर्तमान में कॉपी क्लिपबोर्ड में टेक्स्ट/एचटीएमएल डेटा है और यह एक ही समय में दोनों लिखने का विकल्प नहीं है।

2
samuelbrody1249 17 फरवरी 2021, 10:12
"और यह एक ही समय में दोनों को लिखने का विकल्प नहीं है।" इसका क्या मतलब है? आप दोनों एक साथ क्यों नहीं लिख सकते? आप उस डेटा को क्लिपबोर्ड पर कब लिखना चाहते हैं? और इसे क्लिपबोर्ड में क्यों होना चाहिए?
 – 
Kaiido
17 फरवरी 2021, 12:20

1 उत्तर

सबसे बढ़िया उत्तर

सबसे अच्छा शायद इसे सीधे कॉपी करने पर संभालना है। चूंकि text/html को केवल चयन से कॉपी करते समय सेट किया जाना चाहिए और इनपुट से नहीं, हम रेंज एपीआई के माध्यम से मार्कअप प्राप्त कर सकते हैं, और हमारे कॉपी इवेंट के डेटा को ओवरराइट कर सकते हैं।

addEventListener( "copy", (evt) => {
  const selection = getSelection();
  if( selection.isCollapsed ) return;
  evt.preventDefault();
  const range = selection.getRangeAt(0);
  const data_as_html = new XMLSerializer().serializeToString( range.cloneContents() );
  evt.clipboardData.setData("text/plain", data_as_html);
  evt.clipboardData.setData("text/html", data_as_html);
} );
<p>
  <span style="color:red;font-weight:bold">copy</span><span style="color:green;font-weight:thinner"> this</span>
  <span style="color:blue"> text</span>
</p>
<div contenteditable>Paste here as rich-text</div>
<textarea cols="30" rows="10">Paste here as markup</textarea>

अब ओपी ने कहा कि वे उस समय ऐसा नहीं कर सकते, क्योंकि मैं नहीं जानता कि क्या कारण हैं।
इसका मतलब है कि उन्हें क्लिपबोर्ड की सामग्री को पढ़ने में सक्षम होना चाहिए, और इसके लिए, उन्हें क्लिपबोर्ड एपीआई की अनुमतियों के माध्यम से, या "paste" ईवेंट को संभालने के लिए उपयोगकर्ता की स्वीकृति की आवश्यकता होती है।

हालांकि, ऐसा लगता है कि क्लिपबोर्ड एपीआई से plain/text के अलावा कोई भी ब्राउज़र वास्तव में कुछ भी पढ़ने का समर्थन नहीं करता है, जो हमें केवल पेस्ट ईवेंट छोड़ देता है:

btn.onclick = (evt) => {
  addEventListener( "paste", (evt) => {
    const data_as_html = evt.clipboardData.getData("text/html");
    if( data_as_html ) {

    }
    addEventListener("copy", (evt) => {
      evt.preventDefault();
      evt.clipboardData.setData("text/plain", data_as_html);
      evt.clipboardData.setData("text/html", data_as_html);
    }, { once: true } );
    document.execCommand("copy");
  }, { once: true } );
  document.execCommand("paste");
}
<button id="btn">convert clipboard content to markup</button><br>
<p>
  <span style="color:red;font-weight:bold">copy</span><span style="color:green;font-weight:thinner"> this</span>
  <span style="color:blue"> text</span>
</p>
<div contenteditable>Paste here as rich-text</div>
<textarea cols="30" rows="10">Paste here as markup</textarea>
0
Kaiido 17 फरवरी 2021, 12:40