सादे पाठ के रूप में पेस्ट करें कंटेंटेंटेबल div और textarea (शब्द/एक्सेल ...)

Question

मैं एक संतोषजनक div में पाठ पेस्ट करना चाहता हूं, लेकिन टेक्स्टरेरा के रूप में प्रतिक्रिया देना चाहता हूं।
ध्यान दें कि मैं स्वरूपण रखना चाहता हूं क्योंकि मैं इसे अपने टेक्स्टरेरा में पेस्ट करूँगा (शब्द, एक्सेल ...) से।
तो।
1) contenteditable div में टेक्स्ट पेस्ट
2) मैं क्लिपबोर्ड से पाठ प्राप्त
3) मैं क्लिपबोर्ड से मेरी पाठ क्षेत्र के लिए अपने मूल्य धक्का, (न जानते हैं कि कैसे ??)
4) मेरे पाठ क्षेत्र से मूल्य प्राप्त करें और इसे मेरे contenteditable div

कोई सुझाव दें?

Answer 1

वर्तमान समाधान में सही काम करता है आईई/एसएएफ/एफएफ लेकिन फिर भी मैं जब माउस क्लिक के साथ चिपकाने "गैर" कीबोर्ड की घटनाओं, के लिए एक ठीक जरूरत है ... कुंजीपटल "पेस्ट" की घटनाओं के लिए वर्तमान समाधान:

$(document).ready(function() { 
    bind_paste_textarea();  
}); 


function bind_paste_textarea(){ 
    var activeOnPaste = null; 
    $("#mypastediv").keydown(function(e){ 
     var code = e.which || e.keyCode; 
     if((code == 86)){ 
      activeOnPaste = $(this); 
      $("#mytextarea").val("").focus(); 
     } 
    }); 
    $("#mytextarea").keyup(function(){ 
     if(activeOnPaste != null){ 
      $(activeOnPaste).focus(); 
      activeOnPaste = null; 
     } 
    }); 
} 

<h2>DIV</h2> 
<div id="mypastediv" contenteditable="true" style="width: 400px; height: 400px; border: 1px solid orange;"> 

</div> 
<h2>TEXTAREA</h2> 
<textarea id="mytextarea" style="width: 400px; height: 400px; border: 1px solid red;"></textarea> 

Answer 2

मैं सीकेडिटर के मूल डेवलपर हूं और पिछले 4 महीनों के लिए संयोग से मैं क्लिपबोर्ड समर्थन और संबंधित सामान पर काम कर रहा था :) दुर्भाग्य से मैं आपको पूरी तरह से वर्णन करने में सक्षम नहीं हूं कि पेस्टिंग कैसे संभाली जाती है, क्योंकि कहानियों की कहानियां मेरे द्वारा प्रत्यारोपण लिखने के बाद भी मेरे लिए बहुत मुश्किल है: डी

हालांकि, यहां कुछ हैं ई संकेत जो आपकी मदद कर सकते हैं:

1. wysiwyg संपादक नहीं लिखें - मौजूद एक का उपयोग करें। यह आपके पूरे समय का उपभोग करने जा रहा है और फिर भी आपका संपादक छोटी गाड़ी होगी। हम और अन्य लोगों से ... दो मुख्य संपादकों (अनुमान है कि केवल तीन मौजूद हैं) इस पर वर्षों से काम कर रहे हैं और हमारे पास अभी भी पूर्ण बग सूचियां हैं;)।

2. यदि आपको वास्तव में अपना खुद का संपादक लिखने की आवश्यकता है तो http://dev.ckeditor.com/browser/CKEditor/trunk/_source/plugins/clipboard/plugin.js देखें - यह पुराना प्रत्यारोपण है, इससे पहले कि मैं इसे दोबारा लिखूं, लेकिन यह हर जगह काम करता है जहां यह संभव है। कोड भयानक है ... लेकिन यह आपकी मदद कर सकता है।

3. आप सभी ब्राउज़रों को केवल एक ईवेंट paste द्वारा संभालना संभव नहीं होगा। चिपकाने के सभी तरीकों को संभालने के लिए हम दोनों - beforepaste और paste दोनों का उपयोग कर रहे हैं।

4. ब्राउज़र की क्विर्क की संख्या (बड़ी संख्या: डी) है जिसे आपको संभालने की आवश्यकता होगी। मैं आपको उनका वर्णन नहीं कर सकता, क्योंकि कुछ हफ्तों के बाद भी मुझे उन सभी को याद नहीं है। हालांकि, हमारे डॉक्स से छोटे अंश आपके लिए उपयोगी हो सकता है:

   पेस्ट कमांड (गैर देशी पेस्ट द्वारा प्रयोग किया जाता है - हमारे टूलबार से जैसे) देशी संदर्भ मेनू से

   * fire 'paste' on editable ('beforepaste' for IE) 
   * !canceled && execCommand 'paste' 
   * !success && fire 'pasteDialog' on editor 
   

   पेस्ट & मेनूबार

   (Fx & Webkits are handled in 'paste' default listner. 
   Opera cannot be handled at all because it doesn't fire any events 
   Special treatment is needed for IE, for which is this part of doc) 
   * listen 'onpaste' 
   * cancel native event 
   * fire 'beforePaste' on editor 
   * !canceled && getClipboardDataByPastebin 
   * execIECommand('paste') -> this fires another 'paste' event, so cancel it 
   * fire 'paste' on editor 
   * !canceled && fire 'afterPaste' on editor 
   

   बाकी चाल - आईई पर हम दोनों पेस्ट घटनाओं के लिए सुनते हैं, बाकी केवल paste के लिए। हमें आईई पर कुछ घटनाओं को रोकने की जरूरत है, क्योंकि चूंकि हम कभी-कभी सुन रहे हैं, इससे दोगुनी हैंडलिंग हो सकती है। यह अनुमान है कि यह सबसे मुश्किल हिस्सा है।

5. ध्यान दें कि मैं स्वरूपण रखना चाहता हूं क्योंकि मैं इसे अपने टेक्स्टरेरा (शब्द, एक्सेल ...) में पेस्ट कर दूंगा।

   स्वरूपण के कौन से हिस्से आप रखना चाहते हैं? Textarea केवल मूलभूत रखेंगे - ब्लॉक स्वरूपण।

6. http://dev.ckeditor.com/browser/CKEditor/trunk/_source/plugins/wysiwygarea/plugin.js#L120 लाइन 123 तक देखें - यह कार्य का अंतिम भाग है - चयन में सामग्री डालने।

Answer 3

मैंने चयन को सहेजने और पुनर्स्थापित करने के लिए rangy library का उपयोग करके इसे हासिल किया है।

मैं उसी कार्य में लाइब्रेरी का उपयोग करके कुछ अन्य काम भी करता हूं, जिसे मैंने इस उदाहरण से अलग कर दिया है, इसलिए यह इष्टतम कोड नहीं है।

एचटीएमएल

<div><div id="editor"contenteditable="true" type="text"></div><div> 

जावास्क्रिप्ट

var inputArea = $element.find('#editor'); 
var debounceInterval = 200; 

function highlightExcessCharacters() { 
    // Bookmark selection so we can restore it later 
    var sel = rangy.getSelection(); 
    var savedSel = sel.saveCharacterRanges(editor); 

    // Strip HTML 
    // Prevent images etc being pasted into textbox 
    inputArea.text(inputArea[0].innerText); 

    // Restore the selection 
    sel.restoreCharacterRanges(editor, savedSel); 
} 

// Event to handle checking of text changes 
var handleEditorChangeEvent = (function() { 

    var timer; 

    // Function to run after timer passed 
    function debouncer() { 
     if (timer) { 
      timer = null; 
     } 
     highlightExcessCharacters(); 
    } 

    return function() { 
     if (timer) { 
      $timeout.cancel(timer); 
     } 
     // Pass the text area we want monitored for exess characters into debouncer here 
     timer = $timeout(debouncer, debounceInterval); 
    }; 
})(); 

function listen(target, eventName, listener) { 
    if (target.addEventListener) { 
     target.addEventListener(eventName, listener, false); 
    } else if (target.attachEvent) { 
     target.attachEvent("on" + eventName, listener); 
    } 
} 

// Start up library which allows saving of text selections 
// This is useful for when you are doing anything that might destroy the original selection 
rangy.init(); 
var editor = inputArea[0]; 

// Set up debounced event handlers 
var editEvents = ["input", "keydown", "keypress", "keyup", "cut", "copy", "paste"]; 
for (var i = 0, eventName; eventName = editEvents[i++];) { 
    listen(editor, eventName, handleEditorChangeEvent); 
}