संतोषजनक चयनित टेक्स्ट सहेजें और

Question

पुनर्स्थापित करें, मैं इस पोस्ट में आया हूं जो सामग्री को सहेजे गए पाठ से चयनित पाठ को सहेजने और पुनर्स्थापित करने के तरीके पर 2 फ़ंक्शंस दिखाता है। मेरे पास नीचे div div contenteditable और दूसरे पोस्ट से 2 फ़ंक्शन के रूप में सेट है। चयनित टेक्स्ट को सहेजने और पुनर्स्थापित करने के लिए मैं इन फ़ंक्शंस का उपयोग कैसे करूं।

<div style="width:300px;padding:10px;" contenteditable="true">test test test test</div> 

<script> 
function saveSelection() { 
    if (window.getSelection) { 
     sel = window.getSelection(); 
     if (sel.getRangeAt && sel.rangeCount) { 
      return sel.getRangeAt(0); 
     } 
    } else if (document.selection && document.selection.createRange) { 
     return document.selection.createRange(); 
    } 
    return null; 
} 

function restoreSelection(range) { 
    if (range) { 
     if (window.getSelection) { 
      sel = window.getSelection(); 
      sel.removeAllRanges(); 
      sel.addRange(range); 
     } else if (document.selection && range.select) { 
      range.select(); 
     } 
    } 
} 
</script> 

Answer 1

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

यहां एक साधारण उदाहरण है। यह एक इनपुट इनपुट प्रदर्शित करता है और उस इनपुट से टेक्स्ट के साथ संपादन योग्य <div> में चयन को ओवरराइट करता है। यहाँ में पेस्ट करने के लिए बहुत ज्यादा कोड है, तो यहाँ पूर्ण कोड है: http://www.jsfiddle.net/timdown/cCAWC/3/

निकालें:

<div id="test" contenteditable="true">Some editable text</div> 
<input type="button" unselectable="on" onclick="displayTextInserter();" 
    value="Insert text"> 
<div id="textInserter"> 
    <input type="text" id="textToInsert"> 
    <input type="button" onclick="insertText()" value="Insert"> 
</div> 

<script type="text/javascript"> 
var selRange; 

function displayTextInserter() { 
    selRange = saveSelection(); 
    document.getElementById("textInserter").style.display = "block"; 
    document.getElementById("textToInsert").focus(); 
}  

function insertText() { 
    var text = document.getElementById("textToInsert").value; 
    document.getElementById("textInserter").style.display = "none"; 
    restoreSelection(selRange); 
    document.getElementById("test").focus(); 
    insertTextAtCursor(text); 
} 
</script> 

Answer 2

सिर्फ एक सिफारिश:

यह देशी ब्राउज़र चयन के साथ काम करने के लिए कठिन है + contenteditable + संभाल सब अलग ब्राउज़र पहलुओं + बचाने के लिए और चयन और खरोंच से आदि बहाल ..

मैं सिफारिश करेंगे आवाराhttps://code.google.com/p/rangy/wiki/SelectionSaveRestoreModule
कि विशेष रूप से के लिए आप

जांच डॉक्स चयन के साथ सभी कड़ी मेहनत करने के लिए किया है, इसका इस्तेमाल करने में आसान है;) आशा है कि यह आप