Keep Caret-Position in contenteditable

Question

Ich versuche, eine Containerfeldkomponente zu erstellen, ich verwende das HTML-Attribut contenteditable, aber wenn ich den innerHTML Wert meiner Komponente ersetzen, setzt der Cursor (Caret) es zurück auf Position 0. Gibt es eine Möglichkeit, die Cursorposition beizubehalten?

Sein aussehen wie folgt aus:

Answer 1

Ich fand reale die Lösung in einem anderen Thema: How to set caret(cursor) position in contenteditable element (div)?

Hier ist der Code:

function createRange(node, chars, range) { 
    if (!range) { 
     range = document.createRange() 
     range.selectNode(node); 
     range.setStart(node, 0); 
    } 

    if (chars.count === 0) { 
     range.setEnd(node, chars.count); 
    } else if (node && chars.count >0) { 
     if (node.nodeType === Node.TEXT_NODE) { 
      if (node.textContent.length < chars.count) { 
       chars.count -= node.textContent.length; 
      } else { 
       range.setEnd(node, chars.count); 
       chars.count = 0; 
      } 
     } else { 
      for (var lp = 0; lp < node.childNodes.length; lp++) { 
       range = createRange(node.childNodes[lp], chars, range); 

       if (chars.count === 0) { 
        break; 
       } 
      } 
     } 
    } 

    return range; 
}; 

function setCurrentCursorPosition(element,chars) { 
    if (chars >= 0) { 
     var selection = window.getSelection(); 

     range = createRange(element.parentNode, { count: chars }); 

     if (range) { 
      range.collapse(false); 
      selection.removeAllRanges(); 
      selection.addRange(range); 
     } 
    } 
}; 

function isChildOf(node, parentId) { 
    while (node !== null) { 
     if (node.id === parentId) { 
      return true; 
     } 
     node = node.parentNode; 
    } 

    return false; 
}; 

function getCurrentCursorPosition(parentId) { 
    var selection = window.getSelection(), 
     charCount = -1, 
     node; 

    if (selection.focusNode) { 
     if (isChildOf(selection.focusNode, parentId)) { 
      node = selection.focusNode; 
      charCount = selection.focusOffset; 

      while (node) { 
       if (node.id === parentId) { 
        break; 
       } 

       if (node.previousSibling) { 
        node = node.previousSibling; 
        charCount += node.textContent.length; 
       } else { 
        node = node.parentNode; 
        if (node === null) { 
         break; 
        } 
       } 
      } 
     } 
    } 

    return charCount; 
};