चयन के बाद HTML डालें

Question

मैं एक div में कुछ पाठ का चयन करने के लिए डबल-क्लिक करने में सक्षम होना चाहता हूं, जो तब एक जावास्क्रिप्ट फ़ंक्शन ट्रिगर करता है जो चयनित टेक्स्ट के बाद कुछ HTML डालता है, जैसे 'संपादन/उत्तर' सुविधा में Google वेव

मैंने पहले ही स्थापित किया है कि डबल-क्लिक पर फ़ंक्शन को ट्रिगर कैसे करें, यह चयन का पता लगा रहा है और बाद में समस्या के बाद HTML डालने वाला है।

Answer 1

window.getSelection() आपको चयनित टेक्स्ट (Documentation) प्राप्त करेगा। तत्व के बाद नया HTML डालने के लिए आप jQuery.after() (Documentation) का उपयोग कर सकते हैं।

आपके चयनित टेक्स्ट फ़ंक्शन कॉल पर आपको अपने कर्सर स्थिति में अपने x & y पदों की जांच करने के लिए अपने सभी DOM तत्वों को लूप करना होगा - निकटतम तत्व प्राप्त करें और फ़ंक्शन के बाद डालें या उपयोग करें .elementFromPoint (x, y) (Documentation)

यह वर्तमान में सबसे अच्छा तरीका है जिसके बारे में मैं सोच सकता हूं। यह सही नहीं है, लेकिन यह कहीं शुरू करने के लिए है।

Answer 2

मुझे नहीं पता कि यह संभव है, लेकिन मैं आंशिक समाधान के बावजूद।

अपने डबल क्लिक ईवेंट पर आप event object and access the propertytarget प्राप्त कर सकते हैं।

लक्ष्य तत्व होने के बाद, you can get the selected text।

अब लक्ष्य तत्व HTML प्राप्त करें और चयनित टेक्स्ट और इसकी लंबाई का सूचकांक पाएं, index + length स्थिति पर अपना HTML डालें।

मुझे लगता है कि आपको पहले से ही समस्या दिखाई दे रही है, यह कई स्थानों पर पाठ से मेल खा सकता है। इसे हल करने के लिए आपको कर्सर की स्थिति और तत्व की तुलना करना पड़ सकता है, मुझे नहीं पता कि यह कैसे करें ...

आशा है कि मैं थोड़ा सा मदद कर सकता हूं।

Answer 3

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

function insertNodeAfterSelection(node) { 
    var sel, range, html; 
    if (window.getSelection) { 
     sel = window.getSelection(); 
     if (sel.getRangeAt && sel.rangeCount) { 
      range = sel.getRangeAt(0); 
      range.collapse(false); 
      range.insertNode(node); 
     } 
    } else if (document.selection && document.selection.createRange) { 
     range = document.selection.createRange(); 
     range.collapse(false); 
     html = (node.nodeType == 3) ? node.data : node.outerHTML; 
     range.pasteHTML(html); 
    } 
} 

आप बल्कि एक HTML स्ट्रिंग डालने चाहते हैं:

function insertHtmlAfterSelection(html) { 
    var sel, range, node; 
    if (window.getSelection) { 
     sel = window.getSelection(); 
     if (sel.getRangeAt && sel.rangeCount) { 
      range = window.getSelection().getRangeAt(0); 
      range.collapse(false); 

      // Range.createContextualFragment() would be useful here but is 
      // non-standard and not supported in all browsers (IE9, for one) 
      var el = document.createElement("div"); 
      el.innerHTML = html; 
      var frag = document.createDocumentFragment(), node, lastNode; 
      while ((node = el.firstChild)) { 
       lastNode = frag.appendChild(node); 
      } 
      range.insertNode(frag); 
     } 
    } else if (document.selection && document.selection.createRange) { 
     range = document.selection.createRange(); 
     range.collapse(false); 
     range.pasteHTML(html); 
    } 
} 

अपडेट 18 जनवरी 2012

अंत में, यहां एक संस्करण है जो HTML को सम्मिलित करता है और चयन को संरक्षित करता है (यानी। मूल रूप से चयनित सामग्री और सम्मिलित सामग्री को शामिल करने के लिए चयन का विस्तार करता है)।

लाइव डेमो: http://jsfiddle.net/timdown/JPb75/1/

कोड:

function insertHtmlAfterSelection(html) { 
    var sel, range, expandedSelRange, node; 
    if (window.getSelection) { 
     sel = window.getSelection(); 
     if (sel.getRangeAt && sel.rangeCount) { 
      range = window.getSelection().getRangeAt(0); 
      expandedSelRange = range.cloneRange(); 
      range.collapse(false); 

      // Range.createContextualFragment() would be useful here but is 
      // non-standard and not supported in all browsers (IE9, for one) 
      var el = document.createElement("div"); 
      el.innerHTML = html; 
      var frag = document.createDocumentFragment(), node, lastNode; 
      while ((node = el.firstChild)) { 
       lastNode = frag.appendChild(node); 
      } 
      range.insertNode(frag); 

      // Preserve the selection 
      if (lastNode) { 
       expandedSelRange.setEndAfter(lastNode); 
       sel.removeAllRanges(); 
       sel.addRange(expandedSelRange); 
      } 
     } 
    } else if (document.selection && document.selection.createRange) { 
     range = document.selection.createRange(); 
     expandedSelRange = range.duplicate(); 
     range.collapse(false); 
     range.pasteHTML(html); 
     expandedSelRange.setEndPoint("EndToEnd", range); 
     expandedSelRange.select(); 
    } 
}