Posición cursor

[fbedia]

Hola, en primer lugar felicitarles por el foro y la web que están llevando. Muchos de mis problemas los he logrado solucionar recurriendo aqui.

Es el primer post que hago en el foro, espero ser breve y claro. Ojala puedan ayudarme.

Mi problema es el siguiente:

- Tengo un formulario en el cual se puede agregar una noticia.



La noticia (el cuerpo) se guarda en la Base de Datos como codigo html, por lo tanto, al escribir la noticia, hay que poner los <br> para saltos, <b></b> para negrita.... etc.

Como ven, encima del textarea hay unos botones los cuales al hacer clic en ellos me ponen en el textarea el codigo correspondiente.

Por ejemplo, al hacer clic en "salto" me coloca un <br>. Al hacer clic en linea me coloca un <hr> ... etc.

TENGO 2 PROBLEMAS:

1- que me coloca el codigo al final del textarea, y no donde yo tenga la posicion del cursor

2- cuando ago clic por ejemplo en "negrita" me pone el <b></b> y el cursor me lo deja aqui: (Señalado en rojo) <b></b>| y lo que me gustaria es que lo dejase aqui: <b>|<b/>

Eso es todo :) espero que me puedan ayudar.

El codigo que empleo es el siguiente:

Botones y textarea noticia:

Código HTML:

<tr> 
    <td colspan="3" align="center">
    <input name="br" type="button" id="br" value="Salto" onclick="Agregar('<br>')"> .
    <input name="negrita" type="button" id="ngrita" value="Negrita" onclick="Agregar('<b></b>')"> .
    <input name="cursiva" type="button" id="cursiva" value="Cursiva" onclick="Agregar('<i></i>')"> .
    <input name="subrayado" type="button" id="subrayado" value="Subrayado" onclick="Agregar('<u></u>')"> .
    <input name="centrado" type="button" id="centrado" value="Centrado" onclick="Agregar('<center></center>')"> .
    <input name="linea" type="button" id="linea" value="Linea" onclick="Agregar('<hr>')">
    </td> 
</tr> 
<tr>
    <td valign="top">Noticia: </td> 
    <td colspan="2"><textarea name="noticia" cols="70" rows="15"></textarea></td> 
</tr>
 

y la funcion javascript es la siguiente:

Código Javascript:

<script language="javascript">
function Agregar(texto) { 
document.inserto_cat.noticia.value = document.inserto_cat.noticia.value + texto; 
} 
</script>
 

*inserto_cat -> es el nombre del formulario
noticia -> el nombre del textarea

El codigo me funciona bien, podria apañarme asi, pero seria mucho mas comodo para el usuario al que estoy haciendo la web, que los 2 problemas que les comente estuviesen arreglados.

Un saludo y muchas gracias de antemano.

[Panino5001]

Fijate en este enlace:
http://www.forosdelweb.com/1755928-post244.html
(sólo tendrás que reemplazar '[' por '<' y ']' por '>')
o en este este:
http://www.disegnocentell.com.ar/notas2.php?id=206
o este:
http://www.disegnocentell.com.ar/notas2.php?id=131

[fbedia]

Muchas gracias, revisare los enlaces que me dejaste.

[fbedia]

Estupendo, ahora lo tengo todo como lo queria, muchas gracias Panino5001

añadir la funcion "salto" para meter un <br>

modifique tu codifo javascript y para esto me valio con tan solo:

Código Javascript:

function inssal(tag){
var input = document.form1.contenido;
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+'>' + 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;
}
}
 

la funcion para añadir una imagen, la hize similar a la de añadir un link, no se si tal vez se pudiese hacer mejor o ahorrarme algin else.... pero bueno, igualmente me sirve como esta. Te dejo el codigo por si kieres revisar o corregirme algo:

Código Javascript:

function insimg(){
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 = "<img src=\"" + my_link + "\">";
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) +"<img src=\"" + my_link +"\">"+ 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+=" <img src=\"" + my_link + "\">";
return;
}
}
 

Muchas gracias por tu ayuda.

Un saludo.