posicionar cursor dentro de un textarea

sherif · #1 (**permalink**) 21/01/2009, 07:27

Hola a todos!
Me gustaría que alguien me echara un cable con un editor de texto que estoy realizando en html y javascript.
El código lo copie de internet y no se mucho de javascript:

Código:

<html>
<head>
<title>Editor bbCode</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script>
function instag(tag){
	var input = document.form1.contenido;
	if(typeof document.selection != 'undefined' && document.selection) {
		var str = document.selection.createRange().text;
		input.focus();
		var sel = document.selection.createRange();
		sel.text = "[" + tag + "]" + str + "[/" +tag+ "]";
		sel.select();
		return;
	}
	else if(typeof input.selectionStart != 'undefined'){
		var start = input.selectionStart;
		var end = input.selectionEnd;
		var insText = input.value.substring(start, end);
		input.value = input.value.substr(0, start) + '['+tag+']' + insText + '[/'+tag+']'+ input.value.substr(end);
		input.focus();
		input.setSelectionRange(start+2+tag.length+insText.length+3+tag.length,start+2+tag.length+insText.length+3+tag.length);
		return;
	}
	else{
		input.value+=' ['+tag+']Reemplace este texto[/'+tag+']';
		return;
	}
}
function inslink(){
	var input = document.form1.contenido;
	if(typeof document.selection != 'undefined' && document.selection) {
		var str = document.selection.createRange().text;
		input.focus();
		var my_link = prompt("Enter URL:","http://");
		if (my_link != null) {
			if(str.length==0){
				str=my_link;
			}
			var sel = document.selection.createRange();
			sel.text = "[a href=\"" + my_link + "\"]" + str + "[/a]";
			sel.select();
		}
		return;
	}else if(typeof input.selectionStart != 'undefined'){
		var start = input.selectionStart;
		var end = input.selectionEnd;
		var insText = input.value.substring(start, end);
		var my_link = prompt("Enter URL:","http://");
		if (my_link != null) {
			if(insText.length==0){
				insText=my_link;
			}
			input.value = input.value.substr(0, start) +"[a href=\"" + my_link +"\"]" + insText + "[/a]"+ input.value.substr(end);
			input.focus();
			input.setSelectionRange(start+11+my_link.length+insText.length+4,start+11+my_link.length+insText.length+4);
		}
		return;
	}else{
		var my_link = prompt("Ingresar URL:","http://");
		var my_text = prompt("Ingresar el texto del link:","");
		input.value+=" [a href=\"" + my_link + "\"]" + my_text + "[/a]";
		return;
	}
}
</script>
</head>

<body>
<form name="form1" method="post" action="">
<input type="button" name="Submit" value="B" onClick="instag('b')">
<input type="button" name="Submit3" value="U" onClick="instag('u')">
<input type="button" name="Submit4" value=" I " onClick="instag('i')">
<input type="button" name="Submit2" value="LINK" onClick="inslink()">
<br>
<textarea name="contenido" cols="40" rows="10" id="contenido"></textarea>

</form>
</body>
</html>

En base a esto, la pregunta es la siguiente: ¿cómo hago para que el cursor se me posicione dentro del textarea entre las etiquetas del tag?
Me explico, si haces clic sobre el botón negrita, te escribe los tags correspondientes, pero el cursor te lo coloca al final, y yo quiero que me lo coloque entre las etiquetas del tag. Me gustaría hacer algo parecido a este foro, cuando escribes un mensaje.
El código que tengo realmente funciona, pero me falta esta última parte para que sea perfecto, y no se cómo modificarlo. Mira que lo he intentado de varias formas y nada.

A ver si un alma caritativa me echa una mano,

, y así poder modificar el código.
Gracias y un saludo.

ceSharp · #2 (**permalink**) 21/01/2009, 08:40

Hola sheriff,
para cambiar la posicion del cursor puedes utilizar estas dos lineas de código que debes insertar antes del sel.select() de tu función instag(tag).
Pero ojo, que cuando pulsas otra tecla recuerda en la posicion que estaba e inserta las siguientes etiquetas donde estaba posicionado el cursor. Tendrás que jugar con la posición del cursor al pulsar cada tecla. Pero vamos, el tema de posicionar el cursor ya lo tienes. La 'historia' es que tienes que decirle cuántas posiciones retrocede (por eso la acción del move es pos menos el doble de pos xq estoy calculando la cantidad de caracteres que tiene que retroceder)
var pos = new Number(3 + tag.length);
sel.move('character',pos - (2 * pos));

espero que te sirva.

salu2

sherif · #3 (**permalink**) 22/01/2009, 05:18

Hola ceSharp!
Gracias por contestar. Tu solución me ha funcionado, en parte. En explorer funciona pero en firefox no. El caso es que era eso lo que andaba buscando. Seguiré haciendo pruebas y machacando un poco el código.
Chao!