• Cadastro
  • Fóruns
  • Manual
  • Tradução
  • Tutoriais
  • OpenAtrium
  • Eventos
  • Ofertas de Emprego
Início

Login do usuário

  • Criar uma conta
  • Recuperar senha

Pesquisa no site

Google

Assine o RSS do Drupal-BR

RSS dos itens mais ativos

RSS do conteúdo

RSS dos comentários

Lista de Discussão

Drupal-BR

Download

Últimas versões

Drupal 7.12Drupal 6.22

Contribuições

Módulos Temas Tradução

Itens ativos

  • Lightbox e thickbox sem efeito algum
  • Sistema de atendimento, similar a suporte por tickets. Webform, Support ticketing system ou outro?
  • Não consigo habilitar o módulo JQueryUI
  • Abrir page_comment.tpl.php no layout admisnitrativo
  • Topic locked - Como configurar advanced forum para evitar isso?
  • Drupal, CMS e sistemas... É possível?
  • Correção de erros em site de vendas
  • Freelance Drupal 7 - $1.000 mensais
  • Proposta de trabalho Tech For/São Paulo- Analista Programador Drupal
  • [Resolvido] Sumiu título de content type
Veja mais
Início » Tutoriais

Como instalar e configurar o TinyMCE no Drupal

Nesse tutorial veremos como instalar e usar o editor WYSIWYG TinyMCE no Drupal.

O TinyMCE é um editor online designado WYSIWYG (What You See Is What You Get) em português "O que você vê é o que você tem".

Com ele é possivel editar conteúdo online sem precisar saber HTML, mas com formatação rica. Ele foi criado pela empresa Moxiecode, e pode ser baixado livremente no site da empresa em: http://tinymce.moxiecode.com/. Ele funciona independente do Drupal, mas aqui veremos como integrá-lo ao Drupal.

Atualmente existe um módulo para o Drupal que habilita o uso do TinyMCE para edição de conteúdo. Esse módulo está disponível em: http://drupal.org/project/tinymce

Como diz na página do módulo o mesmo não instala o TinyMCE em sí, então é preciso que você baixe, além do módulo para o Drupal, o TinyMCE.

Assim, o primeiro passo para a instalação do TinyMCE é ir até a página do módulo e baixá-lo. Em seguida, vá até a página do TinyMCE e baixe-o também.
Nesse ponto é importante observar, na página do módulo, qual versão do TinyMCE ele suporta. No momento em que eu escrevo esse tutorial, a versão suportada é a 2.1.2. Assim, quando for baixar, procure essa versão.

Com os dois produtos baixados, você deve descompactar o módulo na pasta modules da sua instalação do Drupal. Isso fará com que o módulo esteja disponível para o Drupal.
Isso, por si só, não faz com que o TinyMCE esteja funcional. É necessário também descompactar o TinyMCE na pasta do módulo tinymce. Assim, a estrutura de diretórios deve ficar semelhante a essa:

Antes:

Depois:

Isso feito, podemos habilitar o módulo para o nosso site.

Para tanto logue-se como administrador no seu site. Acesse Administrar -> Construção do site -> Módulos e habilite o módulo TinyMCE.

Pronto o módulo está instalado.

Nesse ponto você não verá o editor ainda pois, no caso do TinyMCE, você precisa configurar um perfil de usuário que terá acesso a esse editor. Isso é feito assim para evitar que usuários, sem os privilégios necessários, acessem o TinyMCE.

Então você deve criar um perfil (esse tutorial não irá cobrir esse procedimento) e ir até: Administrar -> Gerenciamento de usuários -> Controle de acesso e dê a permissão "access tinymce" para esse perfil. Obviamente que se o seu usuário pode fazer outras coisas, você deve dar as permissões necessárias.

Isso habilitará o usuário acessar o TinyMCE, mas precisamos configurar como o editor será exibido para o usuário. Ao contrário de outros módulos para o Drupal (como o FCKEditor) o nível de personalização do TinyMCE é muito grande.

Vamos configurar o TinyMCE. Para isso acesse o seu site e vá em: Administrar -> Configuração do site -> TinyMCE settings

A primeira vez que você acessa essa página lhe será mostrado um aviso de que ainda não há um perfil, e lhe será dada a oportunidade de criar um.
Clicando nesse link, você será levado a uma tela onde pode configurar cada parâmetro do TinyMCE.

Vamos dar uma breve olhada nessas opções.

Vamos por partes:

Basic setup

Você vai dar um nome para esse perfil.

Nesse ponto você pode configurar qual o perfil de usuário pode acessar esse conjunto de opções do TinyMCE (pode ser mais de um perfil).

É possível configurar outros itens relacionados ao o usuário.

Visibilidade

Você escolhe em quais páginas o TinyMCE vai ser usado. Ele vem, por padrão, para ser usado em páginas de conteúdo, comentários e perfil do usuário.

Buttons and plugins

Como o nome diz, você pode configurar os botões e plugins que fará uso.

Editor appearance

Configura as opções de visualização (posicionamento e alinhamento) do editor na tela.

Editor appearance

Aqui você configura como o editor irá tratar o código gerado ou colado. Você pode habilitar a limpeza e formatação do código, o que é uma boa opção.

CSS

Por último é possível configurar os estilos do Editor. Isso impacta diretamente em como o exitor é exibido. Recomendo escolher para o parâmetro "Editor CSS", a opção "tinyMCE default". Isso evita conflitos entre o CSS do seu site e o Editor.

Pronto. Ao salvar essa tela, o TinyMCE estará configurado para o seu site.

Uma nota importante. Se você tentar acessar, com o primeiro usuário que você criou para o site, alguma tela onde o editor deveria aparecer ele não aparecerá. Isso acontece porque você precisa atribuir a esse usuário o mesmo perfil para o qual você configurou o TinyMCE. Isso feito, estará disponível também para esse usuário.

Dúvidas, sugestões e comentários, por favor deixe abaixo.

‹ Como disparar ações a determinados eventos - módulo Triger acima Como instalar o Drupal no Ubuntu ›
Enviado por rafael em ter, 11/13/2007 - 20:04
  • Versão para impressão
  • Se logue ou se registre para poder enviar comentários
  • 14187 leituras
Em qui, 12/13/2007 - 09:49 jcao disse:

Seria interessante informar um problema na instalação, que é a criação de mais um subdiretório
/modules/tinymce/tinymce/tinymce
cuja solução está em
http://drupal.org/node/80612

abraços

  • Se logue ou se registre para poder enviar comentários
Em qui, 12/30/2010 - 09:48 nuvenus disse:

Muito boa a dica amigo!
Seu link ai ajudou muito!

amo muito tudo isso!

  • Se logue ou se registre para poder enviar comentários
Em sex, 12/14/2007 - 13:43 dtabach disse:

Os recursos do TinyMCE ficam disponíveis para campos de texto de conteúdos criados por meio do CCK?

  • Se logue ou se registre para poder enviar comentários
Em sex, 12/14/2007 - 19:18 rafael disse:

Olá Durval,

Sim, os recursos pode ficar disponíveis para campos feitos com o CCK. Desde que sejam textarea.

Abraço,

--
Rafael Ferreira Silva
http://www.rafaelsilva.net

  • Se logue ou se registre para poder enviar comentários
Em qua, 12/19/2007 - 13:53 jcao disse:

Instalei o tinymce no drupal 5.3, ele está funcionando. Só que ao verificar o texto, via preview, ou mesmo após submete-lo, as tags html aparecem no texto e vez de formatá-lo.
Estou procurando nos fóruns algo sobre o assunto, mas não encontrei até agora.
Agradeço a ajuda.

  • Se logue ou se registre para poder enviar comentários
Em seg, 01/21/2008 - 23:01 patrickespake disse:

Boa noite.

Tentei fazer esse cara funcionar, mas não deu certo.

Criei uma nova Role como o nome de "moderador user", depois adicionei um usuário a essa role, configurei como diz aqui, mas infelizmente não deu certo.

Alguma outra dica?

Patrick Espake

patrickespake@gmail.com
www.patrickespake.com
O conhecimento evolui quando é compartilhado!

Patrick Espake
http://blog.patrickespake.com

  • Se logue ou se registre para poder enviar comentários
Em qua, 03/05/2008 - 18:48 waymoot disse:

Olá fiz tudo como indicado neste tutorial; mas não consegui configurar o tinyMCE, já criei o perfil, dei acesso a ele e tudo mais; mas não aparece o tal link:

No profiles found. Click here to create a new profile.

  • Se logue ou se registre para poder enviar comentários
Em qua, 03/05/2008 - 18:56 waymoot disse:

Meu problema foi solucionado quando alterei o tema. Talvez isso possa estar ocorrendo com os demais usuários.
O link para criar um novo profile do tinyMCE não aparece em alguns temas.

  • Se logue ou se registre para poder enviar comentários
Em seg, 10/20/2008 - 22:20 klebao28 disse:

Fiz todo o procedimento indicado más aparece o seguinte aviso:

warning: file_get_contents(modules/tinymce/tinymce/jscripts/tiny_mce/tiny_mce.js) [function.file-get-contents]: failed to open stream: No such file or directory in /home/downfree/public_html/includes/locale.inc on line 1643.

Será que tem alguma solução?
Des de já agradeço

  • Se logue ou se registre para poder enviar comentários
Em sex, 10/31/2008 - 14:24 rafael disse:

Vc baixou o tinymce do site oficial e descompactou dentro de modules/tinymce/tinymce ?

--
Rafael Ferreira Silva
http://www.rafaelsilva.net

  • Se logue ou se registre para poder enviar comentários
Em sab, 11/29/2008 - 13:07 slsoares disse:

Pessoal, estava estudando como instalar o editor fruto do tutorial. Achei no site drupalmodules uma alernativa a ele:
http://drupalmodules.com/module/fckeditor-wysiwyg-html-editor
Alguém sabe algo sobre ele? tem as mesmas funções? É tão bom quanto o editor este tutorial?

Valeu,

Sandro Laina

--
Sandro Laina

www.sandrolaina.com.br

Twitter: sandrolaina

Atleta Paraolímpico
Consultor em Acessibilidade

  • Se logue ou se registre para poder enviar comentários
Em sab, 11/29/2008 - 16:50 tregismoreira disse:

Sandro, sinceramente, eu só uso o FCK Editor. Já trabalhei em um site com o TinyMCE uma vez e não gostei nem um pouco. Acho o FCK bem completo e talvez mais intuitivo.

Outro que me disseram que é bom é o YUI, mas eu ainda não usei esse.

Abraço!

Thiago Régis

Abraço!
Thiago Régis
@tregismoreira
Cursos Online de Drupal
Drupal Casesbeta

  • Se logue ou se registre para poder enviar comentários
Em sab, 11/29/2008 - 18:58 slsoares disse:

Valeu, Tiago, mas este que usa tem as formatações e possibilidade de inserir imagem no story ou qualquer outro tipo de post?

Valeu!

--
Sandro Laina

www.sandrolaina.com.br

Atleta Paraolímpico
Consultor em Acessibilidade

--
Sandro Laina

www.sandrolaina.com.br

Twitter: sandrolaina

Atleta Paraolímpico
Consultor em Acessibilidade

  • Se logue ou se registre para poder enviar comentários
Em dom, 11/30/2008 - 12:47 tregismoreira disse:

Sim, sandro. Qualquer editor WYSIWYG permite inserir fotos. É como se fosse um Word mesmo, com as ferramentas para formatações de texto. Porém, como padrão, só insere fotos já publicadas no servidor, ou seja, não faz upload de imagens. Para que ele possa fazer upload, vc precisará instalar o IMCE.

Qualquer coisa poste.

Abraço!

Thiago Régis

Abraço!
Thiago Régis
@tregismoreira
Cursos Online de Drupal
Drupal Casesbeta

  • Se logue ou se registre para poder enviar comentários
Em dom, 11/30/2008 - 19:30 Leopoldo disse:

Completando o comentário do Thiago,

É possível o upload de arquivos (incluindo fotos) somente com FCKEditor e se não me engano com TinyMCE também, sem auxílio do IMCE. Acho que o FCK é mais chato de configurar, mas é um módulo que me atende. No arquivo INSTALL.txt que vem com o módulo tem todas as informações de configuração e personalização.

De qualquer forma, o Tiny também faz a mesma coisa e o tutorial desse post, apesar de já ter feito aniversário, é enxuto e bom.

Abraço!

--
Leonardo Silva
Produtor Cultural
Desenvolvedor Web

  • Se logue ou se registre para poder enviar comentários
Em dom, 11/30/2008 - 19:39 slsoares disse:

Beleza, galera, então vocês não tem nenhuma recomendação para este que está começando. Os 2 fazem o mesmo trabalho e tudo vai da "paixão" por um ou outro... Enão, por ter aquele tutorialzinho, vou no do tutorial... Qualquer coisa, algum problema ou coisa do tipo, migro...

De qualquer forma, valeu galera, estou aprendendo muito por aqui...

Aproveitando, tem alguma lista, daquelas de e-mail, estilo googlegroup, sobre drupal?

'Valeu novamente..

--
Sandro Laina

www.sandrolaina.com.br

Atleta Paraolímpico
Consultor em Acessibilidade

--
Sandro Laina

www.sandrolaina.com.br

Twitter: sandrolaina

Atleta Paraolímpico
Consultor em Acessibilidade

  • Se logue ou se registre para poder enviar comentários
Em dom, 12/21/2008 - 17:06 davikr disse:

O QUE FALTOU?
Deve ser alguma coisa muito idiota.
Fiz a instalação, mas ao criar conteúdo não aparecem os recursos do TinyMCE.
MAS FUNCIONA NA CRIAÇÂO DE BLOCOS.
Os recursos estão disponíveis na criação de blocos, que devo fazer pra adicionar os recurso na criação de conteúdos?
Nas configurações está para aparecer... node/* user/* comment/*

Davi Kindlein Romio
http://www.teatrocristao.net (Criado com DRUPAL)
http://www.davikr.org Também

  • Se logue ou se registre para poder enviar comentários
Em ter, 12/30/2008 - 17:21 ayres1000 disse:

Pessoal, estou batendo cabeça aqui, pois não consigo fazer o Tinymce aparecer somente em algumas páginas. Estou tentanto (a muito custo) fazer funcionar o módulo Station (para webradio) mas o Tinymce aparece na página de edição do Schedule, mas isso está me impedindo de trabalhar direito, pois no campo onde devo digitar o endereço do servidor aparece o tinymce e bagunça tudo. Preciso configurá-lo para não aparecer especificamente no tipo de conteúdo "Schedule". O que faço? Até agora eu só consegui assim? desativo completamente o tinymce, edito o endereço do servidor e depois reativo o tinymce.

Socorro!!

Obrigado a todos que puderem contribuir!

Feliz ano novo!

  • Se logue ou se registre para poder enviar comentários
Em ter, 01/06/2009 - 13:18 erickcouto disse:

Veio... nao estou com o tiny aki... mas e tipo o fck... na pagina de configuração dele vc pode falar quais são as paginas que vc quer excluir o tiny... ou tambem dar o nome direto do campo...

Erick Alves
www.erickalves.com.br

  • Se logue ou se registre para poder enviar comentários

Este site é feito, orgulhosamente, com Drupal. Gentilmente hospedado por HostSH