Crear tags bbcode

Sabin · #1 (**permalink**) 27/01/2012, 19:28

Buenas, la verdad no tengo mucha idea de Javascript y utilizaba un pequeño sistema de bbcode pero limitado en cuanto a las etiquetas que creaba, basicamente la de Negrita, Subrayado, Italic, Links e Imagenes, por lo que para agregarle mas caracteristicas me vi en la obligacion de meterme con esta programacion, asi que leyendo un poco y tomando de algunos ejemplos avance un poco y ahora pretendia agregarle algunas funciones que no poseia,

En este caso mi problema es a la hora de generar la etiqueta [*size=4][*/size] por ejemplo,

Pongo el codigo y me explico un poco mas:

Código HTML:

<html> 
<head> 
<title>Editor bbCode</title> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
<script>

Código Javascript:

Ver originalfunction 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 = "[size=" + tag + "]" + str + "[/size]"; 
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) + '[size='+tag+']' + insText + '[/size]'+ 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+=' [size='+tag+']Reemplace este texto[/size]'; 
return; 
} 
}

Código HTML:

</script> 
</head> 

<body> 
<form name="form1" method="post" action=""> 
<select name="tamanio"> 
<option value="Tamaño" selected="selected"> 
<option style="font-size:9px;" value="1" onchange="instag(1)">Tamaño 1</option> 
<option style="font-size:12px;" value="2" onclick="instag(2)">Tamaño 2</option> 
<option style="font-size:15px;" value="3" onclick="instag(3)">Tamaño 3</option> 
<option style="font-size:18px;" value="4" onclick="instag(4)">Tamaño 4</option> 
</select> 
<br> 
<textarea name="contenido" cols="40" rows="10" id="contenido"></textarea><br/ > 
<input type="submit" name="Submit" value="Enviar" /> 
</form> 
</body> 
</html>

El problema en si es que sin importar que item seleccione del "Select" no agrega la etiqueta, en cambio si en vez de utilizar un Select utilizo botones en ese caso funciona perfecto,

Es decir que si esto:

<select name="tamanio">
<option value="Tamaño" selected="selected">
<option style="font-size:9px;" value="1" onclick="instag(1)">Tamaño 1</option>
<option style="font-size:12px;" value="2" onclick="instag(2)">Tamaño 2</option>
<option style="font-size:15px;" value="3" onclick="instag(3)">Tamaño 3</option>
<option style="font-size:18px;" value="4" onclick="instag(4)">Tamaño 4</option>
</select>

Lo transformo en esto:

<input type="button" name="1" value="Tamaño 1" onClick="instag('1')">
<input type="button" name="2" value="Tamaño 2" onClick="instag('2')">
<input type="button" name="3" value="Tamaño 3" onClick="instag('3')">
<input type="button" name="4" value="Tamaño 4" onClick="instag('4')">

Funciona.

El problema esta al intentar simplificarlo en un Select.

Bueno esa es mi duda espero haberme explicado, desde ya gracias por leer :D

Sabin · #2 (**permalink**) 27/01/2012, 19:30

Perdon recien veo que le erre de categoria, el que pueda muevalo nomas a Javascript.