¡Hola a todos!
Estoy intentando hacer un editor de noticias que represente el resultado del texto con formato en tiempo real (sin un botón de previsualización) Para que nos entendamos, es algo muy parecido a la página en la que se escribe un nuevo tema (en la que estoy ahora) o para responder.
Eso sí, el mío es bastante más sencillo que este....
El caso es que tengo un problema con los botones. Si uso input de tipo botón, la cosa funciona, pero si uso input de tipo imagen, me hace una cosa muy rara, que es llamar a la página otra vez pasándole las coordenadas del ratón en la llamada. Esto lo hace si tengo el input dentro de la etiqueta form, porque, si lo saco, funciona bien.
Como creo que me he explicado fatal y el comportamiento es muy raro, os dejo un código resumido para que veáis el funcionamiento.
Código PHP:
<html>
<head>
<script language="JavaScript" type="text/JavaScript">
<!--
function iniciar() {
txt = document.getElementById('texto');
res = document.getElementById('resultado');
}
function aplicarEstilo(estilo) {
var valor = txt.value.substring(txt.selectionStart, txt.selectionEnd);
var valorInicial = "<b>";
var valorFinal = "</b>";
if (document.selection) {
txt.focus();
sel = document.selection.createRange();
sel.text = valor;
} else if (txt.selectionStart || txt.selectionStart == '0') {
// En caso de MOZILLA/NETSCAPE
var inicio = txt.selectionStart;
var fin = txt.selectionEnd;
switch (estilo) {
case "bold":
valorInicial = "<b>";
valorFinal = "</b>";
break;
case "italic":
valorInicial = "<i>";
valorFinal = "</i>";
break;
}
valor = valorInicial + valor + valorFinal;
var cursor = inicio + valor.length;
txt.value = txt.value.substring(0, inicio)
+ valor
+ txt.value.substring(fin, txt.value.length);
txt.selectionStart = cursor;
txt.selectionEnd = cursor;
} else {
txt.value += valor;
}
res.innerHTML = txt.value;
txt.focus();
}
function ejcribir() {
res.innerHTML = txt.value;
}
//-->
</script>
</head>
<body onLoad="iniciar()">
<table width="50%">
<form> <!-- Si pongo aquí el form no funciona la imagen -->
<tr>
<td>
<input type="image" src="http://www.forosdelweb.com/images/editor/bold.gif"
onClick="aplicarEstilo('bold')">
</td>
</tr>
<!-- <form> Si lo pongo aquí sí me funciona -->
<tr>
<td>
<input type="button" onClick="aplicarEstilo('italic')" value="Cursiva">
</td>
</tr>
<tr>
<td>
<textarea id="texto" cols="50" rows="7" onKeyUp="ejcribir()"></textarea>
</td>
</tr>
<tr>
<td>
<span id="resultado"></span>
</td>
</tr>
</form>
</table>
</body>
</html>
Como veréis, al pulsar en el botón, se pondrá en cursiva el texto seleccionado, mientras que, al pulsar sobre la imagen, se volverá a llamar a la página pasándole como parámetros las coordenadas del ratón.
Si alguien sabe qué puede estar ocurriendo, me quitaría un gran quebradero de cabeza, porque no tengo ni idea de por qué sucede esto.
IMPORTANTE: el formateo del texto sólo funciona bien con FIREFOX, aunque el comportamiento extraño lo hace también con el explorer.
Muchas gracias.