GWT在内容可编辑div上设置插入位置

时间:2013-10-27 21:19:54

标签: javascript gwt

我正在编写一个基于Web的代码编辑器,其中每一行都是一个内容可编辑的div。 我写了一个本地方法来设置给定索引上的插入位置,但它只适用于chrome。歌剧和火狐总是把插入点放在一条线上。

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,因为我希望将来通过在span节点中包装文本来处理文本高亮显示

EDIT2:好的,我自己发现了一个问题。

var range = document.createRange(); var sel = window.getSelection();

那些线条错了。 gwt中的js代码在iframe中,所以要访问我的html元素,我必须使用这样的东西                 var range = $ doc.createRange();                 var sel = $ doc.getSelection(); wher $ doc是由gwt

设置的变量

1 个答案:

答案 0 :(得分:1)

在gwt本地方法中正确使用文档和窗口对象是使用由gwt框架设置的$ wnd和$ doc