Foros del Web » Programando para Internet » Javascript »

Editor de Texto

 Estas en el tema de Editor de Texto en el foro de Javascript en Foros del Web. Necesito hacer un procesador de texto, como el que tiene este foro, en donde pueda poner negrita , itálica , subrayado , poder cambiar el ...
  #1 (permalink)  
Antiguo 11/05/2004, 08:02
 
Fecha de Ingreso: abril-2004
Mensajes: 260
Antigüedad: 20 años
Puntos: 1
Exclamación Editor de Texto
Necesito hacer un procesador de texto, como el que tiene este foro, en donde pueda poner negrita, itálica, subrayado, poder cambiar el tamaño del texto, cambiar la fuente, y también el color .

Se que puedo usar una función de PHP para que busque en el campo algun código en particular y que lo remplaze por un tago que yo quiero. Eso solucionaría casi todo. Lo que no sé como hacer es esa ventita que salta acá, cuando apretas la "B" de negrita en el procesador de texto de este foro. Saben de lo que hablo?, es una ventana que tiene una descripción y un campo de texto con el código correspondiente a la funcion que quieras aplicarle al texto, y luego cuando aceptas se agrega a el campo de texto grande de tu mensaje.

Como se hace esto???????.
Tal vez no fue muy clara mi explicación, si es así díganmeló y se los explico mejor.

Muchas gracias por todo.
__________________
:serio: :adios:
  #2 (permalink)  
Antiguo 11/05/2004, 22:34
Avatar de Mickel  
Fecha de Ingreso: mayo-2002
Ubicación: Lima, Peru
Mensajes: 4.619
Antigüedad: 22 años
Puntos: 7
Del codigo fuente de FDW...
<script language="Javascript" src="vbcode.js"></script>
<script language="Javascript" src="vbcode_language.js"></script>
<style>
#codebuttons input { font-family: verdana, arial, helvetica; font-size: 11px; }
#codebuttons select { font-family: verdana, arial, helvetica; font-size: 11px; }
.smilieTable { border-width: 2px; border-style: outset; }
</style>

(sigue...)
  #3 (permalink)  
Antiguo 11/05/2004, 22:49
Avatar de Mickel  
Fecha de Ingreso: mayo-2002
Ubicación: Lima, Peru
Mensajes: 4.619
Antigüedad: 22 años
Puntos: 7
Código PHP:
<table cellpadding="4" cellspacing="1" border="0" width="100%">
 <tr>
 <td bgcolor="#becfdf" valign="top"><font face="arial, verdana, helvetica" size="2"><b>Código 
 vB</b></font><font face="verdana, arial, helvetica" size="1"><br>
 <input type="radio" name="mode" value="0" title="Modo Normal: (alt+n)" accesskey="n" onclick="setmode(this.value)"
 onmouseover="stat('norm')" checked> Modo Normal<br>
 <input type="radio" name="mode" value="1" title="Modo Mejorado (alt+e)" accesskey="e" onclick="setmode(this.value)"
 onmouseover="stat('enha')"> Modo Mejorado</font></td>
 <td bgcolor="#becfdf">
 <table cellpadding="0" cellspacing="0" border="0">
 <tr>
 <td nowrap><font face="verdana, arial, helvetica" size="1"> <input type="button" class="bginput" value=" B " onclick="vbcode(this.form,'B','')" onmouseover="stat('b')"
 title="BOLD (alt+b)" accesskey="b" NAME="Button1"><input type="button" class="bginput" value=" I " onclick="vbcode(this.form,'I','')" onmouseover="stat('i')"
 title="ITALIC (alt+i)" accesskey="i" NAME="Button2"><input type="button" class="bginput" value=" U " onclick="vbcode(this.form,'U','')" onmouseover="stat('u')"
 title="UNDERLINE (alt+u)" accesskey="u" NAME="Button3"> &nbsp;
 <select onchange="fontformat(this.form,this.options[this.selectedIndex].value,'SIZE')"
 onmouseover="stat('size')" NAME="sizeselect">
 <option value="0" selected>Tamaño</option>
 <option value="1">pequeño</option>
 <option value="3">grande</option>
 <option value="4">enorme</option>
 </select><select onchange="fontformat(this.form,this.options[this.selectedIndex].value,'FONT')"
 onmouseover="stat('font')" NAME="fontselect">
 <option value="0" selected>Fuente</option>
 <option value="arial">Arial</option>
 <option value="times new roman">Times</option>
 <option value="courier new">Courier</option>
 <option value="century gothic">Century</option>
 </select><select onchange="fontformat(this.form,this.options[this.selectedIndex].value,'COLOR')"
 onmouseover="stat('color')" NAME="colorselect">
 <option value="0" selected>Color</option>
 <option value="skyblue" style="COLOR:skyblue">sky blue</option>
 <option value="royalblue" style="COLOR:royalblue">royal blue</option>
 <option value="blue" style="COLOR:blue">blue</option>
 <option value="darkblue" style="COLOR:darkblue">dark-blue</option>
 </select>
 <br>
 <input type="button" class="bginput" value="http://" title="Insert Hyperlink" onclick="namedlink(this.form,'URL')"
 onmouseover="stat('url')" NAME="Button4"><input type="button" class="bginput" value=" @ " title="Insertar una Dirección de Email"
 onclick="namedlink(this.form,'EMAIL')" onmouseover="stat('email')" NAME="Button5"><input type="button" class="bginput" value="IMG" title="Insertar una Imagen" onclick="vbcode(this.form,'IMG','http://')"
 onmouseover="stat('img')" NAME="Button6"> &nbsp; <input type="button" class="bginput" value=" # " title="CODE" onclick="vbcode(this.form,'CODE','')"
 onmouseover="stat('code')" NAME="Button7"><input type="button" class="bginput" value="PHP" title="Código PHP" onclick="vbcode(this.form,'PHP','')"
 onmouseover="stat('php')" NAME="Button8"> <input type="button" class="bginput" value="Lista" title="Lista Ordenada" accesskey="l"
 onclick="dolist(this.form)" onmouseover="stat('list')" NAME="Button9">
 <input type="button" class="bginput" value="Citar" title="Insertar una Cita" onclick="vbcode(this.form,'QUOTE','')"
 onmouseover="stat('quote')" NAME="Button10">
 <br>
 <input type="text" class="bginput" name="status" style="FONT-SIZE:7pt" size="50" value="Utiliza estos controles para insertar vBcode"></font>
 </td>
 <td>&nbsp;</td>
 <td><font face="verdana, arial, helvetica" size="1"> <input type="button" class="bginput" value=" x " accesskey="c" title="Close Current Tag (alt+c)"
 style="FONT-WEIGHT:bold; COLOR:red" onclick="closetag(this.form)" onmouseover="stat('closecurrent')" NAME="Button11">
 Cerrar el Tag Actual<br>
 <input type="button" class="bginput" value=" x " accesskey="x" title="Close All Open Tags (alt+x)"
 style="FONT-WEIGHT:bold; COLOR:red" onclick="closeall(this.form)" onmouseover="stat('closeall')"
 NAME="Button12"> Cerrar todos los Tags</font></td>
 </tr>
 </table>
 </td>
 </tr>
 <tr>
 <td bgcolor="#becfdf" valign="top" nowrap>
 <table cellpadding="3" cellspacing="1" border="0" bgcolor="#dbe7f3" class="smilieTable"
 align="center">
 <tr>
 <td colspan="4" align="center" bgcolor="#becfdf" style="BORDER-RIGHT:1px inset; BORDER-TOP:1px inset; BORDER-LEFT:1px inset; BORDER-BOTTOM:1px inset"><font face="verdana, arial, helvetica" size="1"><b>Smilies</b></font></td>
 </tr>
 <tr align='center'>
 <td vAlign="top" align="center"><a href="#" onclick="smilie(':-)');return false"><img src="images/smilies/smile.gif" alt="sonrie" border="0"></a>
</td>
 <td><a href="#" onclick="smilie(':-(');return false"><img src="images/smilies/frown.gif" alt="triste" border="0"></a>
</td>
 <td><a href="#" onclick="smilie(':pensando:');return false"><img src="images/smilies/scratchchin.gif" alt="Pensando" border="0"></a>
</td>
 <td><a href="#" onclick="smilie(':-D');return false"><img src="images/smilies/biggrin.gif" alt="sonrisota" border="0"></a>
</td>
 </tr>
 <tr align='center'>
 <td><a href="#" onclick="smilie(';-)');return false"><img src="images/smilies/wink.gif" alt="apachar ojo" border="0"></a>
</td>
 <td><a href="#" onclick="smilie(':cool:');return false"><img src="images/smilies/cool.gif" alt="cool" border="0"></a>
</td>
 <td><a href="#" onclick="smilie(':arriba:');return false"><img src="images/smilies/dedosarriba.gif" alt="de acuerdo" border="0"></a>
</td>
 <td><a href="#" onclick="smilie(':borracho:');return false"><img src="images/smilies/borracho.gif" alt="borracho" border="0"></a>
</td>
 </tr>
 <tr align='center'>
 <td><a href="#" onclick="smilie(':\'(');return false"><img src="images/smilies/chillando.gif" alt="lloron" border="0"></a>
</td>
 <td><a href="#" onclick="smilie(':abajo:');return false"><img src="images/smilies/dedosabajo.gif" alt="en desacuerdo" border="0"></a>
</td>
 <td><a href="#" onclick="smilie(':Zzz:');return false"><img src="images/smilies/durmiendo.gif" alt="dormir" border="0"></a>
</td>
 <td><a href="#" onclick="smilie(':molesto:');return false"><img src="images/smilies/enojado.gif" alt="enojado" border="0"></a>
</td>
 </tr>
 <tr align='center'>
 <td><a href="#" onclick="smilie(':ojotes:');return false"><img src="images/smilies/ojotes.gif" alt="ojotes" border="0"></a>
</td>
 <td><a href="#" onclick="smilie(':no:');return false"><img src="images/smilies/negar.gif" alt="Negando" border="0"></a>
</td>
 <td><a href="#" onclick="smilie(':censura:');return false"><img src="images/smilies/sho.gif" alt="censurado" border="0"></a>
</td>
 <td><a href="#" onclick="smilie(':-p');return false"><img src="images/smilies/wacala.gif" alt="wacala" border="0"></a>
</td>
 </tr>
 <tr align='center'>
 <td><a href="#" onclick="smilie(':pirata:');return false"><img src="images/smilies/pirate.gif" alt="Pirata" border="0"></a>
</td>
 <td><a href="#" onclick="smilie(':neurotico');return false"><img src="images/smilies/scared.gif" alt="Neurótico" border="0"></a>
</td>
 <td><a href="#" onclick="smilie(':si:');return false"><img src="images/smilies/afirmar.gif" alt="Afirmando" border="0"></a>
</td>
 <td><a href="#" onclick="smilie(':policia:');return false"><img src="images/smilies/cop.gif" alt="Policia" border="0"></a>
</td>
 </tr>
 <tr align='center'>
 <td><a href="#" onclick="smilie(':patada:');return false"><img src="images/smilies/footinmouth.gif" alt="Patada" border="0"></a>
</td>
 <td><a href="#" onclick="smilie(':corazon:');return false"><img src="images/smilies/heartbeat.gif" alt="Corazón" border="0"></a>
</td>
 <td><a href="#" onclick="smilie(':aplauso:');return false"><img src="images/smilies/aplausos.gif" alt="Aplauso" border="0"></a>
</td>
 <td><a href="#" onclick="smilie(':golpeado:');return false"><img src="images/smilies/pelea.gif" alt="Golpeado" border="0"></a>
</td>
 </tr>
 <tr align='center'>
 <td><a href="#" onclick="smilie(':risa:');return false"><img src="images/smilies/risa.gif" alt="Riendo" border="0"></a>
</td>
 <td><a href="#" onclick="smilie(':stress:');return false"><img src="images/smilies/tstress.gif" alt="Stress" border="0"></a>
</td>
 <td><a href="#" onclick="smilie(':serio:');return false"><img src="images/smilies/molesto.gif" alt="Serio" border="0"></a>
</td>
 <td><a href="#" onclick="smilie(':adios:');return false"><img src="images/smilies/adios.gif" alt="Adios" border="0"></a>
</td>
 </tr>
 </table>
 </td>
 <td valign="top" bgcolor="#becfdf">
 <font face="arial, verdana, helvetica" size="2"><b>Mensaje:</b></font><br>
 <table cellpadding="0" cellspacing="0" border="0">
 <tr valign="top">
 <td><textarea name="message" rows="20" cols="70" wrap="virtual" tabindex="2" onChange="getActiveText(this)"
 onClick="getActiveText(this)"></textarea></td>
 </tr>
 </table>
 </td>
 </tr>
</table> 
  #4 (permalink)  
Antiguo 12/05/2004, 06:15
 
Fecha de Ingreso: abril-2004
Mensajes: 260
Antigüedad: 20 años
Puntos: 1
ok
Todavía no pude chequearlo, pero MUCHÍSIMAS GRACIAS de antemano.
Luego te comento, saludos.

__________________
:serio: :adios:
  #5 (permalink)  
Antiguo 17/05/2004, 06:51
 
Fecha de Ingreso: abril-2004
Mensajes: 260
Antigüedad: 20 años
Puntos: 1
eh........... no
Todo bien, pero el tema es que ese código está llamando a dos archivos de javascript que no tengo:
Código: 
<script language="Javascript" src="vbcode.js"></script>
<script language="Javascript" rc="vbcode_language.js"></script>
Alguien tiene esas funciones o sabe como conseguir esos archivos o tiene sus funciones hechas para realizar esta tarea o puede ayudarme de alguna manera?...
Mil gracias.

__________________
:serio: :adios:
  #6 (permalink)  
Antiguo 17/05/2004, 11:04
Avatar de KarlanKas
Moderador extraterrestre
  
Fecha de Ingreso: diciembre-2001
Ubicación: Madrid
Mensajes: 6.987
Antigüedad: 22 años, 4 meses
Puntos: 61

http://www.forosdelweb.com/vbcode.js
http://www.forosdelweb.com/vbcode_language.js

Ahí los tienes!
__________________
Cómo escribir

No hay pregunta tonta, sino tonto que quiere seguir en la ignorancia.
  #7 (permalink)  
Antiguo 17/05/2004, 11:10
Avatar de KarlanKas
Moderador extraterrestre
  
Fecha de Ingreso: diciembre-2001
Ubicación: Madrid
Mensajes: 6.987
Antigüedad: 22 años, 4 meses
Puntos: 61
Pero es más sencillo hacerlo así:

function textar(como){

texto="["+como+"]";
resto=prompt("Introduzca aquí su texto","","");
if(resto){texto+=resto
texto+="[/"+como+"]";
}
else{
texto=""}
document.forms[0].editor.value+=texto;
}

Luego para poner negritas por ejemplo pones:

<input type="button" value="B" onclick="textar('B')">

Ten en cuenta que el textarea debe llamarse editor para que funcione.

Un ejemplo:

<html>
<head>
<title>Untitled</title>
<script>
function textar(como){

texto="["+como+"]";
resto=prompt("Introduzca aquí su texto","","");
if(resto){texto+=resto
texto+="[/"+como+"]";
}
else{
texto=""}
document.forms[0].editor.value+=texto;
}

</script>
</head>

<body>
<form>
<textarea name="editor"></textarea>

</form>

<input type="button" value="B" onclick="textar('B')">
<input type="button" value="I" onclick="textar('I')">
<input type="button" value="S" onclick="textar('S')">

</body>
</html>
__________________
Cómo escribir

No hay pregunta tonta, sino tonto que quiere seguir en la ignorancia.
Última edición por KarlanKas; 17/05/2004 a las 11:13
  #8 (permalink)  
Antiguo 17/05/2004, 17:22
Avatar de caricatos
Moderador
  
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 22 años
Puntos: 1284
Hola hemiliano:

Sigue este mensaje: http://www.forosdelweb.com/sdc3784e8...msg202511.html

Y los enlaces que puse, porque creo que te pueden ayudar.

Saludos
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 10:18.