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?