为什么我的空白文本节点没有插入？

Question

为了防止浏览器实际上不应该这样做，我需要在另一个节点的 left 侧插入Text节点。我需要的是这个结果HTML：

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

问题在于我所做的实际上只是给了我

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

看看调试器对我说谎的方式：

负责的代码是：

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

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

其中pasteHtmlAtCaret()实际上是native方法，也就是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);
        }
    }
}-*/;

为什么文本节点没有正确插入？我有没有零空白字符的问题是，如果another-element-i-inserted是行中的第一个元素，将插入符号放在开头将实际将插入符号放在another-element-i-inserted内这是有问题的。我需要将插入符号“始终”放在contenteditable。

中

有关此的任何想法/建议吗？

更多信息：

您可以在此处查看插入符号orange而不是black。原因是插入符实际上在附加的HTML内容中

<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

您在文本节点上设置了innerHTML，这不会起作用：这只会在节点上创建一个没有特殊含义或行为的expando属性。您需要设置data属性;而不是HTML字符引用，只需在源代码中使用该字符或使用Java转义序列。