एक contenteditable div जो छवियों

Question

मैं इस contentedittable div

<div contenteditable="true" id="text">minubyv<img src="images/smiley/Emoji Smiley-01.png" class="emojiText" />iubyvt</div> 

यहाँ है शामिल की कैरट स्थिति पाने के लिए

तो मैं कैरट प्राप्त करना चाहते हैं कोड उत्पादन की एक छवि वर्णन है div की स्थिति और मान लें कि कर्सर अंतिम चरित्र के बाद है। और यह कैरट स्थिति

function getCaretPosition(editableDiv) { 
    var caretPos = 0, 
    sel, range; 
    if (window.getSelection) { 
    sel = window.getSelection(); 
    if (sel.rangeCount) { 
     range = sel.getRangeAt(0); 
     if (range.commonAncestorContainer.parentNode == editableDiv) { 
     caretPos = range.endOffset; 
     } 
    } 
    } else if (document.selection && document.selection.createRange) { 
    range = document.selection.createRange(); 
    if (range.parentElement() == editableDiv) { 
     var tempEl = document.createElement("span"); 
     editableDiv.insertBefore(tempEl, editableDiv.firstChild); 
     var tempRange = range.duplicate(); 
     tempRange.moveToElementText(tempEl); 
     tempRange.setEndPoint("EndToEnd", range); 
     caretPos = tempRange.text.length; 
    } 
    } 
    return caretPos; 
} 

var update = function() { 
    console.log(getCaretPosition(this)); 
}; 
$('#text').on("mousedown mouseup keydown keyup", update); 

प्राप्त करने के लिए अपना कोड है लेकिन समस्या यह है कि यह रिटर्न 6 बजाय 14 है। छवि के बाद देखभाल स्थिति 0 पर वापस जाती है। कृपया इस मामले में कैरेट की स्थिति 14 होने का एक तरीका है।

संपादित

मैं भी कुछ तत्व कैरट स्थिति से शुरू सम्मिलित करना चाहते हैं। तो यह है कि

selectStart = 0; 
var update = function() { 
    selectStart = getCaretPosition(this); 
}; 
function insertEmoji(svg){ 
    input = $('div#text').html(); 
    beforeCursor = input.substring(0, selectStart); 
    afterCursor = input.substring(selectStart, input.length); 
    emoji = '<img src="images/smiley/'+svg+'.png" class="emojiText" />'; 
    $('div#text').html(beforeCursor+emoji+afterCursor); 
} 

Answer 1

देखें Get a range's start and end offset's relative to its parent container पर Tim Down's जवाब करने के लिए मेरे कार्य है।

function getCaretCharacterOffsetWithin(element) { 
 
    var caretOffset = 0; 
 
    var doc = element.ownerDocument || element.document; 
 
    var win = doc.defaultView || doc.parentWindow; 
 
    var sel; 
 
    if (typeof win.getSelection != "undefined") { 
 
     sel = win.getSelection(); 
 
     if (sel.rangeCount > 0) { 
 
      var range = win.getSelection().getRangeAt(0); 
 
      var preCaretRange = range.cloneRange(); 
 
      preCaretRange.selectNodeContents(element); 
 
      preCaretRange.setEnd(range.endContainer, range.endOffset); 
 
      caretOffset = preCaretRange.toString().length; 
 
     } 
 
    } else if ((sel = doc.selection) && sel.type != "Control") { 
 
     var textRange = sel.createRange(); 
 
     var preCaretTextRange = doc.body.createTextRange(); 
 
     preCaretTextRange.moveToElementText(element); 
 
     preCaretTextRange.setEndPoint("EndToEnd", textRange); 
 
     caretOffset = preCaretTextRange.text.length; 
 
    } 
 
    return caretOffset; 
 
} 
 

 
var update = function() { 
 
    console.log(getCaretCharacterOffsetWithin(this)); 
 
}; 
 
$('#text').on("mousedown mouseup keydown keyup", update);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div contenteditable="true" id="text">minubyv<img src="https://themeforest.net/images/smileys/happy.png" class="emojiText" />iubyvt</div>

मैं अपने खुद के समारोह में लिखा था, टिम डाउन पर आधारित है, यह है कि आप की तरह काम करता है: समारोह का उपयोग करने के

कोशिश वह इस तरह नेस्टेड तत्वों के साथ चयन सूचकांक प्राप्त करने के लिए है यह चाहता हूँ। मैंने treeWalker को NodeFilter.ELEMENT_NODE फ़िल्टर करने के लिए NodeFilter.SHOW_TEXT को फ़िल्टर करने के लिए बदल दिया, और अब <img/> तत्व भी हमारे लूप के अंदर संसाधित हो जाते हैं। मैं range.startOffset को संग्रहीत करके शुरू करता हूं और फिर सभी चयन पेड़ नोड्स के माध्यम से पुन: प्रयास करता हूं। यदि यह img नोड पाता है, तो यह स्थिति में केवल 1 जोड़ता है; यदि वर्तमान नोड तत्व हमारे range.startContainer से अलग है, तो यह उस नोड की लंबाई को जोड़ता है। स्थिति को एक अलग चर lastNodeLength द्वारा बदला जाता है जो प्रत्येक लूप पर charCount में जोड़ता है। आखिरकार, lastNodeLength में charCount में जो कुछ भी बचा है, वह लूप मौजूद है और हमारे पास छवि तत्वों सहित सही अंतिम देखभाल स्थिति है।

अंतिम काम कर कोड(यह बिल्कुल के रूप में यह होना चाहिए अंत में रिटर्न 14, और आप चाहते हैं)

function getCharacterOffsetWithin_final(range, node) { 
 
    var treeWalker = document.createTreeWalker(
 
     node, 
 
     NodeFilter.ELEMENT_NODE, 
 
     function(node) { 
 
      var nodeRange = document.createRange(); 
 
      nodeRange.selectNodeContents(node); 
 
      return nodeRange.compareBoundaryPoints(Range.END_TO_END, range) < 1 ? 
 
       NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT; 
 
     }, 
 
     false 
 
    ); 
 

 
    var charCount = 0, lastNodeLength = 0; 
 

 
    if (range.startContainer.nodeType == 3) { 
 
     charCount += range.startOffset; 
 
    } 
 

 
    while (treeWalker.nextNode()) { 
 
     charCount += lastNodeLength; 
 
     lastNodeLength = 0; 
 
     
 
     if(range.startContainer != treeWalker.currentNode) { 
 
      if(treeWalker.currentNode instanceof Text) { 
 
       lastNodeLength += treeWalker.currentNode.length; 
 
      } else if(treeWalker.currentNode instanceof HTMLBRElement || 
 
         treeWalker.currentNode instanceof HTMLImageElement /* || 
 
         treeWalker.currentNode instanceof HTMLDivElement*/) 
 
      { 
 
       lastNodeLength++; 
 
      } 
 
     } 
 
    } 
 
    
 
    return charCount + lastNodeLength; 
 
} 
 

 
var update = function() { 
 
    var el = document.getElementById("text"); 
 
    var range = window.getSelection().getRangeAt(0); 
 
    console.log("Caret pos: " + getCharacterOffsetWithin_final(range, el)) 
 
}; 
 
$('#text').on("mouseup keyup", update);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div contenteditable="true" id="text">minubyv<img contenteditable="true" src="https://themeforest.net/images/smileys/happy.png" class="emojiText" />iubyvt</div>