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

Question

为了防止浏览器实际上不应该做的事情，我需要在另一个节点的左侧插入一个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 中。

对此有什么想法/建议吗？

<小时/>

更多信息:

在这里您可以看到插入符号是橙色而不是黑色。原因是因为插入符号实际上位于附加 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属性；并且只需在源代码中使用该字符或使用 Java 转义序列即可代替 HTML 字符引用。