如何在GWT RichTextArea中设置光标位置

Question

在GWT RichTextArea中有没有设置光标位置的方法。在TextArea中有一个方法setCusrorPosition()可以实现此功能，但在RichTextArea中没有。

也许有一种本地JavaScript（从GWT调用）可以在RichTextArea中设置光标位置？

- Nitish Borade

Answer 1

您是正确的，RichTextArea并没有提供setSelectionRange方法，但我使用JSNI创建了一个。

以下是该方法：

public native void setSelectionRange(Element elem, int pos, int length) /*-{
    try {
        var selection = null, range2 = null;
        var iframeWindow = elem.contentWindow;
        var iframeDocument = iframeWindow.document;

        selection = iframeWindow.getSelection();
        range2 = selection.getRangeAt(0);

        //create new range
        var range = iframeDocument.createRange();
        range.setStart(selection.anchorNode, pos);
        range.setEnd(selection.anchorNode, length);

        //remove the old range and add the newly created range
        if (selection.removeRange) { // Firefox, Opera, IE after version 9
            selection.removeRange(range2);
        } else {
            if (selection.removeAllRanges) { // Safari, Google Chrome
                selection.removeAllRanges();
            }
        }
        selection.addRange(range);
    } catch (e) {
        $wnd.alert(e);
    }
}-*/;

使用上述方法，请编写以下代码：

final RichTextArea tr = new RichTextArea();
    Button b = new Button("Test");
    b.addClickHandler(new ClickHandler() {

        @Override
        public void onClick(ClickEvent event) {
            setSelectionRange(tr.getElement(), 15, 20);
            tr.setFocus(true);
        }
    });
    RootPanel.get().add(tr);
    RootPanel.get().add(b);

注意：在使用setSelectionRange()方法时，请务必验证您传递的“pos”和“length”参数。 此代码已经在IE9、FF和Chrome中进行了测试。

- vbjain

---

这在GWT 2.5中对我不起作用。它移动了光标，但是不可预测。长度参数影响光标位置，并且选择永远不是范围，只会移动光标（没有高亮显示）。 - Zip184

一个可编辑的 div 可以代替一个富文本区域（richtextarea）。 - Nitish Borade

Answer 2

不确定是否仍需要，但我一整天都在尝试让它工作，最终成功地通过黑客手段找到了解决方案。这仅在Chrome / Safari中进行了测试。希望能对某些人有所帮助。

public static native void setCursor(Element elem, int pos, int length) /*-{
    var node = elem.contentWindow.document.body;
    var range = elem.contentWindow.getSelection().getRangeAt(0);

    var treeWalker = $doc.createTreeWalker(node, NodeFilter.SHOW_TEXT, function(node) {
        var nodeRange = $doc.createRange();
        nodeRange.selectNodeContents(node);
        return NodeFilter.FILTER_ACCEPT;
    });

    var charCount = 0;
    while (treeWalker.nextNode()) {
        if (charCount + treeWalker.currentNode.length > pos)
            break;

        charCount += treeWalker.currentNode.length;
    }

    var newRange = elem.contentWindow.document.createRange();
    newRange.setStart(treeWalker.currentNode, 1);
    newRange.setEnd(treeWalker.currentNode, 1);

    var selection = elem.contentWindow.getSelection();

    if (selection.removeRange) { // Firefox, Opera, IE after version 9
        selection.removeRange(range);
    } else if (selection.removeAllRanges) { // Safari, Google Chrome
        selection.removeAllRanges();
    }

    selection.addRange(newRange);
}-*/;

这段代码在2016年11月28日进行了编辑，以更正一些小的语法错误。

- Tim Hill