जावास्क्रिप्ट संतोषजनक div

Question

में टेक्स्ट डालें मुझे एक समस्या है जहां मुझे एक div में एक टेक्स्ट (स्ट्रिंग, हो सकता है या नहीं हो सकता है) हो सकता है। यह एक div होना चाहिए और एक textarea नहीं है।

क्या ऐसा करने के लिए वैसे भी है? सबसे पहले, मुझे कर्सर की स्थिति प्राप्त करने की आवश्यकता है, फिर उस स्थिति में टेक्स्ट डालना होगा।

यह फ़ंक्शन डालने के समान है AJAacentText, लेकिन यह केवल टैग के पहले या बाद में सम्मिलित हो सकता है, और केवल आईई में काम करता है।

इस यूआरएल का संदर्भ लें: http://yart.com.au/test/iframe.aspx। ध्यान दें कि आप कर्सर को div में कैसे स्थिति दे सकते हैं, हमें कर्सर स्थान पर टेक्स्ट जोड़ने की आवश्यकता है।

Answer 1

रेंज और चयन ऑब्जेक्ट्स

उपयोग selection और range objects। इनमें वर्तमान चयन के बारे में सभी प्रकार की जानकारी होती है, और जहां यह नोड पेड़ के भीतर स्थित है।

मेले चेतावनी: यह तुम क्या वर्णन कर रहे हैं करने के लिए पूरी तरह से असंभव नहीं है, लेकिन अगर आप बहुत फैंसी मिलता है, आप ब्राउज़र quirks और असंगतियां की बहुत गहरे पानी में हो जाएगा। आपको ऑब्जेक्ट डिटेक्शन पर बहुत कुछ करना होगा, यह सुनिश्चित करने के लिए कि आपके पास लगातार मूल्य और विधियां हैं। जैसे ही आप विकसित होते हैं, अपने सभी ब्राउज़रों को बढ़ाना जांचें। सौभाग्य!

Answer 2

यदि आपको केवल वर्तमान चयन/सम्मिलन बिंदु पर HTML डालना है, तो यह करने योग्य है। मेरे सिर के ऊपर (आपको शुरू करने के लिए):

आईई में, document.selection.createRange()। PasteHTML (theewHTML) का उपयोग करें।

अन्य ब्राउज़रों में, आप document.execCommand ("InsertHTML", ...) का उपयोग करने में सक्षम होना चाहिए।

मैंने इन प्रकार की तकनीकों का उपयोग केवल संपादन योग्य आईफ्रेम/दस्तावेजों में किया है, divs नहीं, लेकिन div को ध्यान केंद्रित करने पर इन कॉलों को काम करना चाहिए, मुझे विश्वास है।

जैसा कि एक और उत्तर चेतावनी दी गई है, अगर आप अन्य जगहों पर पाठ डालने जैसे बेहतर परिश्रम नियंत्रण चाहते हैं तो यह बदसूरत हो जाता है।

Answer 3

आप insertImage का उपयोग करके एक गोल-विधि विधि का भी उपयोग कर सकते हैं। आप execCommand "insertImage" का उपयोग करके एक नकली छवि (या एक छोटा सा) डालते हैं, फिर आप टेक्स्ट जोड़ने के लिए आंतरिक HTML को प्रतिस्थापित करने के लिए जावास्क्रिप्ट का उपयोग करते हैं।

उदाहरण के लिए:

iFrame.focus() 
iFrame.document.execCommand("insertImage", "", "fakeimage.jpg") 
iFrame.document.body.innerHTML=iFrame.document.body.innerHTML.replace("<img src=\"fakeimage.jpg\">", "MY CUSTOM <b>HTML</b> HERE!") 

iFrame जबकि इच्छित iFrame के आईडी के बराबर है। या, आप document.getElementById ("IDofDIVlayer") का उपयोग कर एक डीआईवी परत का उपयोग कर सकते हैं। आंतरिक HTML

execCommand को कॉल करने से पहले ध्यान केंद्रित करना सुनिश्चित करें, अन्यथा यह IE में काम नहीं कर सकता है।

यह विधि आईई में भी काम करती है। का परीक्षण किया।

Answer 4

यहां एक क्रॉस-ब्राउज़र उदाहरण है, जो this answer से आईफ़्रेम के साथ काम करने के लिए अनुकूलित किया गया है।

function pasteHtmlAtCaret(html, selectPastedContent, iframe) { 
    var sel, range; 
    var win = iframe ? iframe.contentWindow : window; 
    var doc = win.document; 
    if (win.getSelection) { 
     // IE9 and non-IE 
     sel = win.getSelection(); 
     if (sel.getRangeAt && sel.rangeCount) { 
      range = sel.getRangeAt(0); 
      range.deleteContents(); 

      // Range.createContextualFragment() would be useful here but is 
      // only relatively recently standardized and is not supported in 
      // some browsers (IE9, for one) 
      var el = doc.createElement("div"); 
      el.innerHTML = html; 
      var frag = doc.createDocumentFragment(), node, lastNode; 
      while ((node = el.firstChild)) { 
       lastNode = frag.appendChild(node); 
      } 
      var firstNode = frag.firstChild; 
      range.insertNode(frag); 

      // Preserve the selection 
      if (lastNode) { 
       range = range.cloneRange(); 
       range.setStartAfter(lastNode); 
       if (selectPastedContent) { 
        range.setStartBefore(firstNode); 
       } else { 
        range.collapse(true); 
       } 
       sel.removeAllRanges(); 
       sel.addRange(range); 
      } 
     } 
    } else if ((sel = doc.selection) && sel.type != "Control") { 
     // IE < 9 
     var originalRange = sel.createRange(); 
     originalRange.collapse(true); 
     sel.createRange().pasteHTML(html); 
     if (selectPastedContent) { 
      range = sel.createRange(); 
      range.setEndPoint("StartToStart", originalRange); 
      range.select(); 
     } 
    } 
}