Problemas creando mi editor HTML - WYSIWYG

Jandroide · #1 (**permalink**) 27/09/2007, 02:54

Bueno, les explico mis primeras pruebas para construir un editor visual de html y dónde me he "atascado".

En primer lugar está la página blank.html, que es donde se escribirá:

Código HTML:

<html>
<head><title></title></head>
<body contenteditable onLoad="document.designMode = 'on'">
</body>
</html>

Y luego la página editor.html, que contiene el script del editor:

Código HTML:

<iframe src="blank.html" id="areaEditable" style="width:500px; height: 300px; border-style:inset; border-width:thin;" frameborder="0px"></iframe><br>
<input type="button" value="Ver contenido" onClick="javascript:alert( verContenido() );" />
<input type="button" value="Ver selección" onClick="javascript:alert( verSeleccion() );" />

<script language="JavaScript" type="text/JavaScript">

	function verContenido() {
		//Para IExplorer
		if (window["areaEditable"]){
			return window["areaEditable"].document.body.innerHTML;
		//Para Mozilla
		}else{
			return document.getElementById("areaEditable").contentWindow.document.body.innerHTML;
		}
	}
	
	function verSeleccion(){
		//Para IExplorer
		if(typeof document.selection != 'undefined' && document.selection) {
			return window["areaEditable"].document.selection.createRange().text;
		}
		//Para Mozilla
		else if(document.getElementById("areaEditable").selectionStart != 'undefined'){
			var start = document.getElementById("areaEditable").selectionStart;
			var end = document.getElementById("areaEditable").selectionEnd;
			return document.getElementById("areaEditable").substring(start, end);
		}
	}
	
</script>

Si prueban el código en IExplorer y en Mozilla, verán que el primer botón sirve para mostrar todo el texto que se haya escrito, eso funciona bien.

El problema está en el segundo botón, que en IExplorer muestra el texto seleccionado por el usuario, pero en Mozilla no logro hacerlo funcionar...seguro que se trata de una tontería, ¿alguna solución?

PosProdukcion · #2 (**permalink**) 27/09/2007, 03:39

Bueno, no he probado tu código pero creo que tu problema es el que tuve yo hace poco... El IExplore no detecta la selección del campo. Pues yo encontré por ahí este código (el parámetro "editor" en mi caso es un TEXTAREA), una vez ejecutado ya se les ha asignadao valor a selectionStar y selectionEnd y se puede ejecutar tu código anterior como si fuera mozilla, que ahora si reconocerá estas propiedades:

Código:

    function AveriguaRangoIE(editor)
    {
        if (document.selection)
        { // Esta mierda es necesaria para averiguar
          //las posiciones de inicio y fin de seleccion en IExplore
            // We'll use this as a 'dummy'
            var range = document.selection.createRange();

            if ((range != null) && (range.htmlText.length > 0))
            {  //Si habia seleccion => range.htmlText.length > 0
                var stored_range = range.duplicate(); // Select all text
                stored_range.moveToElementText( editor ); // Now move 'dummy' end point to end point of original range
                stored_range.setEndPoint( 'EndToEnd', range ); // Now we can calculate start and end points
                editor.selectionStart = stored_range.text.length - range.text.length;
                editor.selectionEnd = editor.selectionStart + range.text.length;
                alert('Comienzo ' + editor.selectionStart);
                alert('Fin ' + editor.selectionEnd);
            }
            else
            {
                alert('No hay rango');
                //js_getCursorPosition(editor);
            }
            return;
        }
    }

Mi problema es cuando no hay ningún texto seleccionado, con el IExplore no soy capaz de averiguar la posicion del cursor y de volver a colocarlo después en el mismo sitio, he visto por ahí funciones para hacerlo pero son muy complicadas y no consigo adaptarlas a mi editor...

¿Tu sabes como hacerlo?

Por cierto, he dejado los alert en el código, puedes quitarlos cuando lo tengas probado..

Jandroide · #3 (**permalink**) 27/09/2007, 09:50

Yo donde tengo el problema con mi script es en Mozilla, en IE funciona perfectamente. La cuestión es que yo no utilizo un TEXTAREA, sino una página metida en un iframe.

EIDTO: ya lo tengo, os pongo el código corregido por si le interesa a alguien. Como veréis, sólo ha cambiado una pequeña cosa.

Código HTML:

<iframe src="blank.html" id="areaEditable" style="width:500px; height: 300px; border-style:inset; border-width:thin;" frameborder="0px"></iframe><br>
<input type="button" value="Ver contenido" onClick="javascript:alert( verContenido() );" />
<input type="button" value="Ver selección" onClick="javascript:alert( verSeleccion() );" />

<script language="JavaScript" type="text/JavaScript">

	function verContenido() {
		//Para IExplorer
		if (window["areaEditable"]){
			return window["areaEditable"].document.body.innerHTML;
		//Para Mozilla
		}else{
			return document.getElementById("areaEditable").contentWindow.document.body.innerHTML;
		}
	}
	
	function verSeleccion(){
		//Para IExplorer
		if(typeof document.selection != 'undefined' && document.selection) {
			return window["areaEditable"].document.selection.createRange().text;
		}
		//Para Mozilla
		else if(document.getElementById("areaEditable").selectionStart != 'undefined'){
			return document.getElementById("areaEditable").contentWindow.getSelection();
		}
	}
	
</script>

Koke_Infortecnica · #4 (**permalink**) 12/08/2009, 09:16

Cita:

Mi problema es cuando no hay ningún texto seleccionado, con el IExplore no soy capaz de averiguar la posicion del cursor y de volver a colocarlo después en el mismo sitio, he visto por ahí funciones para hacerlo pero son muy complicadas y no consigo adaptarlas a mi editor...

Oye si has conseguido como hacerlo, podrias decir como lo has hecho es que yo ni he encontrado esas funciones. Que me estoy volviendo loco para hacerlo