No funciona createRange en IE8

[Koke_Infortecnica]

Hola a todos .

Llevo unos días desesperado ya que no logro dar con la solución al problema.

La cuestion que no funciona bien el createRange en IE8 seleccionando solo con el cursor en el editor y no se porque .

El codigo que uso para crear la selección es este var

Código:

funcion x
{
oSel=this.selection

    if (!oSel) {
       oSel = Editor.document.selection.createRange()
       oSel.type = Editor.document.selection.type
    }
}

Luego recupero la funcion y lo que hago es lo siguiente

Código:

function insertarHTML(sHTML) 
{
 var sType
//llamo a la funcion que me da la selección
 var sel =x
 sType = sel.type
if (sType=="Control")
     sel.item(0).outerHTML = sHTML
else
{			
      sel.pasteHTML(sHTML)
	
}

Mi Editor es un div que permite editar no es un textarea.

Lo que me hace es que en cualquier version de IE menos en la 8 me pone el código HTML que le estoy pegando en el cursor y me lo hace genial.

En IE8 me lo pone encima del editor, como si lo estuviera pegando encima de donde empieza el código del editor.

Llevo tres días leyéndome foros y estoy un poco desesperado.

Si alguien me puede ayudar se lo agradecería muchísmo.

Gracias

[sweetlydark]

Hice un búsqueda y aparentemente es un bug que tiene ie8 que no te permite pegar un código amenos que no hayas seleccionado un area seleccionable. Lo que tienes que hacer es seleccionar algo (como un espacio) para lograr lo que quieres.

[deirdre]

Y qué ocurre si utilizas en ie8 el emulador a ie7 ?

Si dices que funciona bien en ie7, seguramente diciéndole al 8 que se comporte como si fuera el 7, tendría que funcionarte.

Sólo es cuestión de probar.

Bye

[Koke_Infortecnica]

Lo de seleccionar un espacio no es viable para el usuario.

Si he probado lo de emular en IE7 y tampoco funciona.

De todas maneras, que conste que no soy mu bueno con esto del javascript, pero hay alguna manera de hacer un create y añadirle seleccion de una manera dinámica. Es decir que seleccione el espacio de su derecha para crear un área de selección y crear así un área seleccionable

[sweetlydark]

Bueno después de mirar tu código bien veo que el primer función esta mal escrito le falta un t y unos (). Ademas de eso no veo como le estas pasando el valor de osel a sel y creo que eso es el problema ya que coloque sel = document.selection.createRange(); antes de sel.pasteHTML(sHTML) y me funciono de lo mas bien.

[Koke_Infortecnica]

Ya era consciente de que habia pegado mal el codigo de la funcion, pero era solo para dar una referencia..

He puesto el codigo para crear el rango justo delante del pasteHTML y ahora mola aun más ... NO ME PEGA NADA !!!!!! (estoy empezando a odiar mucho a Bill Gates)

De todas maneras creo que no he comentado bien el escenario. Yo lo que tengo es un iframe que es el que uso como editor entonces mi llamada completa sería algo asi:

Código:

 var sel = Editor.document.selection.createRange()
sel.select()
sel.pasteHTML(sHTML)

Si hago lo de arriba no me pinta nada

La otra manera que se supone que es correcta y que también he probado es la siguiente:

Código:

function x() 
{
    var oSel = this.selection

   if (!oSel) {
        oSel = Editor.document.selection.createRange()
       oSel.type = Editor.document.selection.type
    }
return oSel
}

//luego lo pego
var sel =x
sel.pasteHTML(sHTML)

Esta segunda manera me lo pega al principio del editor. Esta segunda funciona perfectamente en todas las versiones de explorer antes de la 8 (bueno en la 5 no lo se porque no lo he probado

La cuestión es que el maldito IE8 no cuenta como selección al cursor y me crea el rango con type="none", pero el objeto de selección no me lo crea como null.
Vamos que se hace un lio y lo que hace es fastidiarme.

De todas maneras muchas gracias

[sweetlydark]

Vamos a ver si esto te funciona coloca document.frames['Editor'].focus(); antes de Editor.document.selection.createRange()

[Koke_Infortecnica]

Casi....

Me lo pega arriba del texto no entre medias como quiero yo. Me pone el foco en el principio del texto.

Ahora estoy investigando una posible solucion con el método moveToElementText y definiendo el punto de comienzo de la seleccion con los metodos move y moveEnd.

Estoy en ello. En cuanto lo tenga pego la solución en el foro.

Muchas gracias y un saludo

[Koke_Infortecnica]

Bueno ya casi lo tengo, pero vuelvo a necesitar ayuda de los expertos.

Lo que necesito saber ahora es la posicion del cursor dentro de un iframe.

He visto muchos foros donde la gente lo consigue con un textarea o con un input. Pero lo que yo quiero es saber la posición de un cursor con iframe.

Os dejo el código que he conseguido en un foro y os indico el pete (aunque me da por sospechar que es la misma mierda de que no toma como selección el cursor).

Código:

function devPosiframe(){

var str =idEditbox.document.selection.createRange()
var stored_range = idEditbox.document.body.createTextRange();


stored_range.moveToElementText(idEditbox.document.getElementsByTagName('DIV')[0]);

stored_range.setEndPoint( 'EndToEnd', str );  //aqui me peta diciendome que el argumento no es correcto, pero yo creo que es que no toma el cursor como rango de seleccion

idEditbox.selectionStart = stored_range.text.length - str.text.length;
idEditbox.selectionEnd = idEditbox.selectionStart + str.text.length;


return idEditbox.selectionStart
}

No se si el código sera del todo correcto, ya que estoy aprendiendo a usar los rangos de selección ahora y a parte lo he modificado para que me funcione con mi codigo y con iframe. Viene de un codigo que funciona con un textarea


Muchas gracias

[sweetlydark]

Aparentemente después de buscar mas a fondo el problema puede ser que IE8 esta perdiendo el selección. Para resolver esto puedes usar store y restore del clase selection para guardar donde esta el cursor y reponerlo cundo lo necesitas usarlo.

No lo he intentado pero creo que es lo que necesitas.

[Koke_Infortecnica]

No me funciona. Es porque en IE8 se piensa que el cursor no es seleccion es vacio. A mi este bug me quita la vida.

Lo ideal sería encontrar otro camino de insertar codigo HTML en el iframe editable, pero no lo encuentro.

Muchas gracias de todas maneras

[sweetlydark]

Ok vamos una vez mas. Encontré otra pista útil, necesitas cambiar tu referencia al objeto editable para IE8. Esto combinado con el focus que te había dado de resolver tu problema (lo probé y me funciona).

Se va ver así:

document.getElementById('Editor').contentWindow.do cument

si tu editor es un div dentro de ese iframe entonces vas a tener que añadir

.getElementById("idDiv").document

y darle el foco así:

document.frames['Editor'].NombreDiv.focus();

o puedes enfocar con el id:

document.getElementById('Editor').contentWindow.do cument.getElementById('idDiv').focus();

[Koke_Infortecnica]

Casiiiiiii (pero nos vamos acercando)

Ahora el problema es que me lo pega en el principio del editor, no donde hago clic con el raton. De todas maneras algo debo de hacer mal.

Voy a ver si puedo mover la seleccion.

Muchas gracias por el tiempo que le estás dedicando a esto

[sweetlydark]

De verdad? Esto me funciona:

Inserta texto con IE8

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>AEInbetween.com</title>

<script>
function x()
{
	//oSel=this.selection
	var iframe = document.getElementById('Editor');
	var doc = iframe.contentWindow.document;
    //if (!oSel) {
		document.frames['Editor'].tester.focus();
		return oSel = doc.selection.createRange();
		//oSel.type = Editor.document.selection.type
    //}
}

function insertarHTML(sHTML) 
{
 var sType
//llamo a la funcion que me da la selección
 var sel =x();
 //sType = sel.type
//if (sType=="Control")
     //sel.item(0).outerHTML = sHTML
//else
//{			
	  sel.pasteHTML(sHTML);
}

</script>
</head>
<body>

<iframe id="Editor" name="Editor" src="test.html" width="100%" height="200px"></iframe>
<button onclick="insertarHTML('sHTML')">Try Me</button>

</body>
</html>

test.html

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>AEInbetween.com</title>
</head>
<body>
      <div name="tester" id="tester" contenteditable="true">test with this text</div>
</body>
</html>

[Koke_Infortecnica]

Si en efecto su código me funciona perfectamente.

Pero hay una diferencia entre el tuyo y el mio , que el mio es un iframe editable y el tuyo es un iframe con un src, y tu codigo no funciona

Te paso el codigo

Código:

<html>
<head>
<title>Iframe editable</title>

<script>
function x()
{
	//oSel=this.selection
	var iframe = document.getElementById('Editor');
	var doc = iframe.contentWindow.document;
    //if (!oSel) {
		document.frames['Editor'].tester.focus();
		return oSel = doc.selection.createRange();
		//oSel.type = Editor.document.selection.type
    //}
}

function insertarHTML(sHTML) 
{
 var sType
//llamo a la funcion que me da la selección
 var sel =x();
 //sType = sel.type
//if (sType=="Control")
     //sel.item(0).outerHTML = sHTML
//else
//{			
	  sel.pasteHTML(sHTML);
}
function _initEditor() {
	
	
	var sz = ""
	sz  +=  ""
	+   "<STYLE>"
	+	   ".DataBound{border:1 solid #999999;margin:1;font-family:Courier;background:#ffe680}\n"
	+	   ".textMode {border-top: 1px black solid;font: 10pt courier}\n.NOBORDER TD {border:1px gray solid}"
	+	   "BODY {border: 5px #D9D9D9 solid;}"
	+   "</STYLE>"
	+   "<BODY  ONCONTEXTMENU=\"return false\">"
	+		"<DIV id='divEditor' name='divEditor'></DIV>"
	+   "</BODY>"
	
	Editor.document.designMode = "on"
	Editor.document.open("text/html","replace")
	Editor.document.write(sz)
	Editor.document.close()
	
}

</script>
</head>
<body>

<iframe id="Editor" name="Editor"  width="100%" height="200px"></iframe>
<button onclick="insertarHTML('sHTML')">Try Me</button>

</body>
<script>
_initEditor()
</script>
</html>[/B]

Yo creo que no referencio bien el div que genero por codigo, pero es que no doy mas de si.

Un saludo

[sweetlydark]

Hice el ejemplo así porque habías dicho que era un div editable pero funciona con un iframe editable también:

Con iframe editable

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>AEInbetween.com</title>

<script>
function loadThis(){
var iframe = document.getElementById('Editor');
var doc = iframe.contentWindow.document;
doc.body.innerHTML = iframe.innerHTML;
doc.body.contentEditable = true;
}
function x()
{
	//oSel=this.selection
	var iframe = document.getElementById('Editor');
	var doc = iframe.contentWindow.document;
	
    
	//if (!oSel) {
		document.frames['Editor'].focus();
		return oSel = doc.selection.createRange();
		//oSel.type = Editor.document.selection.type
    //}
}

function insertarHTML(sHTML) 
{
 var sType
//llamo a la funcion que me da la selección
 var sel =x();
 //sType = sel.type
//if (sType=="Control")
     //sel.item(0).outerHTML = sHTML
//else
//{			
	  sel.pasteHTML(sHTML);
}

</script>
</head>
<body onload="loadThis()">

<iframe id="Editor" name="Editor" width="100%" height="200px" contenteditable="true">Some text</iframe>
<button onclick="insertarHTML('sHTML')">Try Me</button>

</body>
</html>

[Koke_Infortecnica]

:apla uso:

¡¡¡¡¡LO RESOLVI !!!!!!!!!

Te explico.

Tenías más razón que un santo y era verdad el tema del foco del editor, pero yo también con lo que no me funcionaba.

Lo que pasaba es que tengo un div que saca popups para insertar tanto las imágenes como los demás temas de HTML. Y claro ... como no le daba el foco a mi maravilloso DIV-popup y cuando volvía y le daba el foco a mi editor me lo ponía al principio.

MUCHiSIMAS GRACIAS

P.D. Soy programador de .net ante cualquier duda no dudes en mandarme un mensaje

P.D2. para los que lo lean, la incidencia se corrige dándole el foco al editor antes de pegar el html

Código:

function CrearRango()
{

var iframe = document.getElementById('Editor');
var doc = iframe.contentWindow.document;

document.frames['Editor'].focus();//Esto es lo que lo hace funcionar
return oSel = doc.selection.createRange();


}
function insertarHTML(sHTML) 
{
 var sType
//llamo a la funcion que me da la selección
 var sel =CrearRango();

			
sel.pasteHTML(sHTML);
}