Você não está conectado. Conecte-se ou registre-se

Implantar CKEditor

Ir em baixo  Mensagem [Página 1 de 1]

1 Implantar CKEditor em Qui Nov 27, 2014 2:42 pm

HeroWaar

avatar
Membro elite

Minha questão:
Olá,

Montei um editor no site CKEditor.com porem não sei como implanta-lo em meu fórum.

No arquivo baixado vieram os seguintes:
[Somente administradores podem ver esta imagem]

Caso precise eu disponibilizo os arquivos aqui.

Obrigado.


Endereço do meu fórum:
[Somente administradores podem ver este link]

Versão:
PunBB

Ver perfil do usuário http://badlands.com.br/

2 Re: Implantar CKEditor em Qui Nov 27, 2014 4:13 pm

waghcwb

avatar
Membro elite

Olá,

Essa é uma implementação tecnicamente fácil de ser feita, não conheço muito bem o código do CKEditor, mas com base no que vou tentar elucidar aqui você já deve conseguir fazer.

Para que possamos iniciar, você primeiro deve entender os conceitos básicos de como os formulários funcionam, não especificamente na Forumeiros.

Todos os formulários tem campos padrões que servem para enviar os dados inseridos neles para que a linguagem servidor (em nosso caso o PHP) possa fazer a leitura e interpretação.

Esses dados são passados pelos campos <pre class="pre">input</pre> que recebem atributos como por exemplo o <pre class="pre">name</pre>

Faça um pequeno teste, crie uma página HTML em seu computador com o seguinte conteúdo:

Código:
<form method="get">
   <label for="name">Nome:</label>
   <input type="text" name="name" placeholder="Digite seu nome">
   
   <label for="email">Email:</label>
   <input type="email" name="email" placeholder="Digite seu email">
   
   <button type="submit">Enviar</button>
</form>

Preencha os dados e envie o formulário, note que na URL do seu navegador, irão aparecer parâmetros: <pre class="pre">/form.html?name=Wagner&email=meu%40email.com</pre>

Esses parâmetros nada mais são os dados que você enviou neste formulário.

Os dois métodos principais utilizados para enviar estes dados são o <pre class="pre">GET</pre> e o <pre class="pre">POST</pre>

O método <pre class="pre">GET</pre> mostra os dados na URL do site como no exemplo que te mandei, já o <pre class="pre">POST</pre> deixa eles no cabeçalho da requisição (existem outras diferenças mas é interessante que busque algo especifico para isso na internet).

Sabendo disso, tudo que precisa saber, é quais dados são enviados no formulário que você deseja enviar, neste caso é o formulário de mensagens.

Não é possível analisar ele nos templates da Forumeiros pois lá você só vai encontrar uma variável que insere o HTML pelo PHP: <pre class="pre">{QUICK_REPLY_FORM}</pre>

Então, é necessário analisar manualmente usando seu navegador. A primeira coisa que identificamos dando uma olhada por cima é o seguinte:

[Somente administradores podem ver esta imagem]

A parte que nos interessa ali é para onde esse formulário será enviado que é essa parte <pre class="pre">action="/post"</pre>.

Com essa informação sabemos que o formulário envia os dados para a página <pre class="pre">/post</pre>.

Agora basta saber quais dados são esses, você pode ficar um tempo ali analisando o código, mas eu optei por algo mais rápido, que é simplesmente enviar o tópico e conferir os dados enviados através da aba <pre class="pre">network</pre> no Chrome.

[Somente administradores podem ver esta imagem]

Com isso ai temos os dados que foram enviados no formulário (form data)

Que são <pre class="pre">message</pre>, <pre class="pre">attach_sig</pre>, <pre class="pre">mode</pre>, <pre class="pre">tid</pre>, <pre class="pre">t</pre>, <pre class="pre">lt</pre>, <pre class="pre">nofify</pre>, <pre class="pre">preview</pre> e <pre class="pre">auth</pre>

Agora basta identificar o que cada uma faz. Indo pela lógica já é possível saber de alguns apenas pelo nome.

<pre class="pre">message</pre>: Mensagem do usuário.

<pre class="pre">attach_sig</pre>: Provavelmente a opção de anexar a assinatura do usuário ou não.

<pre class="pre">mode</pre>: Modo (já falo sobre isso)

<pre class="pre">tid</pre>: Método de segurança recém-implantado

<pre class="pre">t</pre>: Tópico.

<pre class="pre">lt</pre>: Não parei para identificar o que é ainda.

<pre class="pre">notify</pre>: Aquela opção de ativar notificações para o tópico.

<pre class="pre">preview</pre>: Preview da mensagem antes de enviar?

<pre class="pre">auth</pre>: Provavelmente venha de autenticação (authentication)

Com essas informações, podemos seguir para a próxima parte, que é saber quais desses parâmetros são necessários e se vamos querer usar os dados que não são necessários (obrigatórios).

Para isso poderiamos fazer algumas postagens com um formulário falso passando ou não os dados identificados acima, porém acredito que seja mais simples e rápido de ser feito com jQuery.

Então vamos fazer nossos testes, no caso vou usar a função <pre class="pre"><a href="http://api.jquery.com/jquery.post/">$.post();</a></pre> do jQuery.

Código:
var tid = $('[name="tid"]').val();

$.post('/post?tid=' + tid, {
   attach_sig: 1,
   mode: 'reply',
   t: '198',
   post: 1,
   subject: 'Título',
   message: 'mensagem'
}).done(function() {
   console.info("Mensagem postada com sucesso.");
}).fail(function() {
   console.error("Erro ao enviar a mensagem, tente novamente.");
});

Após alguns testes descobrimos que os parametros obrigatórios são os mesmo que estão no objeto enviado pelo método post.

Agora basta que tenha um formulário com essas informações para fazer os testes.

Para isso, vamos editar o template <pre class="pre">viewtopic_body</pre>

Procurando por essa variável <pre class="pre">{QUICK_REPLY_FORM}</pre> e inserindo o seguinte formulário logo abaixo

Código:
<form method="post" action="/post">
   
   <label for="subject">Título:</label>
   <input type="text" name="subject">
   
   <label for="message">Mensagem:</label>
   <input type="text" name="message">
   
   <input type="hidden" name="post" value="1">
   <input type="hidden" name="t" value="198">
   <input type="hidden" name="mode" value="reply">
   <input type="hidden" name="attach_sig" value="1">
   
   <button type="submit">Enviar</button>
   
</form>

Assim teremos um formulário para testarmos logo abaixo da resposta rápida.




Com tudo isso que foi explicado, basta que verifique se seu formulário envia esses parametros.

E quanto aos arquivos que baixou, você vai ter que fazer o upload deles para algum lugar, algum host grátis ou pago caso tenha um, e depois mudar os links dos arquivos para os novos.

Eu pessoalmente uso o Google Drive para hospedar poucas coisas como scripts e folhas de estilo.

Qualquer dúvida é só falar o/



"May the force be with you, young grasshopper!"

[Somente administradores podem ver esta imagem][Somente administradores podem ver esta imagem]


Não há assuntos pouco interessantes; apenas há pessoas pouco interessadas.
Ver perfil do usuário

3 Re: Implantar CKEditor em Qui Nov 27, 2014 8:41 pm

JScript

avatar
Membro ativo

<pre class="pre">lt</pre> = Próxima numeração de tópico disponível.

<pre class="pre">auth</pre> = Válido apenas em fóruns que não foi desmarcada a opção de aceitar formulários de terceiros.
É um array no estilo: ["xxxxxxx", "xxxxxx"]

JS



Spoiler:
"O impossível é só uma questão de opinião."


"E o recente formará uma legião. Sua atuação será maior que a atual vezes mil. O estrondor de um milhão de teclados semelhante a um grande terremoto cobrirá a plataforma, e os incrédulos tremerão."

"Alguns seguidores dirão que não é possível, diante de uma legião estarrecida o recente provará o contrário e todos o conhecerão. Os infiéis passarão a lhe adorar diante de uma plataforma que nunca mais será a mesma!"


Do livro de JScript...


Ver perfil do usuário http://jscript.forumeiros.com/

Conteúdo patrocinado


Voltar ao Topo  Mensagem [Página 1 de 1]

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum