Por lo que quise empezar realizando un editor WYSIWYG, por lo que leyendo por aqui y por alla logro bocetar uno sencillo pero funcional, el cual ademas de faltarle lo referido al diseño tambien un par de funciones que me interesaria adicionarle,
se que siguiendo como vengo tengo chances de que queden pero hay algo que no logro imaginar como seria y no sabria como buscarlo por lo que aqui enseñandoles elcodigo sepan guiarme,
Lo que me gustaria poder hacer con este editor es -Añadirle un boton por el cual al clickearlo nos muestre en el text area el codigo html y no el texto enriquecido y viceversa.
Espero me halla sabido explicar, aca les dejo el codigo.
Código HTML:
<html> <head> </head> <body><center> <div style="width:500px; text-align:left; margin-bottom:10px "> <input type="button" id="bold" style="height:21px; width:21px; font-weight:bold;" value="B" onClick="fontEdit('bold')" /> <input type="button" id="italic" style="height:21px; width:21px; font-style:italic;" value="I" onClick="fontEdit('italic')" /> <input type="button" id="underline" style="height:21px; width:21px; text-decoration:underline;" value="U" onClick="fontEdit('underline')" /> | <input type="button" style="height:21px; width:21px;"value="L" onClick="fontEdit('justifyleft')" title="align left" /> <input type="button" style="height:21px; width:21px;"value="C" onClick="fontEdit('justifycenter')" title="center" /> <input type="button" style="height:21px; width:21px;"value="R" onClick="fontEdit('justifyright')" title="align right" /> | <select id="fonts" onChange="fontEdit('fontname',this[this.selectedIndex].value)"> <option value="Arial">Arial</option> <option value="Comic Sans MS">Comic Sans MS</option> <option value="Courier New">Courier New</option> <option value="Monotype Corsiva">Monotype</option> <option value="Tahoma">Tahoma</option> <option value="Times">Times</option> </select> <select id="size" onChange="fontEdit('fontsize',this[this.selectedIndex].value)"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> </select> <select id="color" onChange="fontEdit('ForeColor',this[this.selectedIndex].value)"> <option value="black">Negro</option> <option style="color:red;" value="red">Rojo</option> <option style="color:blue;" value="blue">Azul</option> <option style="color:green;" value="green">Verde</option> <option style="color:pink;" value="pink">Rosado</option> </select> </div> <iframe id="textEditor" style="width:500px; height:170px;"> </iframe> </center> <script type="text/javascript"> <!-- textEditor.document.designMode="on"; textEditor.document.open(); textEditor.document.write('<head><style type="text/css">body{ font-family:arial; font-size:13px; }</style> </head>'); textEditor.document.close(); function def() { document.getElementById("fonts").selectedIndex=0; document.getElementById("size").selectedIndex=1; document.getElementById("color").selectedIndex=0; } function fontEdit(x,y) { textEditor.document.execCommand(x,"",y); textEditor.focus(); } --> </script> </body> </html>
