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

Information

30 responses

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.

29 04 2010
Adriana

Ok – Isso funcionou, brigadu.
Seguinte: Meu form so funciona se chamo a pagina diretamente … Se for via jquery não (Código: $(vdiv).load(vpagina,{acc:nocache}); ) – Já li algo a respeito, mas não consigo implementar.

Dá para ajudar?

2 07 2011
Erick

Queria saber como fazer o tiny salvar no BD MySQL as palavras acentuadas normalmente, o collation está em latin1_swedish_ci e o site em iso…
Por exemplo, vou salvar a palavra “participação” e no banco fica “participação” dai o sistema de busca não acha.

8 07 2011
battisti

Ai vai depender do encoding do teu banco e dos teus arquivos talvez vc vai precisar usar o utf8_encode ou utf8_decode!

7 03 2014
Paulo

Anselmo muito bom esse seu post…Resolveu meu problema!
Acrescentei a instrução
tinyMCE.triggerSave(true,true);
antes da chamada ao acesso ao elemento textarea e deu certinho.
Obrigado pelo post.

22 08 2014
Cara

Dica da porraa!!!!!

12 06 2015
Juliano Balbis Garcia

Anselmo, tudo bem? To com seguinte problema, No administrativo do meu portal estou desenvolvendo ele com bootstrap e jquery, dentro do painel administrativo, tenho alguns arquivos de crud que estao dentro de uma modal do bootstrap e carrego os dados atraves do formulario do bootstrap, estou com problema é na pagina de cadastro de postagens, onde quero inserir no textarea o tinymce, vi que voce mostra como fazer isso aqui, mas sou iniciante e nao estou conseguindo arrumar, vou postar abaixo os codigos, tanto do formulario que esta dentro de uma pasta ajax e do arquivo js que executo o ajax

http://pastebin.com/BupDWpmY – Formulario

http://pastebin.com/ppDqrV3r – Arquivo Javascript

Podes me dar uma força por gentileza, grato pela atenção abraços

Deixe uma resposta

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s




%d blogueiros gostam disto: