为了防止浏览器实际上不应该做的事情,我需要在另一个节点的左侧插入一个Text
节点。我需要的是生成的 HTML:
<div contenteditable="true">
"​"
<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>
最佳答案
您在文本节点上设置 innerHTML
是行不通的:这只会在节点上创建一个 Expando 属性,没有特殊含义或行为。您需要设置data
属性;并且只需在源代码中使用该字符或使用 Java 转义序列即可代替 HTML 字符引用。
关于javascript - 为什么我的空白文本节点没有插入?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36840501/