arquivo index.php
<script> function smile(smile) { editCtl.document.write("<img src=\"../../../images/emotions/"+smile+".gif\" width=\"20\" height=\"20\" border=\"0\">"); } function abre_smiles(){ window.open('../../padrao/pop/emotions.php','acao','toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no,top=25,left=25,width=180,height=210'); } </script> <?php if(!$comentario and !$nome){ ?> <table width="454" border="1" cellpadding="0" cellspacing="0" bordercolor="<?=$tema_cor_borda; ?>"> <form method="post" name="comentario"> <tr> <td colspan="4" align="center" bordercolor="<?=$tema_cor_fundo; ?>" bgcolor="<?=$tema_cor_fundo; ?>"> Fazer comentário: </td> </tr> <tr> <td colspan="4" align="center" bordercolor="<?=$tema_cor_fundo; ?>" bgcolor="<?=$tema_cor_fundo; ?>"> <br> Seu nome: <input name="comentarios_dono" type="text" id="comentarios_dono" size="35" maxlength="20"> <br> Seu site: <input name="comentarios_site" type="text" id="comentarios_site" value="http://" size="37" maxlength="100"> <br> <br> </td> </tr> <tr> <td width="10" align="center" bordercolor="<?=$tema_cor_fundo; ?>" bgcolor="<?=$tema_cor_fundo; ?>"> </td> <td align="center" bordercolor="<?=$tema_cor_fundo; ?>" bgcolor="ffffff"> <a href="javascript:abre_smiles();"><img src="../../../images/emotions/smile.gif" width="20" height="20" border="0"></a> <script> var buttons=new Array(25,25,25,25,25,25,4,25,25,25,25,4,25,25,25); var action=new Array("bold","italic","underline","justifyleft","justifycenter","justifyright","","create","cut","copy","paste","","insertunorderedlist","outdent","indent"); var tooltip=new Array(L_BOLD,L_ITALIC,L_UNDERLINE,L_JUSLEFT,L_JUSCENTER,L_JUSRIGHT,"",L_BLANK,L_CUT,L_COPY,L_PASTE,"",L_LIST,L_OUTDENT,L_INDENT); drawToolbar("/images/botoes/toolbar.gif", 412, buttons, action, tooltip,0, null); </script> </td> <td align="center" bordercolor="<?=$tema_cor_fundo; ?>" bgcolor="#FFFFFF"><select name="select" id="zoom" STYLE="font:8pt arial;" onChange="editCtl.document.body.style.zoom=zoom.options[zoom.selectedIndex].value"> <option value="1.75">175%</option> <option value="1.50">150%</option> <option value="1.25">125%</option> <option value="1" selected>100%</option> <option value=".75">75%</option> <option value=".50">50%</option> <option value=".20">25%</option> </select> </td> <td width="10" align="center" bordercolor="<?=$tema_cor_fundo; ?>" bgcolor="<?=$tema_cor_fundo; ?>"> </td> </tr> <tr> <td colspan="4" align="center" bordercolor="<?=$tema_cor_fundo; ?>" bgcolor="<?=$tema_cor_fundo; ?>"> <input name="comentario" type="hidden" id="comentario" value=""> <iframe name=editCtl id=editCtl width=424 height="200" marginwidth=0 marginheight=0 frameborder2=0 onBeforeDeactivate='editActivated=true' onActivate='editActivated=false'> </iframe> </td> </tr> <tr> <td colspan="4" align="center" bordercolor="<?=$tema_cor_fundo; ?>" bgcolor="<?=$tema_cor_fundo; ?>"> <img src="../../../images/botoes/azu_enviar.gif" width="46" height="19" onClick="javascript:enviar();" class="linkmao"> <script> initEditor(); editCtl.document.body.innerHTML=plainmsg.innerHTML; </SCRIPT> </td> </tr></form> </table> <?php }//if(!$comentario and !$nome) else{ ?> <br> <?php } ?>
arquivo js_editor.js
var L_BOLD = "Negrito"; var L_ITALIC = "Itálico"; var L_UNDERLINE = "Sublinhado"; var L_JUSLEFT = "Alinhado à esquerda"; var L_JUSCENTER = "Centralizado"; var L_JUSRIGHT = "Alinhado à direita"; var L_BLANK = "Nova descrição"; var L_CUT = "Recortar"; var L_COPY = "Copiar"; var L_PASTE = "Colar"; var L_LIST = "Marcador"; var L_OUTDENT = "Alinhar à direita"; var L_INDENT = "Alinhar à esquerda"; var L_NPAGE_CONFIRM = "Esta ação apagará todo o conteúdo de sua descrição. Deseja continuar?"; var editMode=false; var selectedLink, sel, rng, selOK, editActivated, lastWhat; function initEditor(){ editCtl.document.designMode="On"; editCtl.document.open(); editCtl.document.write("<BODY STYLE='font:10pt arial;' oncontextmenu='return false'>"); editCtl.document.close(); setMode(true); } function setMode(newMode) { if (newMode==editMode) return; editMode = newMode; if ( editMode ){ editCtl.document.body.style.font = "10pt arial"; editCtl.document.body.style.backgroundColor = "#FFFFFF"; editCtl.document.body.innerHTML=editCtl.document.body.innerText; document.all.zoom.disabled = false; editCtl.document.body.style.zoom=document.all.zoom.options[document.all.zoom.selectedIndex].value; } else { editCtl.document.body.style.font = "10pt courier"; editCtl.document.body.style.backgroundColor = "#F4F4F4"; editCtl.document.body.innerText=editCtl.document.body.innerHTML; document.all.zoom.disabled = true; } editCtl.document.body.style.zoom=1; } function drawToolbar(img, width, buttons, action, tooltip, offset, bgSpans, defColors){ var left=offset,s="" for ( var i=0; i<buttons.length; i++ ) { if (bgSpans != null && bgSpans[i] != "") s+= "<span id="+bgSpans[i]+" style='background-color:"+defColors[i]+"'>"; s+="<span style='position:relative;height:25;width: " + buttons[i] + "'>"+ "<span style='position:absolute;margin:0px;padding:0;height:25;top:0;left:0;width:" + (buttons[i]) + ";clip:rect(0 "+buttons[i]+" 25 "+0+");overflow:hidden'>"+ "<img border=0 SRC='"+img+"' STYLE='position:absolute;top:0;left:-" + left + "' WIDTH="+width+" HEIGHT=50" if (buttons[i]!=4) { s+=" onmouseover='this.style.top=-25' onmouseout='this.style.top=0' onClick=\""+ "buttonPress('" + action[i] + "');this.style.top=0\" "+ "title=\"" + tooltip[i] + "\""; } s+="></span></span>"; if (bgSpans != null && bgSpans[i] != "") s+= "</span>"; left+=buttons[i] } document.write(s) } function saveSelection(){ if ( editActivated ){ sel = editCtl.document.selection; rng = sel.createRange(); } } function buttonPress(what) { if (!editMode) return; lastWhat = what; saveSelection(); switch(what){ case "create": if ( confirm(L_NPAGE_CONFIRM) ) { initEditor(); } break; default: editCtl.document.execCommand(what); editCtl.focus(); } }
arquivo ./pop/emotions.php
<link href="../../../sys/css_pop2.css" rel="stylesheet" type="text/css"> <script language="javascript"> function add_smilie(code) { opener.editCtl.document.write("<img src=\"../../../images/emotions/"+code+".gif\" width=\"20\" height=\"20\" border=\"0\">"); //opener.document.REPLIER.Post.value += ' ' + code + ' '; } </script> <title>Emotions</title><table border="0" align='center' cellpadding='0' cellspacing="0"> <tr align='center'> <td width="50" height="30"><a href="javascript:add_smilie('huh')"><img src="../../../images/emotions/huh.gif" alt='smilie' width="20" height="20" border='0' /></a> </td> <td width="50" height="30"><a href="javascript:add_smilie('ohmy')"><img src="../../../images/emotions/ohmy.gif" alt='smilie' width="20" height="20" border='0' /></a> </td> <td width="50" height="30"><a href="javascript:add_smilie('wink)"><img src="../../../images/emotions/wink.gif" alt='smilie' width="20" height="20" border='0' /></a> </td> </tr> <tr align='center'> <td height="30"><a href="javascript:add_smilie('tongue')"><img src="../../../images/emotions/tongue.gif" alt='smilie' width="20" height="20" border='0' /></a> </td> <td><a href="javascript:add_smilie('biggrin')"><img src="../../../images/emotions/biggrin.gif" alt='smilie' width="20" height="20" border='0' /></a> </td> <td><a href="javascript:add_smilie('laugh')"><img src="../../../images/emotions/laugh.gif" alt='smilie' width="20" height="20" border='0' /></a> </td> </tr> <tr align='center'> <td height="30"><a href="javascript:add_smilie('cool')"><img src="../../../images/emotions/cool.gif" alt='smilie' width="20" height="20" border='0' /></a> </td> <td><a href="javascript:add_smilie('rolleyes')"><img src="../../../images/emotions/rolleyes.gif" alt='smilie' width="20" height="20" border='0' /></a> </td> <td><a href="javascript:add_smilie('dry')"><img src="../../../images/emotions/dry.gif" alt='smilie' width="20" height="20" border='0' /></a> </td> </tr> <tr align='center'> <td height="30"><a href="javascript:add_smilie('smile')"><img src="../../../images/emotions/smile.gif" alt='smilie' width="20" height="20" border='0' /></a> </td> <td><a href="javascript:add_smilie('mad')"><img src="../../../images/emotions/mad.gif" alt='smilie' width="20" height="20" border='0' /></a> </td> <td><a href="javascript:add_smilie('sad')"><img src="../../../images/emotions/sad.gif" alt='smilie' width="20" height="20" border='0' /></a> </td> </tr> <tr align='center'> <td height="30"><a href="javascript:add_smilie('unsure')"><img src="../../../images/emotions/unsure.gif" alt='smilie' width="20" height="20" border='0' /></a> </td> <td><a href="javascript:add_smilie('wacko')"><img src="../../../images/emotions/wacko.gif" alt='smilie' width="20" height="20" border='0' /></a> </td> <td><a href="javascript:add_smilie('blink')"><img src="../../../images/emotions/blink.gif" alt='smilie' width="20" height="20" border='0' /></a> </td> </tr> <tr align='center'> <td height="30"><a href="javascript:add_smilie('ph34r')"><img src="../../../images/emotions/ph34r.gif" alt='smilie' width="20" height="20" border='0' /></a> </td> <td><a href="javascript:add_smilie('thumbs_down')"><img src="../../../images/emotions/thumbs_down.gif" alt='smilie' width="19" height="19" border='0' /></a> </td> <td><a href="javascript:add_smilie('thumbs_up')"><img src="../../../images/emotions/thumbs_up.gif" alt='smilie' width="19" height="19" border='0' /></a> </td> </tr> <tr align='center'> <td height="30" colspan="3"><img src="../../../images/botoes/fechar.gif" width="58" height="14" onclick="javascript:window.close();" class="linkmao"></td> </tr> </table>
pronto.... olha um exemplo:
CLIQUE AQUI