Edicion en text area

wiltoncb · #1 (**permalink**) 10/05/2010, 17:17

hola mi pregunta es como hago para que al seleccionar una palabra o frase en un textarea y al darle click en un boton se le asigne una etiqueta ejemplo (abreetiqueta)aquie le texto seleccionado(cierreetiqueta).

yo logro que al dar click en un boton aparezca caracteres en el textarea pero no logro que al seleccionar parte del texto y darle click en un boton se le asigne una etiqueta que bien podria ser color, tipo de letra, fondo etc etc

de ante mano les agradezco este es mi priemr tema planteado ya tengo un foro armado pero quiero que los usuarios puedand editar sus mensajes mas o menos como este foro.

masterojitos · #2 (**permalink**) 10/05/2010, 17:23

a eso se le denomina: BBCode.

podrias hacer un javascript para que te resulte, pero... para que hacer algo que ya esta hecho en la web.... solo busca y encontraras ^^

Suerte.

wiltoncb · #3 (**permalink**) 11/05/2010, 05:53

el poblema es que de java se muy poco, le agradeceria que me diera un ejemplo sencillo si lo sabes yo soy bueno para entender los codigos asi no sepa mucho de ello ,

LE AGRADESCO HERMANO

wiltoncb · #4 (**permalink**) 11/05/2010, 11:06

listo ya logre lo que queria era bastante sencillo con un javascript aqui dejo el codigo por si alguien lo llegara a necesitar:

Código HTML:

Ver original<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>