Textarea com formatação

[ava.rj 0]

Boa tarde pessoal.

Sou iniciante em Javascript, atualmente minha especialização é em PHP.

 

Preciso de ajuda, já procurei na Web e aqui no fórum, mas não consegui encontrar algo que me faça entender :(.

Não quero script prontos, quero aprender como fazer.

 

Estou usando uma função que acrescenta as tags de formatação no conteúdo de uma textarea (negrito, itálico).

Mas não sei como fazer o texto ser exibido com a formatação, apensa consigo que as tags apareçam junto com o texto:

 

Como fiz: bla bla <span style="font-weight: bold;">bla bla bla</span> bla

Como quero: bla bla bla bla bla bla

 

Alguém pode me ajudar?

 

Agradeço.

Anderson

[William Bruno 1501]

para fazer isso "visualmente", você precisa manipular um contentEditable de um iframe, basicamente.

 

Existe editores de texto rico prontos para isso.

Um exemplo é o TinyMCE

http://www.tinymce.com/

[ava.rj 0]

Desculpe, não entendi bem... o texto tem que ser digitado num textarea certo? Onde entra Iframe ? O textarea deve ficar num Iframe? Mexendo num parâmetro do Iframe é possível alterar a visualização do textarea?

 

Desculpe as perguntas de leigo, mas estou estudando agora o Javascript.

 

Agradeço.

[William Bruno 1501]

o texto tem que ser digitado num textarea certo? Onde entra Iframe ?

não. Oque se faz é substituir o textarea por um iframe, e ai o usuário digita no iframe.

basicamente isso.

 

Existem alguns tutoriais para se fazer um editor de texto rico "do zero", caso você queira estudar, mas não é muito "simples" fazer funcionar em diversos browsers.

O TinyMCE é uma aplicação dessa técnica já feita e funcional. Caso queira usar.

[Elemke 3]

Prezado,

 

Siga esse tutorial: http://www.marcelotorresweb.com/instalando-o-tinymce-no-seu-site/

[ava.rj 0]

Obrigado pela ajuda.

 

Elemke

Eu não quero utilizar um código pronto porque eu quero aprender como fazer, pois acredito que poderei utilizar este recurso para outras coisas futuramente, e não apenas para editores de texto. Mas mesmo assim, agradeço a indicação do

tutorial de instalação do TinyMCE.

 

William

Eu tentei usar o contentEditable num Iframe e numa DIV e nenhum dos dois casos eu consegui digitar algo:

 

<iframe id="idIframe" width="400" height="300" contentEditable="true" > </iframe>

 

 

<iframe id="idIframe" width="400" height="300" >
   <div contentEditable="true" id="EDITBOX"> </div>
</iframe>

 

É assim mesmo que se usa?

[William Bruno 1501]

Achei um exemplo perfeito aqui:

 

http://andafter.org/blogs/odesenvolvedor/publicacoes/como-editar-conteudos-do-html-pelo-browser_903.html

http://www.pinceladasdaweb.com.br/blog/2007/02/06/como-editar-qualquer-pagina-com-javascript/

teste no Firefox

[ava.rj 0]

Legal William :natalwink: consegui escrever na DIV, só que agora não consigo aplicar a formatação na DIV, só funciona na textarea.

 

   function tagar(id_objecto, tag_abrir, tag_fechar) {       
       var t_area = document.getElementById(id_objecto);
       var i=0;
       var final="";
       if (document.selection && document.selection.createRange) {
           t_area.focus();
           var area = document.selection.createRange();
           if(area.text.length>0)
           area.text = tag_abrir + area.text + tag_fechar;
       }
       t_area.focus();
   }

 

Na textarea funciona legal, a função pega os caracteres que estão selecionados e adiciona as tags de abertura e fechamento.

 

isso não funciona em DIV?:

document.selection && document.selection.createRange