Texto seleccionado en un textarea
Estoy intentando simular un editor dentro de un textarea, es decir, al pulsar un botón que ponga "Negrita" el texto que esté seleccionado se ponga en negrita.
Para ello: ¿Cómo puedo saber que texto está seleccionado dentro del textarea?
Y segundo: ¿Se puede cambiar ese texto por otro?, es decir, cambiar
hola mundo
por
<b>hola mundo</b>
Gracias por adelantado
Para ello: ¿Cómo puedo saber que texto está seleccionado dentro del textarea?
Y segundo: ¿Se puede cambiar ese texto por otro?, es decir, cambiar
hola mundo
por
<b>hola mundo</b>
Gracias por adelantado
Pues primero hay que crear un objeto textrange con
lo que haya seleccionado en el documento, y después
comprobar si dicha selección está dentro del textarea.
Te pongo un ejemplo:
<html>
<head>
<script>
function ponTag(elTag){
var rango = document.selection.createRange();
if(rango.parentElement() == document.all.txtEditar)rango.text= "<" + elTag + ">" + rango.text + "</" + elTag + ">";
}
</script>
</head>
<body>
<textarea name="txtEditar" cols="50" rows="20"></textarea><br>
<input type="button" value="Negrita" onclick="ponTag('b');">
<input type="button" value="Cursiva" onclick="ponTag('i');">
<input type="button" value="Parrafo" onclick="ponTag('p');">
<input type="button" value="Fuente" onclick="ponTag('font');">
</body>
</html>
lo que haya seleccionado en el documento, y después
comprobar si dicha selección está dentro del textarea.
Te pongo un ejemplo:
<html>
<head>
<script>
function ponTag(elTag){
var rango = document.selection.createRange();
if(rango.parentElement() == document.all.txtEditar)rango.text= "<" + elTag + ">" + rango.text + "</" + elTag + ">";
}
</script>
</head>
<body>
<textarea name="txtEditar" cols="50" rows="20"></textarea><br>
<input type="button" value="Negrita" onclick="ponTag('b');">
<input type="button" value="Cursiva" onclick="ponTag('i');">
<input type="button" value="Parrafo" onclick="ponTag('p');">
<input type="button" value="Fuente" onclick="ponTag('font');">
</body>
</html>
