7

I want to get cursor position or the location from RichTextArea. I do not know how to get current cursor position Without any mouse event.

e.g. TextArea has method getCursorPos(), but RichTextArea does not have method like TextArea.

Anyone have any idea?

Thanks in advance...

General Grievance
  • 4,555
  • 31
  • 31
  • 45
milind_db
  • 1,274
  • 5
  • 34
  • 56

4 Answers4

2

If you you want to insert something in the RichTextArea at the cursor position, you can do it with the formatter:

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

To find a cursor position using JavaScript, try the solution proposed by Tim Down:

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

Community
  • 1
  • 1
Andrei Volgin
  • 40,755
  • 6
  • 49
  • 58
  • 1
    This does not work! Try setting the value to "0123456789" and then moving the cursor to the end. You will see the value 6 instead of 10. – yazz.com Nov 06 '12 at 08:40
  • @Andrei , Should i send RichTextArea as element when calling getSelection().. I am sending my RichTextArea while calling getSelection(), I am getting exception null – junaidp Jun 19 '14 at 15:28
  • this returns the index starting from 0 for every line , if i am at third line ad 4th word, it will say 4th index, And its ignoring the above three lines, thats not correct – junaidp Jun 22 '14 at 06:27
  • I removed the code that does not meet all use cases and suggested a different solution. – Andrei Volgin Jun 22 '14 at 07:49
1

In Vaadin 7.5 @AndreiVolgin answer seems not working. But if somebody wants only to paste some text in cursor position, then CKEditor wrapper for Vaadin add-on may help (link).

Here is an example for posterity:

CKEditorTextField textArea;
// and for example in some listener function we could call:
textArea.insertHtml("<b>some html</b>");
textArea.insertText("sample text");
jsosnowski
  • 1,560
  • 3
  • 26
  • 56
0

Don't know if this is still required, but I have been trying to do exactly the same today and could not really find a definitive answer. I did find this non-GWT solution (Get caret (cursor) position in contentEditable area containing HTML content), which needed tweaking everso slightly. Hope this helps someone.

    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;
}-*/;
Community
  • 1
  • 1
Tim Hill
  • 31
  • 7
0

Try this out, worked for me. basically you insert a unique text in the rich text area, then you get the index of the inserted text then you remove it.

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