JAVASCRIPT 6
Htmledit.js Guest on 8th April 2021 04:11:00 AM
  1. var P = "";
  2. P += "<style>\n";
  3. P += ".htmleditor { width:%WIDTH%; height:%HEIGHT%; border: outset 1px; padding: 2px; background-color: #dfdfdf; }\n";
  4. P += ".htmleditor span { width: 100%; height:100%; background-color: white; border: inset 1px; overflow: auto; padding: 2px; margin: 0px; font-face: Verdana; }\n";
  5. P += ".htmleditor span p { margin: 0px; margin-bottom: 5pt; }\n";
  6. P += ".htmleditor .btn { padding: 0px; margin: 1px 1px 1px 0px; border: outset 1px; width: 22px; height: 21px; background-color: #cccccc; }\n";
  7. P += ".htmleditor select { font: xx-small Arial; padding: 0px; margin: 1px 0px 1px 0px; }\n";
  8. P += ".htmleditor ul, .htmleditor ol { margin-left:20px; }\n";
  9. P += "</style>\n";
  10. P += "<script>\n";
  11. P += "function %ID%CallCommand(cmd, param) {\n";
  12. P += "document.all.%ID%.focus();\n";
  13. P += "if(\"FontName\" == cmd || \"FontSize\" == cmd || \"ForeColor\" == cmd) {\n";
  14. P += "document.execCommand(cmd, true, param);\n";
  15. P += "} else if(\"InsertImage\" == cmd) {\n";
  16. P += "document.execCommand(cmd, true, \"\");\n";
  17. P += "} else if(cmd.length > 0) document.execCommand(cmd);\n";
  18. P += "}\n";
  19. P += "</script>\n";
  20. P += "<span class=htmleditor><table border=0 cellspacing=0 cellpadding=0 width=%WIDTH% height=%HEIGHT%>\n";
  21. P += "<tr><td><font face=Verdana size=2 color=black><span id=%ID% contentEditable onfocusout='%PARENT%.value=this.innerHTML' style='font-size:85%;'></span></font></td></tr>\n";
  22. P += "<tr><td height=1%>\n";
  23. P += "<nobr>\n";
  24. P += "<button class=btn unselectable=on onclick='%ID%CallCommand(\"Bold\")' title=\"Negrita\"><img src='../img/bold.gif' width=17 height=16 border=0></button>\n";
  25. P += "<button class=btn unselectable=on onclick='%ID%CallCommand(\"Italic\");' title=\"Cursiva\"><img src='../img/italic.gif' width=17 height=16 border=0></button>\n";
  26. P += "<wbr><img src='#' width=1 height=1><wbr>\n";
  27. P += "<button class=btn unselectable=on onclick='%ID%CallCommand(\"JustifyLeft\");' title=\"Alinear a la izquierda\"><img src='../img/left.gif' width=17 height=16 border=0></button>\n";
  28. P += "<button class=btn unselectable=on onclick='%ID%CallCommand(\"JustifyCenter\");' title=\"Centrar\"><img src='../img/center.gif' width=17 height=16 border=0></button>\n";
  29. P += "<button class=btn unselectable=on onclick='%ID%CallCommand(\"JustifyRight\");' title=\"Alinear a la derecha\"><img src='../img/right.gif' width=17 height=16 border=0></button>\n";
  30. P += "<wbr><img src='#' width=1 height=1><wbr>\n";
  31. P += "<button class=btn unselectable=on onclick='%ID%CallCommand(\"Cut\");' title=\"Cortar\"><img src='../img/cut.gif' width=17 height=16 border=0></button>\n";
  32. P += "<button class=btn unselectable=on onclick='%ID%CallCommand(\"Copy\");' title=\"Copiar\"><img src='../img/copy.gif' width=17 height=16 border=0></button>\n";
  33. P += "<button class=btn unselectable=on onclick='%ID%CallCommand(\"Paste\");' title=\"Pegar\"><img src='../img/paste.gif' width=17 height=16 border=0></button>\n";
  34. //P += "<wbr><img src='#' width=1 height=1><wbr>\n";
  35. //P += "<button class=btn unselectable=on onclick='%ID%CallCommand(\"Undo\");' title=\"Deshacer\"><img src='../img/undo.gif' width=17 height=16 border=0></button>\n";
  36. //P += "<button class=btn unselectable=on onclick='%ID%CallCommand(\"Redo\");' title=\"Rehacer\"><img src='../img/redo.gif' width=17 height=16 border=0></button>\n";
  37. P += "<wbr><img src='#' width=1 height=1><wbr>\n";
  38. P += "<button class=btn unselectable=on onclick='%ID%CallCommand(\"InsertOrderedList\");' title=\"Numeraci&oacute;n\"><img src='../img/ol.gif' width=17 height=16 border=0></button>\n";
  39. P += "<button class=btn unselectable=on onclick='%ID%CallCommand(\"InsertUnorderedList\");' title=\"Vi&ntilde;etas\"><img src='../img/ul.gif' width=17 height=16 border=0></button>\n";
  40. P += "<wbr><img src='#' width=1 height=1><wbr>\n";
  41. P += "<button class=btn unselectable=on onclick='%ID%CallCommand(\"Outdent\");' title=\"Reducir sangr&iacute;a\"><img src='../img/outdent.gif' width=17 height=16 border=0></button>\n";
  42. P += "<button class=btn unselectable=on onclick='%ID%CallCommand(\"Indent\");' title=\"Aumentar sangr&iacute;a\"><img src='../img/indent.gif' width=17 height=16 border=0></button>\n";
  43. P += "<wbr><img src='#' width=1 height=1><wbr>\n";
  44. P += "<button class=btn unselectable=on onclick='%ID%CallCommand(\"InsertHorizontalRule\");' title=\"Insertar l&iacute;nea horizontal\"><img src='../img/hr.gif' width=17 height=16 border=0></button>\n";
  45. P += "<wbr><img src='#' width=1 height=1><wbr>\n";
  46. P += "<button class=btn unselectable=on onclick='%ID%CallCommand(\"InsertImage\");' title=\"Insertar imagen\"><img src='../img/image.gif' width=17 height=16 border=0></button>\n";
  47. P += "<wbr><img src='#' width=1 height=1><wbr>\n";
  48. P += "<button class=btn unselectable=on onclick='%ID%CallCommand(\"CreateLink\");' title=\"Insertar enlace\"><img src='../img/a.gif' width=17 height=16 border=0></button>\n";
  49. P += "<wbr><img src='#' width=1 height=1><wbr>\n";
  50. P += "<button class=btn unselectable=on onclick='%ID%CallCommand(\"RemoveFormat\");' title=\"Borrar formato\"><img src='../img/new.gif' width=17 height=16 border=0></button>\n";
  51. P += "<wbr><img src='#' width=1 height=1><wbr><select onchange='%ID%CallCommand(\"FontName\",this[this.selectedIndex].text); this.selectedIndex=0;'>\n";
  52. P += "<option selected>Fuente</option>\n";
  53. P += "<option>Arial</option>\n";
  54. P += "<option>Comic Sans MS</option>\n";
  55. P += "<option>Courier New</option>\n";
  56. P += "<option>Garamond</option>\n";
  57. P += "<option>Georgia</option>\n";
  58. P += "<option>Tahoma</option>\n";
  59. P += "<option>Times New Roman</option>\n";
  60. P += "<option>Trebuchet MS</option>\n";
  61. P += "<option>Verdana</option>\n";
  62. P += "</select>&nbsp;<select onchange='%ID%CallCommand(\"FontSize\", this[this.selectedIndex].text);this.selectedIndex=0;'>\n";
  63. P += "<option>Tama&ntilde;o</option>\n";
  64. //P += "<option>-2</option>\n";
  65. //P += "<option>-1</option>\n";
  66. //P += "<option>0</option>\n";
  67. P += "<option>1</option>\n";
  68. P += "<option>2</option>\n";
  69. P += "<option>3</option>\n";
  70. //P += "<option>4</option>\n";
  71. //P += "<option>5</option>\n";
  72. P += "</select>";
  73. //P += "&nbsp;<select unselectable=on onchange='%ID%CallCommand(\"ForeColor\", this[this.selectedIndex].text); this.selectedIndex=0;'>\n";
  74. //P += "<option selected>Color</option>\n";
  75. //P += "<option style='background-color: #000000'>#000000</option>\n";
  76. //P += "<option style='background-color: #880000'>#880000</option>\n";
  77. //P += "<option style='background-color: #008800'>#008800</option>\n";
  78. //P += "<option style='background-color: #000088'>#000088</option>\n";
  79. //P += "<option style='background-color: #888800'>#888800</option>\n";
  80. //P += "<option style='background-color: #880088'>#880088</option>\n";
  81. //P += "<option style='background-color: #008888'>#008888</option>\n";
  82. //P += "<option style='background-color: #888888'>#888888</option>\n";
  83. //P += "<option style='background-color: #FF0000'>#FF0000</option>\n";
  84. //P += "<option style='background-color: #00FF00'>#00FF00</option>\n";
  85. //P += "<option style='background-color: #0000FF'>#0000FF</option>\n";
  86. //P += "<option style='background-color: #FFFF00'>#FFFF00</option>\n";
  87. //P += "<option style='background-color: #FF00FF'>#FF00FF</option>\n";
  88. //P += "<option style='background-color: #00FFFF'>#00FFFF</option>\n";
  89. //P += "<option style='background-color: #FFFFFF'>#FFFFFF</option>\n";
  90. //P += "</select>&nbsp;<wbr>\n";
  91. P += "</nobr>\n";
  92. P += "</td></tr>\n";
  93. P += "</table>\n";
  94. P += "</span>\n";
  95.  
  96. P += "<"+"script>\n";
  97. P += "function timeoutSetValue() {\n";
  98. P += "      %PARENT%.value=document.all.%ID%.innerHTML;\n";
  99. P += "      setTimeout('timeoutSetValue()', 100);\n";
  100. P += "}\n";
  101. P += "timeoutSetValue();\n";
  102. P += "</"+"script>\n";
  103.  
  104. //*****************************************************************************
  105. function str_replace(a, b, s) {
  106.       for(idx = 0; idx < s.length - a.length; idx++)
  107.             if(s.substring(idx, idx+a.length) == a) {
  108.                   s = s.substring(0, idx) + b + s.substring(idx + a.length, s.length);
  109.                   idx += b.length;
  110.             }
  111.       return s;
  112. }
  113.  
  114. //*****************************************************************************
  115. function insertHtmlEditor(id, parent, width, height) {
  116.       s = P;
  117.       s = str_replace("%ID%", id, s);
  118.       s = str_replace("%PARENT%", parent, s);
  119.       s = str_replace("%WIDTH%", width, s);
  120.       s = str_replace("%HEIGHT%", height, s);
  121.       document.write(s);
  122. }
  123.  
  124. //*****************************************************************************
  125. function initHtmlEditor(id, html) {
  126.       if(!html || !html.length) html = '<font face=Verdana size=1 color=black></font>';
  127.             else html = '<font face=Verdana size=2 color=black>'+html+'</font>';
  128.       eval("document.all."+id+".innerHTML = html");
  129.       eval("document.all."+id+".onfocusout();");
  130. }

Paste-bin is for source code and general debugging text.

Login or Register to edit, delete and keep track of your pastes and more.

Raw Paste

Login or Register to edit or fork this paste. It's free.