Cách đặt vị trí con trỏ trong GWT RichTextArea

Question

Có cách nào để đặt vị trí cusror trong GWT RichTextArea hay không. Có phương thức setCusrorPosition() để làm như vậy trong TextArea, nhưng không phải trong RichTextArea. Có lẽ có một JavaScript nguyên gốc (được gọi từ GWT) có thể đặt vị trí con trỏ trong RichTextArea?

Answer 1

Bạn nói đúng RichTextArea không cung cấp phương thức setSelectionRange, nhưng tôi đã tạo một phương thức bằng cách sử dụng JSNI.

Dưới đây là phương pháp,

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); 
    } 
}-*/; 

Để sử dụng phương pháp nêu trên ghi bên dưới mã:

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); 

Lưu ý: Hãy nhớ đặt kiểm tra xác nhận của "pos" và "chiều dài" bạn đi qua trong phương thức setSelectionRange(). Mã này đã được thử nghiệm trong IE9, FF, Chrome.

Answer 2

Không chắc chắn nếu điều này vẫn còn cần thiết, nhưng tôi đã cố gắng để có được điều này làm việc cả ngày và cuối cùng đã quản lý để hack theo cách của tôi đến một giải pháp. Điều này chỉ được thử nghiệm trong Chrome/Safari. Hy vọng nó sẽ giúp ai đó.

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); 
}-*/; 

Mã này đã được chỉnh sửa vào ngày 28 tháng 11 năm 2016 để sửa lỗi cú pháp nhỏ.