TinyMCE, Básico e Como Salvar os Dados Usando AJAX

7 05 2008

Saudações

Pessoal a algum tempo uso o tinymce como editor WYSIWYG nos projetos Web que participo, sempre usei ele no modo básico, ou seja, só colocava ele no sistema e boa, hoje tive que fazer duas coisas mais legais lol:

  1. Salvar os dados do Tiny através de AJAX;
  2. Criar um plugin com uns botões personalizados;

Salvando Com Ajax

Bom qual é o problema se submeter os dados de um formulário que tenha um componente tinymce através de AJAX, eu respondo tem todo o problema pois você vai ter a desagradável surpresa de que os dados só serão enviados corretamente aos servidor quando enviar pela segunda vez o formulário, isso acontece pois o Tiny cria um textarea mocozado, oculto, e são os dado contido nesse cara que o form envia, ou seja tem um Javascript que le os dados do Tiny e joga nesse textearea agora vejam bem AJAX é assíncrono e muitas vezes antes do tiny atualizar o textarea o form já foi enviado pela sua chamada em AJAX, por isso que na segunda vez funciona pois no clique anterior ele atualizou o textarea lol, demorei mas descobri, e qual a solução Anselmo?, elementar caro colega faz o Tiny atualizar na mara os dados do textarea, assim ooooo

Event.observe(window,'load',function(){
   Event.observe('btn_salvar','click',function(){
    tinyMCE.triggerSave(true,true);
  });
}?)

Isso vai fazer com que ao dar o clique no botão btn_salvar, meu botão tinha esse id :) , antes do submit do form o Tiny vai atualizar o textarea e depois disso chamar o AJAX, legal né :)

Plugin

Bom antes de continuar é bom dar uma olhada no que já existe para o tiny, talvez você esteja querendo fazer algo que já foi feito, e já fizeram um tutorial de como criar plugin bom é o exemplo 23 explica certinho então boa sorte, se tiverem algum problema manda ai um comente que eu ajudo.

Vou indo nessa pq a mulher que faz a limpeza aqui do escritório ta me tocando fora da mesaaaa.kjahskfh


Ações

Informações

24 respostas

18 07 2008
E ae cara blza

Olá cara, blza?
tipo acredito que o problema que estou tendo seja corrigido com esse código
mas, donde dêvo colocá-lo? em um código java qualquer ou ao naquela parte de inicialização do Tini?

18 07 2008
battisti

Esse exemplo é para o caso de você ter um formulário com um botão de submit, então você colocar este codigo aqui:

tinyMCE.triggerSave(true,true);

no evento onClick do botão

No exemplo de cima como eu uso o prototype então fiz com observadores mas o resultado final é o mesmo.

1 08 2008
marcinho degauss brasil

cara onde eu coloco esse codigo
tbm tenho que fazer isso em ajax to ralado
pois nao entendo muito bem

1 08 2008
battisti

Marcinho tem que colocar no onClick do teu botão de submit, algo mais ou menos assim:

1 08 2008
marcinho degauss brasil

algo mais ou menos assim? assim como???
nao tem nada ali em baixo, pelo menos aqui nao esta aparecendo…

1 08 2008
2 08 2008
battisti

o wordpress bloqueou o texto

input type=’submit’ onClick=’tinyMCE.triggerSave(true,true);’ value=’salvar’

4 08 2008
Reinaldo JuniorZ

Uma outra opção é usar o recurso de Eventos do tinyMCE, o que automatiza a solução… Assim ,você só precisa fazer uam chamada a essa função ao disparar o evento onChange do tinyMCE… FIcaria assim a solução:


tinyMCE.init({

//Suas OPÇÔES padrão

setup : function(ed) {
ed.onChange.add(function(ed) {
tinyMCE.triggerSave();
});
}
});

Referência: http://www.webmasterkitchen.com/article/tinymce-ajax-form-submission/

4 08 2008
Reinaldo JuniorZ

Repetindo… (o code do WordPress nao funcionou)

tinyMCE.init({
// Suas OPÇÕES padrão
setup : function(ed) {
ed.onChange.add(function(ed) {
tinyMCE.triggerSave();
});
}
});

4 08 2008
battisti

Opa valeu pela dica!

6 08 2008
marcinho degauss brasil

bom o meu evento onclick esta sendo usado por essa função

onclick=”alteraConteudo(cod_depto; ?>)

que é chamo a função javascript alteraConteudo.

bom o que eu faço para implementar o tinyMCE no meu projeto?

6 08 2008
marcinho degauss brasil

nao entendi a sua segunda opção..
desculpe a ignorancia mas sou um noob em ajax. nao entendo nada

6 08 2008
Felipe

Ola, eu uso o editor TinyMCE no modo básico, porém quando colo um texto de outro site da web(CTRL+V) ele vem todo formatado com as tags html.. por exemplo os links ja vem com . Gostaria que ao colar qualquer texto ele tire toda a formatação e entre somente como um texto puro.
É possível?
Também gostaria de adicionar o botão para add links no modo básico. Tem como?
Obrigado pela ajuda.

7 08 2008
battisti

marcinho degauss brasil

Lá onde você está iniciado o teu tinyMCE você pode inserir o código citado pelo Reinaldo JuniorZ, ou se preferir pode adicionar mais um evento no onClick do botão

onclick=”alteraConteudo(cod_depto;) ; tinyMCE.triggerSave(true,true)

7 08 2008
battisti

Felipe:

Não sei certinho se tem como fazer isso que você ta pedindo mas assim tem um botão no tiny que é o inserir texto, nele vc da o CTRL + V e fica sem formatação ai com o OK o texto vai pra dentro do tiny

1 06 2009
Vitor

Galera tudo bem,
to com um problema gostaria que o tinymce mostrasse os dados no proprio tiny para poder alterar, o problema é que quando utilizo input ao inves de textarea ele me retorna os dados certinhos mais é soh eu colocar o tiny ou textarea que ele nao retorna nada,
alguem poderia me ajudar??
bom para melhor entender eu utilizo o smart com php ajax e o banco de dados é o firebird.
tambem soh consegui cadastrar utilizando tinyMCE.triggerSave(true,true); no meu botão de salvar, mais ele salva sem passar pelas regras de acento que criei e que funcionam com o input, andei lendo e tem uma função do tiny tinyMCE.updateContent (); que faz isso(o oposto do tinyMCE.triggerSave(true,true); ) mais nao sei como utilizar.
Sou iniciante e peguei um projeto no meio, gostaria da ajuda de vcs…
abraços

2 06 2009
battisti

Faz o seguinte manda ai uma url do teu projeto pragente dar uma olhada nos teu JS, pq assim nao eh pra dar esse erro

3 06 2009
Vitor

Pessoal consegui….
agora to com um problema ele ainda nao ta salvando com palavras com acento e na hora de mostrar ele retorna com tags como é salvo no banco
entao minha pergunta seria a seguinte como salvar palavras com acento (á) e como mostrar no proprio tiny as palavras salvas pelo usuario em negrito italico por exemplo sem as tags .
obrigado!!!

4 06 2009
battisti

Isso ai deve ser problema de codificação, teu banco está em iso-8859-1 MAS a tua página HTML está em UTF-8, se for isso eu sugiro que troque o encoding do html ou se preferir usa o utf8_encode e utf8_decode na hora de salvar e ler do banco!

4 06 2009
Vitor

Era isso mesmo galera valeu ja consegui resolver,
soh uma duvida esse encoding e decode nao serve para sublinhado e os outros.
pois no meu funcionou o negrito e o italico soh,
alguem sabe como fazer para ele ler esses tbm.
estou usando o modelo simples do tinymce
http://tinymce.moxiecode.com/examples/simple.php
abraços.

5 06 2009
battisti

Não tem nenhuma restrição, se funcionou para negrito o outro deve funcionar tbm!

17 06 2009
Vitor

Cara mais nao funciona, e outra quando vou mostrar em uma div os dados inseridos faço um select no banco ai ele retorna os dados bacana mais se eu salvar pelo tinymce um texto ex:
eu
vou
sair
Se o texto inserido tiver \n(ou seja o enter) ele retorna um erro por causa desse “\n”
como faço para tratar isso alguem sabe???
abraços

17 06 2009
battisti

passa ai a url de teste pra eu dar uma olhada!

17 06 2009
Vitor

Vou tentar fazer um ambiente de teste e passo pra vc!!!

Mais adiantando eu queria tirar a quebra de linha e trocar pelo assim acabaria o erro.
acho que daria pra fazer isso na hora de salvar os dados soh nao sei muito bem como fazer.
O engraçado e que quando mostro os dados dentro do tinymce ele nao retorna erro, mais como tenho a necessidade de mostrar na pagina principal tbm ai ele da esse erro.

Deixe um comentário