Foros del Web » Programando para Internet » Javascript »

Ayuda con editor de texto para mi web

 Estas en el tema de Ayuda con editor de texto para mi web en el foro de Javascript en Foros del Web. Hola quiero poner un editor de texto para mi web pero quisiera agregarle mas opciones de edición, es un excelente script que encontré en el ...
  #1 (permalink)  
Antiguo 18/03/2009, 16:27
 
Fecha de Ingreso: marzo-2009
Mensajes: 74
Antigüedad: 15 años, 1 mes
Puntos: 0
Exclamación Ayuda con editor de texto para mi web
Hola quiero poner un editor de texto para mi web pero quisiera agregarle mas opciones de edición, es un excelente script que encontré en el foro, me pueden ayudar a agregarle las opciones de deshacer, rehacer, eliminar enlace, resaltar texto, insertar tabla,etc.
El script funciona perfecto y entre muchos es el mejor que he encontrado el único problema es que la opción de cambiar color de fuente function foreColor() no dá los colores, bueno les dejo el script para quienes quieran copiarlo y ojalá puedan ayudarme a mejorarlo:

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) : ", "url");
  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. </script>
Última edición por cara_luna; 18/03/2009 a las 20:30
  #2 (permalink)  
Antiguo 18/03/2009, 16:31
Avatar de David
Moderador
  
Fecha de Ingreso: abril-2005
Ubicación: In this planet
Mensajes: 15.720
Antigüedad: 19 años
Puntos: 839
Respuesta: Ayuda con editor de texto para mi web
Si no sabes mucho de Javascript. Quizás te resulte más fácil usar un Editor+WYSIWYG hecho, ya que en la mayoría de los casos ya traen esas opciones.
__________________
Por favor, antes de preguntar, revisa la Guía para realizar preguntas.
  #3 (permalink)  
Antiguo 18/03/2009, 16:53
 
Fecha de Ingreso: marzo-2009
Mensajes: 74
Antigüedad: 15 años, 1 mes
Puntos: 0
Respuesta: Ayuda con editor de texto para mi web
Segunda parte: Este es el cuerpo del editor entre <body> y</body>:

Código javascript: 
Ver original
  1. <P><STRONG><FONT size=3>Online Content Editor</FONT></STRONG></P>
  2.  
  3. <table id="tblCoolbar" width=542 cellpadding="0" cellspacing="0">
  4. <tr valign="middle">
  5.  
  6.     <td colspan=16>
  7.         <select onchange="cmdExec('formatBlock',this[this.selectedIndex].value);this.selectedIndex=0">
  8.             <option selected>Style</option>
  9.             <option value="Normal">Normal</option>
  10.             <option value="Heading 1">Heading 1</option>
  11.             <option value="Heading 2">Heading 2</option>
  12.             <option value="Heading 3">Heading 3</option>
  13.             <option value="Heading 4">Heading 4</option>
  14.             <option value="Heading 5">Heading 5</option>
  15.             <option value="Address">Address</option>
  16.             <option value="Formatted">Formatted</option>
  17.             <option value="Definition Term">Definition Term</option>
  18.         </select> 
  19.         <select onchange="cmdExec('fontname',this[this.selectedIndex].value);">
  20.             <option selected>Font</option>
  21.             <option value="Arial">Arial</option>
  22.             <option value="Arial Black">Arial Black</option>
  23.             <option value="Arial Narrow">Arial Narrow</option>
  24.             <option value="Comic Sans MS">Comic Sans MS</option>
  25.             <option value="Courier New">Courier New</option>
  26.             <option value="System">System</option>
  27.             <option value="Tahoma">Tahoma</option>
  28.             <option value="Times New Roman">Times New Roman</option>
  29.             <option value="Verdana">Verdana</option>
  30.             <option value="Wingdings">Wingdings</option>
  31.         </select> 
  32.         <select onchange="cmdExec('fontsize',this[this.selectedIndex].value);">
  33.             <option selected>Size</option>
  34.             <option value="1">1</option>
  35.             <option value="2">2</option>
  36.             <option value="3">3</option>
  37.             <option value="4">4</option>
  38.             <option value="5">5</option>
  39.             <option value="6">6</option>
  40.             <option value="7">7</option>
  41.             <option value="8">8</option>
  42.             <option value="10">10</option>
  43.             <option value="12">12</option>
  44.             <option value="14">14</option>
  45.         </select> 
  46.         
  47.     </td>
  48.     
  49. </tr>
  50. <tr>
  51.  
  52.     <td><div class="cbtn" onClick="cmdExec('cut')" onmouseover="button_over(this);" onmouseout="button_out(this);" onmousedown="button_down(this);" onmouseup="button_up(this);">
  53.     <img hspace="1" vspace=1 align=middle src="bs_cut.gif" alt="Cut" width="16" height="16">
  54.     </div></td>
  55.     
  56.     <td><div class="cbtn" onClick="cmdExec('copy')" onmouseover="button_over(this);" onmouseout="button_out(this);" onmousedown="button_down(this);" onmouseup="button_up(this);">
  57.     <img hspace="1" vspace=1 align=middle src="bs_copy.gif" alt="Copy" width="16" height="16">
  58.     </div></td> 
  59.     
  60.     <td><div class="cbtn" onClick="cmdExec('paste')" onmouseover="button_over(this);" onmouseout="button_out(this);" onmousedown="button_down(this);" onmouseup="button_up(this);">
  61.     <img hspace="1" vspace=1 align=middle src="bs_paste.gif" alt="Paste" width="16" height="16">
  62.     </div></td> 
  63.     
  64.     <td><div class="cbtn" onClick="cmdExec('bold')" onmouseover="button_over(this);" onmouseout="button_out(this);" onmousedown="button_down(this);" onmouseup="button_up(this);">
  65.     <img hspace="1" vspace=1 align=middle src="bs_formatBold_en.gif" alt="Bold" width="16" height="16">
  66.     </div></td>
  67.     
  68.     <td><div class="cbtn" onClick="cmdExec('italic')" onmouseover="button_over(this);" onmouseout="button_out(this);" onmousedown="button_down(this);" onmouseup="button_up(this);">
  69.     <img hspace="1" vspace=1 align=middle src="bs_formatItalic_en.gif" alt="Italic" width="16" height="16">
  70.     </div></td> 
  71.     
  72.     <td><div class="cbtn" onClick="cmdExec('underline')" onmouseover="button_over(this);" onmouseout="button_out(this);" onmousedown="button_down(this);" onmouseup="button_up(this);">
  73.     <img hspace="1" vspace=1 align=middle src="bs_formatUnderline.gif" alt="Underline" width="16" height="16">
  74.     </div></td>     
  75.         
  76.     <td><div class="cbtn" onClick="cmdExec('justifyleft')" onmouseover="button_over(this);" onmouseout="button_out(this);" onmousedown="button_down(this);" onmouseup="button_up(this);">
  77.     <img hspace="1" vspace=1 align=middle src="bs_alignLeft.gif" alt="Justify Left" width="16" height="16">
  78.     </div></td>
  79.     
  80.     <td><div class="cbtn" onClick="cmdExec('justifycenter')" onmouseover="button_over(this);" onmouseout="button_out(this);" onmousedown="button_down(this);" onmouseup="button_up(this);">
  81.     <img hspace="1" vspace=1 align=middle src="buttons/bs_alignCenter.gif" alt="Center" width="16" height="16">
  82.     </div></td> 
  83.     
  84.     <td><div class="cbtn" onClick="cmdExec('justifyright')" onmouseover="button_over(this);" onmouseout="button_out(this);" onmousedown="button_down(this);" onmouseup="button_up(this);">
  85.     <img hspace="1" vspace=1 align=middle src="bs_alignRight.gif" alt="Justify Right" width="16" height="16">
  86.     </div></td>     
  87.     
  88.     <td><div class="cbtn" onClick="cmdExec('insertorderedlist')" onmouseover="button_over(this);" onmouseout="button_out(this);" onmousedown="button_down(this);" onmouseup="button_up(this);">
  89.     <img hspace="2" vspace=1 align=middle src="buttons/bs_ol.gif" alt="Ordered List" width="16" height="16">
  90.     </div></td> 
  91.  
  92.     <td><div class="cbtn" onClick="cmdExec('insertunorderedlist')" onmouseover="button_over(this);" onmouseout="button_out(this);" onmousedown="button_down(this);" onmouseup="button_up(this);">
  93.     <img hspace="2" vspace=1 align=middle src="bs_ul.gif" alt="Unordered List" width="16" height="16">
  94.     </div></td>
  95.         
  96.     <td><div class="cbtn" onClick="cmdExec('outdent')" onmouseover="button_over(this);" onmouseout="button_out(this);" onmousedown="button_down(this);" onmouseup="button_up(this);">
  97.     <img hspace="2" vspace=1 align=middle src="bs_outdent.gif" alt="Decrease Indent" width="16" height="16">
  98.     </div></td> 
  99.     
  100.     <td><div class="cbtn" onClick="cmdExec('indent')" onmouseover="button_over(this);" onmouseout="button_out(this);" onmousedown="button_down(this);" onmouseup="button_up(this);">
  101.     <img hspace="2" vspace=1 align=middle src="bs_indent.gif" alt="Increase Indent" width="16" height="16">
  102.     </div></td>         
  103.     
  104.     <td><div class="cbtn" onClick="foreColor()" onmouseover="button_over(this);" onmouseout="button_out(this);" onmousedown="button_down(this);" onmouseup="button_up(this);">
  105.     <img hspace="2" vspace=1 align=middle src="bs_fgColor.gif" alt="Forecolor" width="16" height="16">
  106.     </div></td>         
  107.  
  108.     <td><div class="cbtn" onClick="cmdExec('createLink')" onmouseover="button_over(this);" onmouseout="button_out(this);" onmousedown="button_down(this);" onmouseup="button_up(this);">
  109.     <img hspace="2" vspace=1 align=middle src="createLink.gif" alt="Link" width="21" height="20">
  110.     </div></td> 
  111.     
  112.     <td><div class="cbtn" onClick="insertImage()" onmouseover="button_over(this);" onmouseout="button_out(this);" onmousedown="button_down(this);" onmouseup="button_up(this);">
  113.     <img hspace="2" vspace=1 align=middle src="image.gif" alt="Image" width="20" height="20">
  114.     </div></td>     
  115.     
  116.     <td><div class="cbtn" onClick="Save()" onmouseover="button_over(this);" onmouseout="button_out(this);" onmousedown="button_down(this);" onmouseup="button_up(this);">
  117.     <img  hspace="2" vspace=1 align=absmiddle align=absmiddle src="bs_save.gif" alt="Save" width="16" height="16"><font class=txtbtn>&nbsp;</font>
  118.     </div></td>     
  119.         
  120.     <td width=200></td> 
  121.     
  122. </tr>
  123. </table>
  124.  
  125. <iframe width="542" id="idContent" height="350"></iframe> 
  126. <br>
  127. <input type="checkbox" onclick="setMode(this.checked)" value="ON"> Edit HTML
Última edición por cara_luna; 18/03/2009 a las 20:26
  #4 (permalink)  
Antiguo 18/03/2009, 16:56
Avatar de David
Moderador
  
Fecha de Ingreso: abril-2005
Ubicación: In this planet
Mensajes: 15.720
Antigüedad: 19 años
Puntos: 839
Respuesta: Ayuda con editor de texto para mi web
Hola, cara_luna.

Como sugerencia, si vas a publicar código, por lo menos usa el tag HIGHLIGHT:
http://www.forosdelweb.com/f13/nuevo...codigo-625994/

Y, suerte con que alguien se anime a depurarlo :.
__________________
Por favor, antes de preguntar, revisa la Guía para realizar preguntas.
  #5 (permalink)  
Antiguo 18/03/2009, 19:38
 
Fecha de Ingreso: marzo-2009
Mensajes: 74
Antigüedad: 15 años, 1 mes
Puntos: 0
Respuesta: Ayuda con editor de texto para mi web
Gracias david en realidad soy nueva pidiendo ayuda, como inexperta he encontrado el codigo en el foro tal cual lo escribi, para ser novata no me costó ningún trabajo pasarlo a un block de notas para implementarlo y hacerlo funcionar no sabia que era necesario clasificarlo, de igual manera muchisimas gracias por tu aportación a mi duda en relación al tema.
Última edición por cara_luna; 18/03/2009 a las 20:44
  #6 (permalink)  
Antiguo 18/03/2009, 20:16
Avatar de David
Moderador
  
Fecha de Ingreso: abril-2005
Ubicación: In this planet
Mensajes: 15.720
Antigüedad: 19 años
Puntos: 839
Respuesta: Ayuda con editor de texto para mi web
No entiendo lo que quieres decir .

Por cierto, ¿has buscado sobre lo que te comentaba en el mensaje anterior? Un Editor WYSIWYG.
__________________
Por favor, antes de preguntar, revisa la Guía para realizar preguntas.
  #7 (permalink)  
Antiguo 18/03/2009, 20:42
 
Fecha de Ingreso: marzo-2009
Mensajes: 74
Antigüedad: 15 años, 1 mes
Puntos: 0
Respuesta: Ayuda con editor de texto para mi web
Muchas gracias david, en realidad el script funciona perfecto y para algunos puede parecer muy completo solo quisiera mejorarlo con algunas funciones extras, entre otros scripts editores de texto es el mejor que encontré y super facil de instalar, sobre todo con personas que inicamos en el tema.

Ya he descargado varios editores pero los he encontrado muy complicados en su instalación de igual manera voy a revisar el Editor WYSIWYG

Es un placer saludarte y muchas gracias por tus atenciones.
Última edición por cara_luna; 18/03/2009 a las 20:50
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 03:41.