[javascript] Editar html seleccionado | Randy |

[patilanz]

Hola necesito ayuda con las selecciones del os usuario y su edición para agregar texto o elementos html. Con la librería randy https://code.google.com/p/rangy/wiki/RangySelection#Introduction se puede hacer y es compatible con todos los navegador pero yo quiero saber como funciona y todas las funciones de los distintos navegadores.
Ejemplo de randy; http://rangy.googlecode.com/svn/trunk/demos/core.html


He buscado pero es un lió y un poco desactualizado. Alguien me recomienda un tuto ?

Un saludo

[Usuario Invitado]

¿Qué es exactamente lo que deseas hacer? Supongo que algo complicado para usar una biblioteca externa.

[patilanz]

Crear una pagina que te permite crear paginas pero necesito javascript para permitir editar elementos de la pagina que tienen el atributo contenteditable y aparte un menú que te permite agregar elementos en la pagina pero para esto necesito ver donde esta el foco, si hay algo seleccionado, agregar elementos ...

Supongo que algo complicado para usar una biblioteca externa.

No quiero usar la librería pero quiero saber como funcionan sus métodos y funciones en todos los navegadores. Quiero un tutorial sobre funciones como document.getSelection.

[MinusFour]

Crear una pagina que te permite crear paginas pero necesito javascript para permitir editar elementos de la pagina que tienen el atributo contenteditable y aparte un menú que te permite agregar elementos en la pagina pero para esto necesito ver donde esta el foco, si hay algo seleccionado, agregar elementos ...

No quiero usar la librería pero quiero saber como funcionan sus métodos y funciones en todos los navegadores. Quiero un tutorial sobre funciones como document.getSelection.

No todos los elementos pueden ser enfocados y no todo el espacio es ocupado por los elementos. Lo que puedes hacer es simplemente usar una variable para sacar el "foco". Para algunos elementos puedes usar click en lugar de focus, i.e.:

http://jsfiddle.net/khmkz33c/

[patilanz]

Gracias por tu respuesta pero no me refiria a esto, puedes ver el ejemplo aquí http://rangy.googlecode.com/svn/trunk/demos/core.html

[MinusFour]

Gracias por tu respuesta pero no me refiria a esto, puedes ver el ejemplo aquí http://rangy.googlecode.com/svn/trunk/demos/core.html

¿Quieres saber la posicion del cursor sobre el texto? Para contenido editable si es posible (inputs, contenteditable).

http://jsfiddle.net/xw4u4ut9/

No estoy seguro si getSelection funcione dentro de inputs, me parece que ahi se usa selectionStart.

[Usuario Invitado]

Sí, como dice MinusFour, con selectionStart obtienes la posición del cursor en un textbox. Puedes ver un ejemplo aquí

[patilanz]

Vale y por ejemplo supongamos que el usuario selecciona la algo como esto:

Código (html4strict) [Seleccionar] Expandir

hola <div>que </div><button>tal?</div>

Es un div que contiene otro div y un button pero el usuario selecciona solo la mitad del div padre. Yo quiero eliminar esta parte e insertar otro nodo dentro del div padre eliminando al button y al div hijo seleccionados.

También esta el problema de que de getSelection solo es compatible desde ie 9 en 8 no funciona.

[MinusFour]

Vale y por ejemplo supongamos que el usuario selecciona la algo como esto:

Código (html4strict) [Seleccionar] Expandir

hola <div>que </div><button>tal?</div>

Es un div que contiene otro div y un button pero el usuario selecciona solo la mitad del div padre. Yo quiero eliminar esta parte e insertar otro nodo dentro del div padre eliminando al button y al div hijo seleccionados.

También esta el problema de que de getSelection solo es compatible desde ie 9 en 8 no funciona.

Si de verdad te preocupa la compatibilidad mejor usas Rangy (no randy). En cuanto a como borrar texto de una seleccion:

https://developer.mozilla.org/en-US/docs/Web/API/Selection/deleteFromDocument

[patilanz]

Bueno es que quiero saber los métodos y maneras de hacer lo en todos los navegadores. Creo que tengo que buscar las maneras y adoptarlo por mi cuenta.