Cómo establecer la posición de la curva en GWT RichTextArea

Question

¿Hay alguna manera de establecer la posición de cusror en GWT RichTextArea? Hay método setCusrorPosition() para hacerlo en TextArea, pero no en RichTextArea. Quizás haya un JavaScript nativo (llamado desde GWT) que podría establecer la posición del cursor en RichTextArea?

Answer 1

Tiene razón RichTextArea no proporciona el método setSelectionRange, pero he creado uno con JSNI.

A continuación se muestra el método,

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

Para el uso anterior método de escritura por debajo de código:

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

Nota: recuerde poner las comprobaciones de validación de "POS" y "longitud" que son pasando el método setSelectionRange(). Este código ha sido probado en IE9, FF, Chrome.

Answer 2

No estoy seguro si esto todavía es necesario, pero he estado tratando de hacerlo funcionar todo el día y finalmente he logrado abrirme camino hacia una solución. Esto solo ha sido probado en Chrome/Safari. Espero que ayude a alguien.

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

Este código fue editado el 28 de noviembre de 2016 para corregir errores de sintaxis menores.