Foros del Web » Creando para Internet » Sistemas de gestión de contenidos »

Programar editor de texto

 Estas en el tema de Programar editor de texto en el foro de Sistemas de gestión de contenidos en Foros del Web. Deseo programar un editor de texto con funciones basicas, como subrayar, tipo fuente, cursiva , negrita y color de fuente. Estoy usando php, mysql, html, ...
  #1 (permalink)  
Antiguo 13/11/2003, 12:12
 
Fecha de Ingreso: octubre-2003
Mensajes: 35
Antigüedad: 20 años, 6 meses
Puntos: 0
Pregunta Programar editor de texto
Deseo programar un editor de texto con funciones basicas, como subrayar, tipo fuente, cursiva , negrita y color de fuente.
Estoy usando php, mysql, html, javascript y apache.

¿cómo lo hago?
si alguien me manda un script, se lo agradecería

Gracias a todos
  #2 (permalink)  
Antiguo 19/03/2009, 20:03
 
Fecha de Ingreso: marzo-2009
Mensajes: 74
Antigüedad: 15 años, 1 mes
Puntos: 0
Respuesta: Programar editor de texto
Hola:

Yo tengo uno que tiene lo que necesitas, funciona perfecto solo que quiero mejorarlo añadiendo más opciones si logras encontrar algunas otras funciones como insertar tabla, resaltar texto, etc por favor escribeme, este es el script

Código javascript: 
Ver original
  1. <STYLE TYPE="text/css">
  2. TABLE#tblCoolbar 
  3.     { 
  4.     background-color:threedface; padding:1px; color:menutext; 
  5.     border-width:1px; border-style:solid; 
  6.     border-color:threedhighlight threedshadow threedshadow threedhighlight;
  7.     }
  8. .cbtn
  9.     {
  10.     height:18;
  11.     BORDER-LEFT: threedface 1px solid;
  12.     BORDER-RIGHT: threedface 1px solid;
  13.     BORDER-TOP: threedface 1px solid;
  14.     BORDER-BOTTOM: threedface 1px solid; 
  15.     }
  16. .txtbtn {font-family:tahoma; font-size:70&#37;; color:menutext;}
  17. </STYLE>
  18.  
  19. <script LANGUAGE="JavaScript">
  20. function button_over(eButton)
  21.     {
  22.     eButton.style.backgroundColor = "#B5BDD6";
  23.     eButton.style.borderColor = "darkblue darkblue darkblue darkblue";
  24.     }
  25. function button_out(eButton)
  26.     {
  27.     eButton.style.backgroundColor = "threedface";
  28.     eButton.style.borderColor = "threedface";
  29.     }
  30. function button_down(eButton)
  31.     {
  32.     eButton.style.backgroundColor = "#8494B5";
  33.     eButton.style.borderColor = "darkblue darkblue darkblue darkblue";
  34.     }
  35. function button_up(eButton)
  36.     {
  37.     eButton.style.backgroundColor = "#B5BDD6";
  38.     eButton.style.borderColor = "darkblue darkblue darkblue darkblue";
  39.     eButton = null; 
  40.     }
  41. //~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  42.  
  43. var isHTMLMode=false
  44.  
  45. function document.onreadystatechange()
  46.     {
  47.     idContent.document.designMode="On"
  48.     }
  49. function cmdExec(cmd,opt) 
  50.     {
  51.     if (isHTMLMode){alert("Please uncheck 'Edit HTML'");return;}
  52.     idContent.document.execCommand(cmd,"",opt);idContent.focus();
  53.     }
  54. function setMode(bMode)
  55.     {
  56.     var sTmp;
  57.     isHTMLMode = bMode;
  58.     if (isHTMLMode){sTmp=idContent.document.body.innerHTML;idContent.document.body.innerText=sTmp;} 
  59.     else {sTmp=idContent.document.body.innerText;idContent.document.body.innerHTML=sTmp;}
  60.     idContent.focus();
  61.     }
  62. function createLink()
  63.     {
  64.     if (isHTMLMode){alert("Please uncheck 'Edit HTML'");return;}
  65.     cmdExec("CreateLink");
  66.     }
  67. function insertImage()
  68.     {
  69.     if (isHTMLMode){alert("Please uncheck 'Edit HTML'");return;}
  70.     var sImgSrc=prompt("Insert Image File (You can use your local image file) : ", "pag-inicio.gif");
  71.     if(sImgSrc!=null) cmdExec("InsertImage",sImgSrc);
  72.     }
  73. function Save() 
  74.     {
  75.     if (isHTMLMode){alert("Please uncheck 'Edit HTML'");return;}
  76.     var sImgTag = idContent.document.body.all.tags("IMG");
  77.     var oImg;
  78.     for (var i = sImgTag.length - 1; i >= 0; i--) 
  79.         {
  80.         oImg = sImgTag[i];
  81.         alert("Add your code to Upload local image file here. Image Inserted : " + oImg.src );
  82.         }
  83.     alert("Add your code to Save Document here");
  84.     alert("Your Document : " + idContent.document.body.innerHTML);
  85.     }
  86. function foreColor()
  87.     {
  88.     var arr = showModalDialog("selcolor.htm","","font-family:Verdana; font-size:12; dialogWidth:30em; dialogHeight:34em" );
  89.     if (arr != null) cmdExec("ForeColor",arr);  
  90.     }
  91. function insertTable() 
  92.     {
  93.     var arr = showModalDialog("insert_table.htm","","font-family:Verdana; font-size:12; dialogWidth:30em; dialogHeight:35em" );
  94.     if (arr != null) cmdExec("insertTable",arr);
  95.     }
  96.  
  97. </script>

Saludos y suerte
  #3 (permalink)  
Antiguo 19/03/2009, 20:04
 
Fecha de Ingreso: marzo-2009
Mensajes: 74
Antigüedad: 15 años, 1 mes
Puntos: 0
Respuesta: Programar editor de texto
Código javascript: 
Ver original
  1. <body>
  2.  
  3. <P><STRONG><FONT size=3>Online Content Editor</FONT></STRONG></P>
  4.  
  5. <table id="tblCoolbar" width=542 cellpadding="0" cellspacing="0">
  6. <tr valign="middle">
  7.  
  8.     <td colspan=16 width="369">
  9.         <select onchange="cmdExec('formatBlock',this[this.selectedIndex].value);this.selectedIndex=0">
  10.             <option selected>Estilo</option>
  11.             <option value="Normal">Normal</option>
  12.             <option value="Heading 1">Heading 1</option>
  13.             <option value="Heading 2">Heading 2</option>
  14.             <option value="Heading 3">Heading 3</option>
  15.             <option value="Heading 4">Heading 4</option>
  16.             <option value="Heading 5">Heading 5</option>
  17.             <option value="Address">Address</option>
  18.             <option value="Formatted">Formatted</option>
  19.             <option value="Definition Term">Definition Term</option>
  20.         </select> 
  21.         <select onchange="cmdExec('fontname',this[this.selectedIndex].value);">
  22.             <option selected>Font</option>
  23.             <option value="Arial">Arial</option>
  24.             <option value="Arial Black">Arial Black</option>
  25.             <option value="Arial Narrow">Arial Narrow</option>
  26.             <option value="Comic Sans MS">Comic Sans MS</option>
  27.             <option value="Courier New">Courier New</option>
  28.             <option value="System">System</option>
  29.             <option value="Tahoma">Tahoma</option>
  30.             <option value="Times New Roman">Times New Roman</option>
  31.             <option value="Verdana">Verdana</option>
  32.             <option value="Wingdings">Wingdings</option>
  33.         </select> 
  34.         <select onchange="cmdExec('fontsize',this[this.selectedIndex].value);">
  35.             <option selected>Size</option>
  36.             <option value="1">1</option>
  37.             <option value="2">2</option>
  38.             <option value="3">3</option>
  39.             <option value="4">4</option>
  40.             <option value="5">5</option>
  41.             <option value="6">6</option>
  42.             <option value="7">7</option>
  43.             <option value="8">8</option>
  44.             <option value="10">10</option>
  45.             <option value="12">12</option>
  46.             <option value="14">14</option>
  47.         </select> 
  48.         
  49.     </td>
  50.     
  51. </tr>
  52. <tr>
  53.  
  54.     <td width="20"><div class="cbtn" onClick="cmdExec('cut')" onmouseover="button_over(this);" onmouseout="button_out(this);" onmousedown="button_down(this);" onmouseup="button_up(this);">
  55.     <img hspace="1" vspace=1 align=middle src="includes/imagenes/0015-bs_cut.gif" alt="Cut" width="16" height="16">
  56.     </div></td>
  57.     
  58.     <td width="20"><div class="cbtn" onClick="cmdExec('copy')" onmouseover="button_over(this);" onmouseout="button_out(this);" onmousedown="button_down(this);" onmouseup="button_up(this);">
  59.     <img hspace="1" vspace=1 align=middle src="includes/imagenes/0013-bs_copy.gif" alt="Copy" width="16" height="16">
  60.     </div></td> 
  61.     
  62.     <td width="20"><div class="cbtn" onClick="cmdExec('paste')" onmouseover="button_over(this);" onmouseout="button_out(this);" onmousedown="button_down(this);" onmouseup="button_up(this);">
  63.     <img hspace="1" vspace=1 align=middle src="includes/imagenes/0073-bs_paste.gif" alt="Paste" width="16" height="16">
  64.     </div></td> 
  65.     
  66.     <td width="20"><div class="cbtn" onClick="cmdExec('bold')" onmouseover="button_over(this);" onmouseout="button_out(this);" onmousedown="button_down(this);" onmouseup="button_up(this);">
  67.     <img hspace="1" vspace=1 align=middle src="includes/imagenes/0046-bs_formatBold_en.gif" alt="Bold" width="16" height="16">
  68.     </div></td>
  69.     
  70.     <td width="20"><div class="cbtn" onClick="cmdExec('italic')" onmouseover="button_over(this);" onmouseout="button_out(this);" onmousedown="button_down(this);" onmouseup="button_up(this);">
  71.     <img hspace="1" vspace=1 align=middle src="includes/imagenes/0048-bs_formatItalic_en.gif" alt="Italic" width="16" height="16">
  72.     </div></td> 
  73.     
  74.     <td width="20"><div class="cbtn" onClick="cmdExec('underline')" onmouseover="button_over(this);" onmouseout="button_out(this);" onmousedown="button_down(this);" onmouseup="button_up(this);">
  75.     <img hspace="1" vspace=1 align=middle src="includes/imagenes/0049-bs_formatUnderline.gif" alt="Underline" width="16" height="16">
  76.     </div></td>     
  77.         
  78.     <td width="20"><div class="cbtn" onClick="cmdExec('justifyleft')" onmouseover="button_over(this);" onmouseout="button_out(this);" onmousedown="button_down(this);" onmouseup="button_up(this);">
  79.     <img hspace="1" vspace=1 align=middle src="includes/imagenes/0003-bs_alignLeft.gif" alt="Justify Left" width="16" height="16">
  80.     </div></td>
  81.     
  82.     <td width="20"><div class="cbtn" onClick="cmdExec('justifycenter')" onmouseover="button_over(this);" onmouseout="button_out(this);" onmousedown="button_down(this);" onmouseup="button_up(this);">
  83.     <img hspace="1" vspace=1 align=middle src="includes/imagenes/0002-bs_alignCenter.gif" alt="Center" width="16" height="16">
  84.     </div></td> 
  85.     
  86.     <td width="20"><div class="cbtn" onClick="cmdExec('justifyright')" onmouseover="button_over(this);" onmouseout="button_out(this);" onmousedown="button_down(this);" onmouseup="button_up(this);">
  87.     <img hspace="1" vspace=1 align=middle src="includes/imagenes/0004-bs_alignRight.gif" alt="Justify Right" width="16" height="16">
  88.     </div></td>     
  89.     
  90.     <td width="22"><div class="cbtn" onClick="cmdExec('insertorderedlist')" onmouseover="button_over(this);" onmouseout="button_out(this);" onmousedown="button_down(this);" onmouseup="button_up(this);">
  91.     <img hspace="2" vspace=1 align=middle src="includes/imagenes/0069-bs_ol.gif" alt="Ordered List" width="16" height="16">
  92.     </div></td> 
  93.  
  94.     <td width="22"><div class="cbtn" onClick="cmdExec('insertunorderedlist')" onmouseover="button_over(this);" onmouseout="button_out(this);" onmousedown="button_down(this);" onmouseup="button_up(this);">
  95.     <img hspace="2" vspace=1 align=middle src="includes/imagenes/0097-bs_ul.gif" alt="Unordered List" width="16" height="16">
  96.     </div></td>
  97.         
  98.     <td width="22"><div class="cbtn" onClick="cmdExec('outdent')" onmouseover="button_over(this);" onmouseout="button_out(this);" onmousedown="button_down(this);" onmouseup="button_up(this);">
  99.     <img hspace="2" vspace=1 align=middle src="includes/imagenes/0072-bs_outdent.gif" alt="Decrease Indent" width="16" height="16">
  100.     </div></td> 
  101.     
  102.     <td width="22"><div class="cbtn" onClick="cmdExec('indent')" onmouseover="button_over(this);" onmouseout="button_out(this);" onmousedown="button_down(this);" onmouseup="button_up(this);">
  103.     <img hspace="2" vspace=1 align=middle src="includes/imagenes/0056-bs_indent.gif" alt="Increase Indent" width="16" height="16">
  104.     </div></td>         
  105.     
  106.     <td width="22"><div class="cbtn" onClick="foreColor()" onmouseover="button_over(this);" onmouseout="button_out(this);" onmousedown="button_down(this);" onmouseup="button_up(this);">
  107.     <img hspace="2" vspace=1 align=middle src="includes/imagenes/0029-bs_fgColor.gif" alt="Forecolor" width="16" height="16">
  108.     </div></td>     
  109.     
  110.     <td width="22"><div class="cbtn" onClick="foreColor()" onmouseover="button_over(this);" onmouseout="button_out(this);" onmousedown="button_down(this);" onmouseup="button_up(this);">
  111.     <img border="0" src="includes/imagenes/0063-bs_lineColor.gif" width="16" height="16">
  112.     </div></td>     
  113.  
  114.     <td width="27"><div class="cbtn" onClick="cmdExec('createLink')" onmouseover="button_over(this);" onmouseout="button_out(this);" onmousedown="button_down(this);" onmouseup="button_up(this);">
  115.     <img hspace="2" vspace=1 align=middle src="includes/imagenes/createlink.gif" alt="Link" width="21" height="20">
  116.     </div></td> 
  117.     
  118.     <td width="22"><div class="cbtn" onClick="insertImage()" onmouseover="button_over(this);" onmouseout="button_out(this);" onmousedown="button_down(this);" onmouseup="button_up(this);">
  119.     <img hspace="2" vspace=1 align=middle src="includes/imagenes/0055-bs_image.gif" alt="Image" width="16" height="16">
  120.     </div></td>     
  121.     
  122.     <td width="26">
  123.     <div class="cbtn" onClick="Save()" onmouseover="button_over(this);" onmouseout="button_out(this);" onmousedown="button_down(this);" onmouseup="button_up(this);" style="width: 22; height: 24">
  124.     <img  hspace="2" vspace=1 align=middle align=absmiddle src="includes/imagenes/0078-bs_save.gif" alt="Save" width="16" height="16"><font class=txtbtn>&nbsp;</font>
  125.     </div></td>
  126.     
  127.     <td width="17"><div class="cbtn" onClick="insertTable()" onmouseover="button_over(this);" onmouseout="button_out(this);" onmousedown="button_down(this);" onmouseup="button_up(this);">
  128.     <img hspace="2" vspace=1 align=middle src="includes/imagenes/0085-bs_table.gif" alt="insertable" width="16" height="16">
  129.     </div></td> 
  130.         
  131.     <td width="124">&nbsp;</td>     
  132.         
  133. </tr>
  134. </table>
  135.  
  136. <iframe width="542" id="idContent" height="350"></iframe> 
  137. <br>
  138. <input type="checkbox" onclick="setMode(this.checked)" value="ON"> Edit HTML
  139. </body>
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 12:58.