Editor de texto WYSIWYG Javascript: TinyMCE

Editor HTML WYSIWYG, para integrar em formulários web, baseado em Javascript de Moxiecode Systems AB.

Por Gema Maria Molina Prados


Publicado em: 21/5/09
Valorize este artigo:
TinyMCE é um editor HTML que é capaz de converter os textarea de um formulário em campos WYSIWYG para poder incluir etiquetas HTML dentro dos campos de texto.

Características
  • É fácil de integrar nas páginas web, já que só tem duas linhas de código.
  • Pode-se personalizar através de temas e plugins.
  • Também se podem instalar pacotes de idiomas.
  • É compatível com a maioria dos navegadores como Firefox, Internet Explorer, Opera e Safari, embora este último está em fase experimental.
  • Com o compressor GZip para PHP/.NET/JSP/Coldfusion, faz com que TinyMCE seja um 75% menor e muito mais rápido de carregar.
  • Pode-se utilizar AJAX para salvar e carregar o conteúdo.
Integração de TinyMCE

Para poder utilizar TinyMCE nas páginas web, o navegador tem que ser compatível e ter Javascript habilitado.

Primeiro há que baixar TinyMCE desde a seguinte página de downloads: http://tinymce.moxiecode.com/download.php. Depois há que descompactá-lo e salvá-lo no servidor da página web para poder utilizá-lo nos textarea dos formulários.

Na página que for utilizar, primeiro há que incluir a biblioteca tiny_mce.js incluindo o arquivo externo de código Javascript.

<script language="javascript" type="text/javascript" src="/tinymce/jscripts/tiny_mce/tiny_mce.js"></script>

A seguir há que iniciar TinyMCE para converter os textarea em campos de texto WYSIWYG editáveis.

<script language="javascript" type="text/javascript">
tinyMCE.init({
      mode : "textareas",
      theme : "simples"
   });

</script>


Exemplo de integração de TinyMCE

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
   <title>Exemplo TinyMCE</title>
   <script language="javascript" type="text/javascript" src="/tinymce/jscripts/tiny_mce/tiny_mce.js"> </script>
   <script language="javascript" type="text/javascript">
      tinyMCE.init({
         mode : "textareas",
         theme : "advanced"
      });
   </script>
</head>

<body>
   <form method="post" name="tinymce">
      <textarea name="texto" cols="50" rows="15"></textarea>
   </form>
</body>
</html>


Neste exemplo, primeiro incluímos a biblioteca tiny_mce.js dentro das etiquetas <head> . Dentro destas etiquetas também iniciamos TinyMCE para que no textarea do formulário se converta em um campo de texto WYSIWYG.

Pode-se ver o exemplo em funcionamento no seguinte link.





Comentários do artigo
Foram enviados 6 comentários ao artigo
5 comentários não revisados
1 comentário revisado:
Dúvidas na integração do Tinymce com o php
Por: fernandoovargas
04/6/10
Ola. Muito bom esse post, mas estou com uma dificuldade ja a alguns dias. Estou fazendo um trabalho academico onde preciso integrar um editor de texto na sessao de administrador do site, porém a opcao de adicionar imagem esta dando problema. Conheço o site de onde trabalho, apesar de nao ter acesso ao codigo, sei que o editor é do tinymce mas quando tento, localmente, adicionar uma imagem nao consigo. Não sei se estou errado mas nao deveria ter uma opcao de busca de imagem para que o usuario nao precise digitar manualmente a url da imagem?
E mesmo quando tento adicionar manualmente nao consigo. Alguem poderia me dar uma força para conseguir fazer essa integração por completo?

Agradeço desde já!!!

Usuários :    login / registro

Manuais relacionados
Categorias relacionadas
O autor

Home | Sobre nós | Copyright | Anuncie | Entrar em contato