CriarWeb.com > Manuais > Workshop de Javascript

Editor de texto WYSIWYG Javascript: TinyMCE

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

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.

Acrescentar um comentário ao artigo

Manual: Workshop de Javascript

Script para informar da segurança de uma senha, com Javascript

Comentários do artigo

Acrescentar um comentário ao artigo

Foi enviado 1 comentário ao artigo

1 comentário não revisado

0 comentários revisados