André Gusmão Postado Outubro 21, 2003 Denunciar Share Postado Outubro 21, 2003 ... que quase todos os objetos HTML podem se tornar editáveis?Veja esse exemplo bem simples. Crie uma página HTML com o seguinte conteúdo:<body contenteditable></body>Agora rode a danada, digite algumas coisas e veja o que acontece.Quer dar uma melhorada? Faça isso então...<body contenteditable><input type="button" value="Ver código fonte" onClick="alert(document.body.innerHTML)"></body>Agora rode a bagaça, digite umas aneiras e clique no botão... Não é demais? hehehehe...Em breve postarei mais novidades... :lol: Citar Link para o comentário Compartilhar em outros sites More sharing options...
0 diraol Postado Outubro 21, 2003 Denunciar Share Postado Outubro 21, 2003 nossa...muito loko!!!... heheehe Citar Link para o comentário Compartilhar em outros sites More sharing options...
0 PERNAMBUCO_FJV Postado Outubro 21, 2003 Denunciar Share Postado Outubro 21, 2003 maneiro ;) Citar Link para o comentário Compartilhar em outros sites More sharing options...
0 Intermaluco Postado Outubro 21, 2003 Denunciar Share Postado Outubro 21, 2003 Pra ue isso? Citar Link para o comentário Compartilhar em outros sites More sharing options...
0 PERNAMBUCO_FJV Postado Outubro 21, 2003 Denunciar Share Postado Outubro 21, 2003 aeuhauheahuaeueaueauheaeaboa pergunta!! Citar Link para o comentário Compartilhar em outros sites More sharing options...
0 diraol Postado Outubro 21, 2003 Denunciar Share Postado Outubro 21, 2003 se você tiver criatividade dá pra 'brincar' com os usuários......................é só juntar alguns códigos no meio.... Citar Link para o comentário Compartilhar em outros sites More sharing options...
0 David Elias Postado Outubro 21, 2003 Denunciar Share Postado Outubro 21, 2003 pesquisem HTMLArea no Google ;) Citar Link para o comentário Compartilhar em outros sites More sharing options...
0 André Gusmão Postado Outubro 21, 2003 Autor Denunciar Share Postado Outubro 21, 2003 Ok, então vamos brincar um pouquinho?Teste esse código aqui:<style>.bold { width: 22px; height: 22px; text-align: center center; font-weight: bold;}.italic { width: 22px; height: 22px; text-align: center center; font-style: italic;}.underline { width: 22px; height: 22px; text-align: center center; text-decoration: underline;}</style><table width="626" height="255" border="1" cellpadding="0" cellspacing="0"> <tr> <td align="left" valign="top"> <span id="editor" contenteditable style="width:100%;height:100%" OnKeyPress="return digitacao(this)"></span> </td> </tr></table> <table width="400" border="1" cellspacing="0" cellpadding="0"> <tr> <td><input name="bold" type="submit" id="bold" value="N" class="bold" onClick="transform('b')"> <input name="italic" type="submit" id="italic" value="I" class="italic" onClick="transform('i')"> <input name="underline" type="submit" id="underline" value="S" class="underline" onClick="transform('u')"></td> </tr> </table> <br><a href="java script:fonte()">Código Fonte</a><script language="JavaScript">editor.focus();function digitacao(obj){ if(event.keyCode==13) { obj.appendChild(document.createElement('<br>')); obj.appendChild(document.createElement('')); // Para saltar a linha return false; } return true;}function fonte(){ var texto = editor.innerHTML; alert(texto);}function transform(type){ var objText = document.selection.createRange(); if(type=='i') objText.pasteHTML('<i>'+objText.text+'</i>'); if(type=='b') objText.pasteHTML('<b>'+objText.text+'</b>'); if(type=='u') objText.pasteHTML('<u>'+objText.text+'</u>');}</script> :lol: Citar Link para o comentário Compartilhar em outros sites More sharing options...
0 PERNAMBUCO_FJV Postado Outubro 21, 2003 Denunciar Share Postado Outubro 21, 2003 MESTRE!!!!!MESTRE!!!!!MESTRE!!!!!MESTRE!!!!!MESTRE!!!!!MESTRE!!!!!MESTRE!!!!!MESTRE!!!!!MESTRE!!!!! Citar Link para o comentário Compartilhar em outros sites More sharing options...
0 André Gusmão Postado Outubro 21, 2003 Autor Denunciar Share Postado Outubro 21, 2003 Menos, menos, menos, heheheheh :lol: Citar Link para o comentário Compartilhar em outros sites More sharing options...
0 §uiciDa£ Postado Outubro 21, 2003 Denunciar Share Postado Outubro 21, 2003 ai, q bacana !!!!! Citar Link para o comentário Compartilhar em outros sites More sharing options...
0 X.bArArA.X Postado Outubro 22, 2003 Denunciar Share Postado Outubro 22, 2003 Ah, não tem graça! não pede pra salvah quandu fechah o IE. :rolleyes: :P Citar Link para o comentário Compartilhar em outros sites More sharing options...
0 Deividy Postado Outubro 22, 2003 Denunciar Share Postado Outubro 22, 2003 onde você estudo que eu tambem quero :P :D você bom mesmo!!!!! :lol: Citar Link para o comentário Compartilhar em outros sites More sharing options...
0 André Gusmão Postado Outubro 22, 2003 Autor Denunciar Share Postado Outubro 22, 2003 Calma, ainda não desenvolvi o Word completo em javascript, isso é só uma palhinha, hehehehehhehe :lol: Citar Link para o comentário Compartilhar em outros sites More sharing options...
0 Guest Blink Postado Outubro 22, 2003 Denunciar Share Postado Outubro 22, 2003 Como uso isso em um <textarea><style> .bold { width: 22px; height: 22px; text-align: center center; font-weight: bold; } .italic { width: 22px; height: 22px; text-align: center center; font-style: italic; } .underline { width: 22px; height: 22px; text-align: center center; text-decoration: underline; } </style> <table width="626" height="255" border="1" cellpadding="0" cellspacing="0"> <tr> <td align="left" valign="top"> <span id="editor" contenteditable style="width:100%;height:100%" OnKeyPress="return digitacao(this)"></span> </td> </tr> </table> <table width="400" border="1" cellspacing="0" cellpadding="0"> <tr> <td><input name="bold" type="submit" id="bold" value="N" class="bold" onClick="transform('b')"> <input name="italic" type="submit" id="italic" value="I" class="italic" onClick="transform('i')"> <input name="underline" type="submit" id="underline" value="S" class="underline" onClick="transform('u')"></td> </tr> </table> <br> <a href="javascript:fonte()">Código Fonte</a> <script language="JavaScript"> editor.focus(); function digitacao(obj) { if(event.keyCode==13) { obj.appendChild(document.createElement('<br>')); obj.appendChild(document.createElement('')); // Para saltar a linha return false; } return true; } function fonte() { var texto = editor.innerHTML; alert(texto); } function transform(type) { var objText = document.selection.createRange(); if(type=='i') objText.pasteHTML('<i>'+objText.text+'</i>'); if(type=='b') objText.pasteHTML('<b>'+objText.text+'</b>'); if(type=='u') objText.pasteHTML('<u>'+objText.text+'</u>'); } </script>valeu!!! Citar Link para o comentário Compartilhar em outros sites More sharing options...
0 André Gusmão Postado Outubro 22, 2003 Autor Denunciar Share Postado Outubro 22, 2003 Isso não funciona num TEXTAREA, pois todo conteudo do TEXTAREA é sempre texto e não HTML. Mas você pode colocar por exemplo um SPAN com bordas, simulando um TEXTAREA, com CONTENTEDITABLE.E para ler o conteúdo digitado use a propriedade innerHTML do objeto SPAN. Citar Link para o comentário Compartilhar em outros sites More sharing options...
0 diraol Postado Outubro 22, 2003 Denunciar Share Postado Outubro 22, 2003 blink, se cadastra ae.....faça parte integralmente da comunidade!!! :Do que você quer usar num textarea blink?? Citar Link para o comentário Compartilhar em outros sites More sharing options...
0 David Elias Postado Outubro 23, 2003 Denunciar Share Postado Outubro 23, 2003 Só ainda não entendi porque é que vocês não vão descarregar o HTMLArea que é "free" e faz código HTML bem formado (XHTML) :DAh! Funciona em IE 5.5+ e Mozilla 1.3+ :)Aqui está um exemplo -> http://dynarch.com/mishoo/htmlarea.epl Citar Link para o comentário Compartilhar em outros sites More sharing options...
0 André Gusmão Postado Outubro 23, 2003 Autor Denunciar Share Postado Outubro 23, 2003 Porque a alegria de nós "desenvolvedores" é fazer tudo do zero, abraçar os desafios, hehehehe.... Citar Link para o comentário Compartilhar em outros sites More sharing options...
0 diraol Postado Outubro 23, 2003 Denunciar Share Postado Outubro 23, 2003 hauahuahuahuhagostei andré...madou bem!!!!!! :Dhauhauahuahuahua Citar Link para o comentário Compartilhar em outros sites More sharing options...
0 David Elias Postado Outubro 23, 2003 Denunciar Share Postado Outubro 23, 2003 eu também fiz um editor do zero só para experimentar :rolleyes: madou bem!!!!!! <_< :lol: Citar Link para o comentário Compartilhar em outros sites More sharing options...
0 André Gusmão Postado Outubro 23, 2003 Autor Denunciar Share Postado Outubro 23, 2003 Posta aí pra a gente dar uma olhada, ou diz uma url pra a gente ver...É sempre bom compartilhar as experiências e conquistas. :lol: Citar Link para o comentário Compartilhar em outros sites More sharing options...
0 diraol Postado Outubro 23, 2003 Denunciar Share Postado Outubro 23, 2003 é isso ae david...posta ai pra darmos uma olhadinha nele... :Dassim... você fez como??? Vbscript? Vb? C? C++? JavaScript+HTML?hehehehe....falou... :D Citar Link para o comentário Compartilhar em outros sites More sharing options...
0 David Elias Postado Outubro 23, 2003 Denunciar Share Postado Outubro 23, 2003 Vou ver se encontro, o mais provável é ter ido embora na última formatação do disco :Dhehehehe.... <_< Citar Link para o comentário Compartilhar em outros sites More sharing options...
0 diraol Postado Outubro 23, 2003 Denunciar Share Postado Outubro 23, 2003 putz...é... acontece...hehehe:P Citar Link para o comentário Compartilhar em outros sites More sharing options...
0 jissa Postado Outubro 23, 2003 Denunciar Share Postado Outubro 23, 2003 Apoio completamente a ideia do "meu codigo"..Ae Gente.. querem um editor completo... link.. -> B) Citar Link para o comentário Compartilhar em outros sites More sharing options...
Pergunta
André Gusmão
... que quase todos os objetos HTML podem se tornar editáveis?
Veja esse exemplo bem simples. Crie uma página HTML com o seguinte conteúdo:
Agora rode a danada, digite algumas coisas e veja o que acontece.Quer dar uma melhorada? Faça isso então...
Agora rode a bagaça, digite umas aneiras e clique no botão...
Não é demais? hehehehe...
Em breve postarei mais novidades...
:lol:
Link para o comentário
Compartilhar em outros sites
39 respostass a esta questão
Posts Recomendados
Participe da discussão
Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.