Warum ist mein Leerraumtextknoten nicht eingefügt?

Question

Um eine Sache zu verhindern, die der Browser eigentlich nicht tun soll, muss ich einen Knoten auf der linken Seite eines anderen Knotens einfügen. Was ich brauche, ist das resultierende HTML:

<div contenteditable="true"> 
    "&#8203;" 
    <div class="another-element-i-inserted"><!-- stuff --></div> 
</div> 

Das Problem ist, dass das, was ich tue mir eigentlich nur geben

<div contenteditable="true"> 
    <div class="another-element-i-inserted"><!-- stuff --></div> 
</div> 

Werfen Sie einen Blick, wie der Debugger an mir liegt:

Der verantwortliche Code ist:

Text textNode = Document.get().createTextNode(""); 
Element textNodeElement = textNode.cast(); 
textNodeElement.setInnerHTML("​"); 

this.pasteHtmlAtCaret(contenteditableDiv.getElement(), textNodeElement);   
this.pasteHtmlAtCaret(contenteditableDiv.getElement(), this.getElement()); 

wo pasteHtmlAtCaret() ist eigentlich ein native Methode aka JavaScript:

private native void pasteHtmlAtCaret(Element el, Element toInsert) /*-{ 
    var sel, range; 
    if ($wnd.getSelection) { 
     // IE9 and non-IE 
     sel = $wnd.getSelection(); 
     if (sel.getRangeAt && sel.rangeCount) { 
      range = sel.getRangeAt(0); 
      range.deleteContents(); 
      range.insertNode(toInsert); 
     } 
    } 
}-*/; 

Warum ist nicht der Textknoten richtig eingelegt? Das Problem, das ich ohne habe, dass Nullwhitespacezeichen ist, dass, wenn another-element-i-inserted das erste Element in einer Reihe ist, das Platzieren des Caret am Anfang wirklich das Caret innerhalb another-element-i-inserted setzt, das problematisch ist. Ich brauche den Cursor an * immer“in der contenteditable platziert werden

Irgendwelche Ideen/Vorschläge auf diesem

---

. Weitere Informationen:?

Hier können Sie sehen, wie die caret orange ist anstelle von black.Der Grund ist, weil das Caret tatsächlich innerhalb der zusätzlichen HTML-Inhalt ist

<div contenteditable="true" class="contenteditable-textarea"> 
    <div style="display: initial;"> 
     <input type="text" class="mention-textbox notransition" style="color: orange; width: 35px;" readonly="true"> 
    </div> 
</div> 

Answer 1

Du innerHTML auf einem Textknoten einstellen, das wird nicht funktionieren: das schafft nur eine expando Eigenschaft auf dem Knoten ohne besondere Bedeutung oder Verhalten. Sie müssen die data Eigenschaft festlegen; und anstelle eines HTML-Zeichenverweises verwenden Sie einfach dieses Zeichen in Ihrer Quelle oder verwenden Sie eine Java-Escape-Sequenz.