我正在编写一个基于 Web 的代码编辑器,其中每一行都是内容可编辑的 div。我编写了一个本地方法来设置给定索引上的插入符号位置,但它仅适用于 chrome。Opera 和 firefox 总是在一行的开头设置插入符号。
public native void setCursorPos(int index) /*-{
//console.log(index);
var that = this.@edu.pg.client.CodeLine::getElement()();
var position = index;
var el = that;
var treeWalker = document.createTreeWalker(el, NodeFilter.SHOW_TEXT,
function(el) {
return NodeFilter.FILTER_ACCEPT;
}, false);
while (treeWalker.nextNode()) {
if (position - treeWalker.currentNode.length <= 0) {
var range = document.createRange();
var sel = window.getSelection();
console.log(position);
range.setStart(treeWalker.currentNode, position);
range.setEnd(treeWalker.currentNode, position);
range.collapse(true);
sel.removeAllRanges();
sel.addRange(range);
el.focus();
return;
} else {
position = position - treeWalker.currentNode.length;
}
}
在测试代码时,我正在使用这个http://jsbin.com/EcETajo/5/edit ,它适用于 chrome、ff 和 opera。
是函数错误还是 gwt 生成的代码更改了插入符号位置?
编辑:我使用treewalker,因为我想通过在未来将文本包装在跨度节点中来处理文本突出显示
EDIT2:好的,我自己发现了一个问题。
var range = document.createRange(); var sel = window.getSelection();
这些台词是错误的。gwt 中的 js 代码在 iframe 中,因此要访问我的 html 元素,我必须使用类似 var range = $doc.createRange(); var sel = $doc.getSelection(); $doc 是 gwt 设置的变量