1

すべての行がコンテンツ編集可能な div である Web ベースのコード エディターを作成しています。特定のインデックスにキャレットの位置を設定するネイティブ メソッドを作成しましたが、クロムでしか機能しません。オペラとファイアフォックスは、常に行頭にキャレットを設定します。

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 で生成されたコードの何かがキャレットの位置を変更していますか?

EDIT：将来、スパンノードでテキストをラップしてテキストのハイライトを処理したいので、treewalkerを使用しています

EDIT2：わかりました、私は自分で問題を見つけました。

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

それらの行は間違っていました。gwt の js コードは iframe にあるため、html 要素にアクセスするには、この var range = $doc.createRange(); のようなものを使用する必要がありました。var sel = $doc.getSelection(); $doc は gwt によって設定される変数です

4

1 に答える 1

2

gwt ネイティブ メソッドでドキュメントとウィンドウ オブジェクトを適切に使用するには、gwt フレームワークによって設定される $wnd と $doc を使用します。

于 2013-10-28T16:48:54.957 に答える