Estoy desarrollando un Editor con BBCODE y necesito realizar lo siguiente:
Seleccionar texto en Textarea y abrir popup que retorne al textarea el BBCODE con texto seleccionado entre medio.
-Del textarea del formulario seleccione un texto(rango).
-Luego con un click en un boton o imagen me mande a un popup que permite configurar las opciones de una tabla (TD).
-dentro del popup con un click en el boton "crear tabla" me devuelba el BBCODE y entremedio el texto seleccionado en el texarea
de la pagina del formulario.
EJ: [TD width=100 heigh=200 align=LEFT valign=TOP bgcolor=#CCCCCC colspan=0 rowspan=0]texto seleccionado[/TD]
Esto es lo que tengo por el momento, pero no me funciona:
PAGINA FORMULARIO (EDITOR)
Código:
POPUP: td_creator.html editor.hrml
<form enctype="multipart/form-data" action="index.php?modulo=contenidos&op=admin&accion=agregacontenido" name="post" method="post">
<table class="tablecenter" summary="">
<tr>
<td>
<img border="0" src="modulos/contenidos/imagenes/bbcode/td.gif" width="24" height="20" name="smile" type="image" onclick="window.open('modulos/contenidos/includes/td_creator.html', '_td', 'HEIGHT=300,resizable=yes,scrollbars=yes,WIDTH=450');return false;" target="_td" style="border-style: outset; border-width: 1" alt="TD"><br>
<textarea cols="60" id="contenido" name="contenido" rows="25"></textarea>
</td>
</tr>
</table>
<p class="center">
<input type="submit" value="Enviar Contenido" />
</p>
</form>
Código:
es posible hacer tal cosa?
<script language="JavaScript">
//<!--
function makeschild(){
var width = document.schilderstellung.width.value;
var height = document.schilderstellung.height.value;
var align = document.schilderstellung.align.value;
var valign = document.schilderstellung.valign.value;
var bgcolor = document.schilderstellung.bgcolor.value;
var colspan = document.schilderstellung.colspan.value;
var rowspan = document.schilderstellung.rowspan.value;
var theSelection = document.selection.createRange().text;
var text2form ="[TD width="+width+" height="+height+" align="+align+" valign="+valign+" bgcolor=#"+bgcolor+" colspan="+colspan+" rowspan="+rowspan+"]"+theSelection+"[/TD]";
opener.document.forms['post'].contenido.value += text2form;
}
//-->
</script>
<table cellpadding=4 cellspacing=1 border=0 width="100%">
<form name="schilderstellung">
<tr bgcolor="CCCCCC">
<td class="row1"><span class="gen"><b>width:</b></span></td>
<td class="row2"><input type='text' value='0' size='4' maxlength='5' name="width"></td>
</tr>
<tr bgcolor="CCCCCC">
<td class="row1"><span class="gen"><b>height:</b></span></td>
<td class="row2"><input type='text' value='0' size='4' maxlength='5' name="height"></td>
</tr>
<tr bgcolor="CCCCCC">
<td class="row1"><span class="gen"><b>colspan:</b></span></td>
<td class="row2"><input type='text' value='0' size='4' maxlength='5' name="colspan"></td>
</tr>
<tr bgcolor="CCCCCC">
<td class="row1"><span class="gen"><b>rowspan:</b></span></td>
<td class="row2"><input type='text' value='0' size='4' maxlength='5' name="rowspan"></td>
</tr>
<tr>
<td bgcolor="CCCCCC" class="row1"><span class="gen"><b>BG Color:</b></span></td>
<td class="row2"><table>
<tr><select name="bgcolor">
<option style="color:black" value="C0C0C0" class="genmed">DEFAULT</option>
<option style="color:darkred" value="8B0000" class="genmed">DARK_RED</option>
<option style="color:red" value="FF0000" class="genmed">RED</option>
<option style="color:orange" value="FFA500" class="genmed">ORANGE</option>
<option style="color:brown" value="A52A2A" class="genmed">BROWN</option>
<option style="color:yellow" value="FFFF00" class="genmed">YELLOW</option>
<option style="color:green" value="008000" class="genmed">GREEN</option>
<option style="color:olive" value="808000" class="genmed">OLIVE</option>
<option style="color:cyan" value="00FFFF" class="genmed">CYAN</option>
<option style="color:blue" value="0000FF" class="genmed">BLUE</option>
<option style="color:darkblue" value="00008B" class="genmed">DARK_BLUE</option>
<option style="color:indigo" value="4B0082" class="genmed">INDIGO</option>
<option style="color:violet" value="EE82EE" class="genmed">VIOLETT</option>
<option style="color:white" value="FFFFFF" class="genmed">WHITE</option>
<option style="color:black" value="000000" class="genmed">BLACK</option>
</select></tr>
</table></td>
</tr>
<tr>
<td class="row1" bgcolor="CCCCCC"><span class="gen"><b>Align:</b></span></td>
<td class="row2"><table>
<tr><select name="align">
<option value="LEFT" class="genmed">Left</option>
<option value="RIGHT" class="genmed">Right</option>
<option value="CENTER" class="genmed">Center</option>
</select></tr>
</table></td>
</tr>
<tr>
<td class="row1" bgcolor="CCCCCC"><span class="gen"><b>Vertical Align:</b></span></td>
<td class="row2"><table>
<tr><select name="valign">
<option value="TOP" class="genmed">Top</option>
<option value="BOTTOM" class="genmed">Bottom</option>
<option value="CENTER" class="genmed">Center</option>
</select></tr>
</table></td>
</tr>
<tr>
<td class="spaceRow" colspan="6" height="1"><img src="images/spacer.gif" alt="" width="1" height="1" /></td>
</tr>
<tr>
<td class="cat" align="center" colspan="5" valign="middle">
<span class="cattitle"><input type="button" class="mainoption" value="Crear Tabla" onClick="makeschild()" class="input"> <input type="button" class="liteoption" value="Cerrar" onClick="window.close()" class="input"></span>
</td>
</tr>
</form>
</table>
alguna ayuda?
gracias.
salu2
zsamer
