2010-08-10 13 views
18

¿Alguien sabe de alguna biblioteca de rango de selección de usuarios entre navegadores escrita en javascript?Cross Browser Selection ¿Biblioteca de rango?

He encontrado algunos plugins de jQuery, (que francamente son demasiado limitantes y muy defectuosos). ya he implementado y estoy usando el siguiente de quitar algunos de mis trucos:

http://plugins.jquery.com/project/wrapSelection http://perplexed.co.uk/1020_text_selector_jquery_plugin.htm

y algunos otros pequeños scripts y tal.

Me gustaría saber lo que ha descubierto. No me envíe de nuevo a Google, (he pasado días trabajando en todo esto). Con suerte, es aquí donde los futuros programadores puedan encontrar la respuesta.

+1

Ambos de sus enlaces 'http: //plugins.jquery. com/project/wrapSelection' y 'http: // perplexed.co.uk/1020_text_selector_jquery_plugin.htm' ya no funcionan. ¿Puedes actualizarlos? – John

+0

actualice sus enlaces, por favor – Anthony

Respuesta

37

He desarrollado una biblioteca de rango y selección entre exploradores llamada Rangy. Su núcleo no es diferente en concepto a IERange, pero va más allá en términos de la implementación de las especificaciones de selección DOM DOMINIO 2 nivel y HTML5, y también en términos de estabilidad y soluciones para los errores del navegador. Creo que es lo mejor que hay por ahí.

También hay módulos adicionales para guardar, restaurar y serializar selecciones y aplicar clase CSS a rangos y selecciones.

https://github.com/timdown/rangy

los siguientes usos algunas extensiones a los rangos alto y delgado para recorrer fácilmente a través de los nodos de texto dentro de una selección y rodear cada uno:

function surroundSelectedText(templateElement){ 
    var range, sel = rangy.getSelection(); 
    var ranges = sel.getAllRanges(); 
    var textNodes, textNode, el, i, len, j, jLen; 
    for (i = 0, len = ranges.length; i < len; ++i) { 
     range = ranges[i]; 
     // If one or both of the range boundaries falls in the middle 
     // of a text node, the following line splits the text node at the 
     // boundary 
     range.splitBoundaries(); 

     // The first parameter below is an array of valid nodeTypes 
     // (in this case, text nodes only) 
     textNodes = range.getNodes([3]); 

     for (j = 0, jLen = textNodes.length; j < jLen; ++j) { 
      textNode = textNodes[j]; 
      el = templateElement.cloneNode(false); 
      textNode.parentNode.insertBefore(el, textNode); 
      el.appendChild(textNode); 
     } 
    } 
} 

var span = document.createElement("span"); 
span.style.color = "green"; 
span.style.fontWeight = "bold"; 

surroundSelectedText(span); 
+0

¡Maravilloso! Le echaré un vistazo. – UpHelix

+0

Una vez que tenga soporte para el ajuste de rangos con tramos esto será, (en mi conocimiento) característica completa. Publique contenido cuando libere esa parte del código. Lamentablemente, tengo que arreglarlo y completarlo dentro de un día más o menos. – UpHelix

+0

Publicaremos un ejemplo un poco más tarde ... –

1

Para el trabajo de rango general (a diferencia del manejo de selección de entrada/texto), considere ierange. Intenta implementar el modelo estándar DOM Range 2 Range compatible con otros navegadores en IE. Tipo de obras.

+0

Una de las principales características que necesito es rodear una selección con un lapso de tiempo. Este código puede hacer eso, pero no maneja el ajuste de un lapso alrededor de una selección que se superpone a otras etiquetas finales. – UpHelix

+1

Bueno, tal cosa sería imposible, por supuesto! Un lapso, como cualquier elemento, debe tener un único padre. Si desea agregar un resaltado a un tramo de texto cuyos puntos finales no están dentro del mismo elemento, debe caminar sobre cada elemento en la selección agregando un elemento '' separado alrededor de cada elemento cuyo elemento primario no está completamente contenido dentro de la selección. (O puede hacerlo simplemente envolviendo cada nodo de texto que no sea de espacio en blanco entre los puntos finales.) – bobince

+0

He avanzado en la implementación de una función en Rangy (ver mi respuesta) que aplicará el formato a una selección rodeando cada nodo de texto dentro de la selección con un intervalo, también eliminando y fusionando tramos idénticos adyacentes cuando corresponda. Espero lanzar eso en unas pocas semanas. –

2

Para la opción del complemento jQuery hay jCaret, puede consultar homepage here y examples here.

Lo he usado en algunos proyectos para varias aplicaciones, funciona bien para eliminar las inconsistencias entre navegadores.

+0

Se ve muy bien, sin embargo, solo funciona en entradas y áreas de texto. He estado trabajando en convertirlo para trabajar en cualquier elemento pero aún no hay dados.Una de las principales características es que necesito poder abarcar los tramos (y cualquier otro elemento que especifique) en torno a una selección de usuario. El código wrapSelection (http://plugins.jquery.com/project/wrapSelection) funciona perfecto y lo he modificado para mis necesidades, sin embargo, el código por alguna razón no funciona en IE8, aunque cuenta con soporte para ES DECIR. – UpHelix

+0

Los enlaces no funcionan. – John