Javascript - Get Element hinter caret in Kind Elemente von [contenteditable]

Question

Ich bin ein einfacher und einfach zu bedienender Texteditor in Javascript, im Grunde ein WYSIWYG-Editor. Ich werde das contenteditable Attribut zum Hauptwrapper benutzen (.wrapper). Wenn Sie in das Feld .wrapper drücken, wird ein neues <p> Element mit einem eindeutigen id an den Wrapper angehängt.

Ich brauche einen Weg, um das Kind-Element der .wrapper, die gerade ausgewählt ist (d. H., Wird fokussiert oder mit der Caretze/Text-Marker innerhalb davon).

Ich habe Tage ohne Ergebnisse gesucht, und ich habe versucht, document.elementFromPoint(), aber ohne ordnungsgemäße Ergebnisse.

Bei der Verwendung $(":focus"), bekomme ich die gesamte .wrapper und nicht das spezifische untergeordnete Element.

Edit:

Beispiel HTML-Struktur:

<div class="container t-wrapper" contenteditable> 
</div> 

Beispiel Javascript-Code:

$(document).ready(function() { 
    $currentElement = $("[contenteditable]"); 

    $(".t-wrapper").each(function() { 
     var id = generateIdentifier(6); // Ignore this 

     /* This creates the initial <p> child element, where you start typing. */ 
     $(this).html('<p class="t-empty t-first" id="' + id + '"></p>'); 

     $(this).on("mouseup", function() { 
      /* $currentElement = whatever element the caret is inside. */ 
     }); 

     $(this).on("keyup", function() { 
      /* $currentElement = whatever element the caret is inside. */ 
     }); 
    )); 
}); 

Edit 2:

ich es geschafft, zu ge t es funktioniert ziemlich mit dem mouseup Ereignis, da Sie tatsächlich auf etwas klicken. Aber ich brauche das, um den Caret mit der Tastatur zu bewegen. Alternativ benötige ich einen Weg, um die Position des Caret in Pixeln zu erhalten, und dann document.elementFromPoint() zu verwenden, um das spezifische Element zu erhalten.

Answer 1

document.activeElement wird das aktuell fokussierte Element zurückgeben.

Answer 2

:focus wählt nicht Ihre Elemente aus, weil sie nicht fokussierbar sind. Sie können sie fokussierbar machen, indem Sie tabindex="-1" in HTML oder tabIndex = -1 in JS hinzufügen.

var generateIdentifier = Math.random; 
 
var currentElement = document.querySelector("[contenteditable]"); 
 
[].forEach.call(document.querySelectorAll(".t-wrapper"), function(el) { 
 
    var first = document.createElement('p'); 
 
    first.className = "t-empty t-first"; 
 
    first.id = generateIdentifier(6); 
 
    first.textContent = 'Press enter to create new paragraphs'; 
 
    first.tabIndex = -1; 
 
    el.appendChild(first); 
 
});

.container > :focus { 
 
    border: 1px solid blue; 
 
}

<div class="container t-wrapper" contenteditable></div>

Es scheint, dass, wenn man es auf den ersten Absatz hinzufügen, neue Absätze automatisch erhalten. Aber wenn Sie wollen sicher sein, ich denke, man eine Mutation Beobachter verwenden könnte oder ein keyup Ereignis-Listener Absätzen zu erfassen, ohne tabindex, und fügen Sie es:

el.addEventListener("keyup", function(e) { 
    var newChild = el.querySelector('p:not([tabindex])'); 
    if(newChild) newChild.tabIndex = -1; 
});