HTML प्राप्त क्लिपबोर्ड जावास्क्रिप्ट में

Question

मैं काम जो RichTextEditors के लिए काफी आम सुविधा है लागू करने की आवश्यकता से - क्लिपबोर्ड से एचटीएमएल ले। क्या कोई इस कार्य को हल करने के तरीके पर मार्गदर्शिका के साथ सहायता कर सकता है?

यह पार मंच (आईई, एफएफ, क्रोम, ओपेरा) हो गया है। मैं सिर्फ इस कोड से शुरू:

<script type="text/javascript"> 
    $('.historyText').live('input paste', function(e) { 

     var paste = e.clipboardData && e.clipboardData.getData ? 
     e.clipboardData.getData('text/plain') :    // Standard 
     window.clipboardData && window.clipboardData.getData ? 
     window.clipboardData.getData('Text') :     // MS 
     false; 

     alert(paste); 
    });</script> 

दोनों window.clipboardData और e.clipboardData अशक्त (Chrome, Firefox) कर रहे हैं।

अद्यतन: उपयोगकर्ता अन्य ब्राउज़र विंडो से लेख की सामग्री चिपकाने के लिए चाहता है, और मैं html टैग प्राप्त करने की आवश्यकता।

Answer 1

आप क्लिपबोर्ड अकेले जावास्क्रिप्ट का उपयोग, जो जिस तरह से यह होना चाहिए से डेटा प्राप्त करने में सक्षम नहीं होगा। जिस तरह से TinyMCE और CKEditor के वर्तमान संस्करण इस प्रकार है कार्य करें:

1. एक कुंजी दबाने ईवेंट हैंडलर
2. का उपयोग कर कि हैंडलर में एक Ctrl-V/पाली-इन घटना का पता लगाने, वर्तमान उपयोगकर्ता चयन बचाने के लिए, एक जोड़ने div तत्व ऑफ स्क्रीन (बाएं -1000px पर कहते हैं) दस्तावेज़ में, कि div के अंदर होने के लिए कैरेट को हिलाने, इस प्रकार प्रभावी ढंग ईवेंट हैंडलर में एक बहुत ही संक्षिप्त टाइमर (जैसे कि 1 मिलीसेकंड) सेट पेस्ट
3. पुनः निर्देशित एक और फोन करने के लिए फ़ंक्शन जो div से HTML सामग्री पुनर्प्राप्त करता है और जो भी प्रसंस्करण आवश्यक है, दस्तावेज़ से div को हटा देता है, उपयोगकर्ता चयन को पुनर्स्थापित करता है और संसाधित HTML को सम्मिलित करता है।

ध्यान दें कि यह केवल कीबोर्ड पेस्ट ईवेंट के लिए काम करेगा और संदर्भ से पेस्ट या मेनू संपादित नहीं करेगा। पेस्ट इवेंट की आग लगने तक, कैरेट को लेफ्ट में रीडायरेक्ट करने में बहुत देर हो चुकी है (कुछ ब्राउज़रों में, कम से कम)।

Answer 2

क्रोम में, मैं इस कोड का उपयोग घटना के माध्यम से clipboardData का उपयोग:

$(document).bind('paste', function(e) { 
    var clipboardData = e.originalEvent.clipboardData; 
}); 

Answer 3

मैं वास्तव में इस पर बहुत काम किया है, और सिर्फ एक nice blog post का वर्णन लिखा था कि किस प्रकार हम Lucidchart पर विस्तार से यह किया (एक अस्वीकरण के रूप में, मैं लुसीडचार्ट में काम करता हूं)। हमारे पास a JSFiddle है जो कॉपी और पेस्टिंग (फ़ायरफ़ॉक्स, सफारी, क्रोम, और आईई 9 + में परीक्षण) दिखाता है।

जवाब की कमी है कि आप प्रणाली का पेस्ट घटना के दौरान एचटीएमएल प्राप्त करने की आवश्यकता नहीं है। सबसे (गैर आईई) ब्राउज़रों में इस निम्नलिखित के रूप में सरल कुछ के साथ किया जा सकता है:

document.addEventListener('paste', function(e) { 
    var html = e.clipboardData.getData('text/html'); 
    // Whatever you want to do with the html 
} 

समस्या यह है कि जब आप IE में एचटीएमएल प्राप्त करना चाहते हैं। किसी भी कारण से, IE जावास्क्रिप्ट के माध्यम से टेक्स्ट/एचटीएमएल क्लिपबोर्ड डेटा को सुलभ नहीं बनाता है। आपको क्या करना है ब्राउज़र को एक संतोषजनक div पर पेस्ट करने दें और फिर पेस्ट ईवेंट खत्म हो जाने के बाद HTML प्राप्त करें।

<div id="ie-clipboard-contenteditable" class="hidden" contenteditable="true"></div> 

var ieClipboardDiv = $('#ie-clipboard-contenteditable'); 

var focusIeClipboardDiv = function() { 
    ieClipboardDiv.focus(); 
    var range = document.createRange(); 
    range.selectNodeContents((ieClipboardDiv.get(0))); 
    var selection = window.getSelection(); 
    selection.removeAllRanges(); 
    selection.addRange(range); 
}; 

document.addEventListener('beforepaste', function() { 
    if (hiddenInput.is(':focus')) { 
    focusIeClipboardDiv(); 
    } 
}, true); 

document.addEventListener('paste', function(e) { 
    ieClipboardDiv.empty(); 
    setTimeout(function() { 
    var html = ieClipboardDiv.html(); 
    // Do whatever you want with the html 
    ieClipboardDiv.empty(); 
    // Return focus here 
    }, 0); 
}