[Ayudaa] Editor WYSIWYG

Sabin · #1 (**permalink**) 08/10/2011, 18:11

Buenas, hace poco tiempo empece con lo referido a la programacion, empezando por php y ahora que lo domino un poco decidi adentrarme un poco en javascript.

Por lo que quise empezar buscando la forma de añadir etiquetas bbcode para simplificar la edicion de esos comentarios y tras buscar por aqui y por alla encontre en esta misma pagina un buen ejemplo para empezar, bien simple pero funcional y entendible para mi que soy novato, entonses pende en llevarlo a mas y convertirlo en un editor WYSIWYG con bbcode, por lo que se me ocurrieron infinidad de funciones para añadirle que de seguro siguiendo la linea por la que voy se puedan lograr, pero hay algo que quisiera implementar pero que ademas de que no se me ocurre como hacerlo no sabria como buscarlo por lo que no me quedo mas que crear este tema,

Lo que me gustaria poder hacer con este editor es -Añadirle un boton por el cual al clickearlo nos muestre en el textarea el el texto enriquecido, es decir que se muestre como se veria y no el texto con las etiquetas bbcode y viceversa.
Como sucede en esta pagina al darle al boton Vista Previa.. pero esa opcion tampoco me desagrada, estoy abierto acualquier sugerencia material o lo que me puedan recomendar.

Espero me halla sabido explicar, aca les dejo el codigo.

Código HTML:

<html> 
<head> 
<title>Proyecto Editor WYSIWYG con 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; 
} 
} 
function captura_imag(){ 
var input = document.form1.contenido; 
if(typeof document.selection != 'undefined' && document.selection) { 
var str = document.selection.createRange().text; 
input.focus(); 
var my_link = prompt("Ingresar 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("Ingresar 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://"); 
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()"> 
<input type="button" name="Submit5" value="IMAGE" onClick="captura_imag()"> 
<br> 
<textarea name="contenido" cols="40" rows="10" id="contenido"></textarea> 

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

Bueno eso, espero me halla podido explicar lo mejor posible y cualquier informacion material o lo que sea que me pueda ayudar a seguir adelante bienvenido sea. Gracias