如何从 GWT 中的 RichTextArea 获取光标位置或位置？答案

【问题标题】：How to get cursor position or location from RichTextArea in GWT?如何从 GWT 中的 RichTextArea 获取光标位置或位置？
【发布时间】：2012-09-14 14:01:10
【问题描述】：

我想从 RichTextArea 获取光标位置或位置。我不知道如何在没有任何鼠标事件的情况下获取当前光标位置。

例如TextArea 有 getCursorPos() 方法，但 RichTextArea 没有 TextArea 之类的方法。

有人知道吗？

提前谢谢...

【问题讨论】：

标签： java gwt textarea richtextbox text-cursor

【解决方案1】：

如果你想在RichTextArea的光标位置插入一些东西，你可以用格式化器来做：

RichTextArea.Formatter formatter = richText.getFormatter();
formatter.insertHTML("My text is inserted at the cursor position");

要使用 JavaScript 查找光标位置，请尝试 Tim Down 提出的解决方案：

Get a range's start and end offset's relative to its parent container

【讨论】：

这不起作用！尝试将值设置为“0123456789”，然后将光标移动到末尾。您将看到值 6 而不是 10。
@Andrei，我应该在调用 getSelection() 时将 RichTextArea 作为元素发送。我在调用 getSelection() 时发送我的 RichTextArea，我收到异常 null
这会返回每行从 0 开始的索引，如果我在第三行广告第 4 个单词，它会说第 4 个索引，而忽略上述三行，这是不正确的
我删除了不满足所有用例的代码并提出了不同的解决方案。

【解决方案2】：

在 Vaadin 7.5 @AndreiVolgin 答案似乎不起作用。但是如果有人只想在光标位置粘贴一些文本，那么 CKEditor wrapper for Vaadin 插件可能会有所帮助 (link)。

这是一个后代的例子：

CKEditorTextField textArea;
// and for example in some listener function we could call:
textArea.insertHtml("<b>some html</b>");
textArea.insertText("sample text");

【讨论】：

【解决方案3】：

不知道这是否仍然需要，但我今天一直在尝试做同样的事情，但无法真正找到明确的答案。我确实找到了这个非 GWT 解决方案 (Get caret (cursor) position in contentEditable area containing HTML content)，它需要稍微调整一下。希望这对某人有所帮助。

    public static native int getCursor(Element elem) /*-{
    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 nodeRange.compareBoundaryPoints(Range.END_TO_END, range) < 1 ? NodeFilter.FILTER_ACCEPT
                : NodeFilter.FILTER_REJECT;
    }, false);

    var charCount = 0;
    while (treeWalker.nextNode()) {
        charCount += treeWalker.currentNode.length;
    }

    if (range.startContainer.nodeType == 3) {
        charCount += range.startOffset;
    }

    return charCount;
}-*/;

【讨论】：

【解决方案4】：

试试这个，对我有用。基本上你在富文本区域插入一个唯一的文本，然后你得到插入文本的索引然后你删除它。

    richText=new RichTextArea();
    basicFormatter=richText.getFormatter();
    basicFormatter.insertHTML("dummydata");
    int cursor=richText.getText().indexOf("dummydata");
    basicFormatter.undo();

【讨论】：