Чтобы предотвратить то, что браузер фактически не должен делать, мне необходимо вставить узел 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
Любые идеи/предложения по этому
Дополнительная информация:.?
Здесь вы можете увидеть, как каретка является 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>