[Resolvido] openwysiwyg / ckeditor

Jackson Dias · Outubro 12, 2009

Nobres, antes de criar esse tópico procurei primeiro no google, depois recorri ao sistema de busca do fórum, mas...

o ~~tico-e-teco não conseguiu~~ entendimento por minha parte não foi aproveitado.

Não tenho intenção de ganhar nada "mastigado".

Mas, não consegui fazer... :wacko: http://forum.imasters.com.br/public/style_emoticons/default/grin.gif

A forma de usar pelo que entendi é a mesma, só não estou conseguindo ir pelo caminho correto.

1º Baixei o http://ckeditor.com/download

2º Baixei o http://www.openwebware.com/download.shtml

Fiz o UP, e não entendi abslutamente nada depois.

A unica coisa que consegui entender ( http://forum.imasters.com.br/public/style_emoticons/default/grin.gif )é que ele vai atender a minha necessidade, que é criar uma área na pagina.php para ser alterada pelo editor, como se no MS Word fosse, por exemplo.

Se alguém poder me dar uma explicaçãozinha e como fazer a coisa funcionar, ou seja, para que isso posso entrar na minha cabeça ~~(php for designers/portrait)~~, será de grande ajuda.

Agradeço qualquer comentário construtivo.

Jackson

hooligans · Outubro 12, 2009

amigo olha esse link

Clique aqui

ele explica bem como utilizar ,pra falar a verdade nunk usei o ckeditor eu uso o fckeditor mas vi que esse rola com ajax entaum vou dar uma olhada qndo tiver um tempinho mas se pintar uma dúvida ai posta que a gente ve como resolver ok

t+ abraços

João Batista Neto · Outubro 12, 2009

Fiz o UP, e não entendi abslutamente nada depois.

LunG_ShiH,

O CKEditor é um front-end, uma interface amigável para o usuário que será utilizada para criar um conteúdo.

Porém, assim que o conteúdo estiver editado, ele deverá ser enviado para o servidor para que alguma coisa seja feita (salvar no banco de dados, gravar um novo arquivo).

A primeira coisa a se fazer é decidir qual editor será utilizado, você baixou dois diferentes.

Usando o CKEditor:

1. Após baixar o pacote, descompacte-o em uma pasta de acesso público

2. Inclua o caminho para o ckeditor.js no seu html:

Supondo que você esteja em:

/seusite/pagina.html

e você descompactou o ckeditor em:

/seusite/public/js

O caminho até o ckeditor.js será:

/seusite/public/js/ckeditor/ckeditor.js

Seu HTML ficará mais ou menos assim:

pagina.html

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http-~~-//www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http-~~-//www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/xml; charset=UTF-8" />
<title>Usando o CKEditor</title>
<script type="text/javascript" src="public/js/ckeditor/ckeditor.js"></script> <!-- <== Aqui você colocará o caminho até o CKEditor -->
</head>
<body>
<form action="grava.php" method="post"> <!-- <== Aqui, grava.php é o kara que irá gravar o conteúdo em um arquivo ou no banco de dados -->
<fieldset>
<textarea id="nomedoeditor" class="ckeditor" cols="80" name="nomedoeditor" rows="10"></textarea> <!-- <== Aqui, nomedoeditor é o nome da variável que chegará para o PHP -->
</fieldset>
</form>
</body>
</html>

Agora que você tem o editor funcionando, basta criar o arquivo que irá receber o texto:

grava.php

<?php
if ( isset( $_POST[ 'nomedoeditor' ] ) ){
echo '<h1>O conteúdo do editor</h1>';
echo $_POST[ 'nomedoeditor' ]; //<== Aqui, nomedoeditor é o mesmo nome do campo colocado no HTML
} else {
echo 'Opz, esse arquivo não pode ser acessado diretamente';
}

Porém, a partir daqui, é necessário saber se você quer gravar em um banco de dados ou se você quer gravar um novo arquivo para que o arquivo grava.php seja adequado.

;)

Jackson Dias · Outubro 12, 2009

amigo

hooligans, prometo olhar com dedicação o link que me passou.

Agradeço.

E se não conseguir tirar a dúvida pergunto sim, obrigado pelo espaço.

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Porém, a partir daqui, é necessário saber se você quer gravar em um banco de dados ou se você quer gravar um novo arquivo para que o arquivo grava.php seja adequado.

Nobre,

Minha intenção inicial é/era grava ele em um arquivo.txt que ia ficar como include. Mas já aproveitando o seu comentário, o que ficaria melhor, banco de dados ou novo arquivo?

O que o você falar está dito e seguirei.

-----

Off-topic:

Depois da resposta não testei nada ainda, vou tirar um cochilo aqui, não dormi ainda :rolleyes:

Agradeço pelo comentário.

João Batista Neto · Outubro 12, 2009

Mas já aproveitando o seu comentário, o que ficaria melhor, banco de dados ou novo arquivo?

Tudo depende do objetivo final, por exemplo:

Se você deseja criar um sistema de notícias, o ideal é gravar em um banco de dados pois, dessa forma, você terá uma forma fácil para administrar e excluir/editar o conteúdo se necessário.

Jackson Dias · Outubro 12, 2009

E trabalhando na primeira opção que é gravar em um outro arquivo, qual o processo seria João Batista?

---------

Se eu estiver abusando da boa vontade pode falar, sem problemas.

http://forum.imasters.com.br/public/style_emoticons/default/yay.gif

João Batista Neto · Outubro 12, 2009

E trabalhando na primeira opção que é gravar em um outro arquivo, qual o processo seria João Batista?

Caso você queira gravar em arquivos, a primeira coisa a se fazer é definir uma pasta para guardar esses arquivos, isso facilitará na hora da manutenção:

Sua estrutura de diretórios ficaria alguma coisa assim:

/seusite

/seusite/public

/seusite/public/js

/seusite/public/js/ckeditor

/seusite/public/arquivos <== Aqui ficarão todos os arquivos criados

/seusite/pagina.html

/seusite/grava.php

pagina.html

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http-~~-//www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http-~~-//www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/xml; charset=UTF-8" />
<title>Usando o CKEditor</title>
<script type="text/javascript" src="public/js/ckeditor/ckeditor.js"></script> <!-- <== Aqui você colocará o caminho até o CKEditor-->
</head>
<body>
<form id="meuform" action="grava.php" method="post">
<fieldset>
<label for="arquivo">
<span>Nome do arquivo:</span>
<input id="arquivo" type="text" name="arquivo" /> <!-- Aqui o usuário colocará o nome do arquivo que será salvo -->
</label>
<textarea id="ed1" class="ckeditor" cols="80" name="nomedoeditor" rows="10"></textarea> <!-- Aqui, nomedoeditor é o nome da variável que chegará para o PHP -->
</fieldset>
</form>
</body>
</html>

Veja que adicionamos um novo campo ao formulário, nesse campo colocaremos o nome do arquivo que será salvo.

Agora o grava.php ficaria assim:

<?php
if ( isset( $_POST[ 'nomedoeditor' ] ) ){
$arquivo =& $_POST[ 'arquivo' ];

if ( isset( $arquivo{ 1 } ) ){
$pasta = 'public/arquivos/';
$arquivo = sprintf( '%s%s.html' , $pasta , basename( $arquivo ) );

if ( file_put_contents( $arquivo , $_POST[ 'nomedoeditor' ] ) !== false ){
echo 'Arquivo gravado com sucesso';
}
} else {
echo 'Você precisa informar o nome do arquivo.';
}
} else {
echo 'Opz, esse arquivo não pode ser acessado diretamente';
}

Bom, com os arquivos gravados você irá precisar exibi-los depois, para isso você pode fazer alguma coisa assim:

seudominio/index.php?arquivo=nomequevocesalvou

e o index.php ficaria alguma coisa assim:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http-~~-//www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http-~~-//www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/xml; charset=UTF-8" />
<title>Exibindo o conteúdo</title>
<script type="text/javascript" src="public/js/ckeditor/ckeditor.js"></script> <!-- <== Aqui você colocará o caminho até o CKEditor-->
</head>
<body>
<?php
$arquivo =& $_GET[ 'arquivo' ];

if ( isset( $arquivo{ 1 } ) ){
$pasta = 'public/arquivos/';
$arquivo = sprintf( '%s%s.html' , $pasta , basename( $arquivo ) );

if ( is_file( $arquivo ) && is_readable( $arquivo ) ){
readfile( $arquivo );
}
} else {
echo '<h1>Arquivo não encontrado</h1>';
}
?>
</body>
</html>

Jackson Dias · Outubro 12, 2009

Nobre,

Tou feio na foto :rolleyes:

O que estou deixando escapar?

Imagem Postada

no pagina.html eu modifiquei:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/xml; charset=UTF-8" />
 <title>Usando o CKEditor</title>
 <script type="text/javascript" src="public/js/ckeditor/ckeditor.js"></script> <!-- <== Aqui você colocará o caminho até o CKEditor-->
 </head>
 <body>
 <form id="meuform" action="grava.php" method="post">
 <fieldset>
 <label for="arquivo">
 <span>Nome do arquivo:</span>
 <input id="arquivo" type="text" name="arquivo.txt" /> <!-- MODIFIQUEI- -----Aqui o usuário colocará o nome do arquivo que será salvo -->
 </label>
 <textarea id="ed1" class="ckeditor" cols="80" name="nomedoeditor" rows="10"></textarea> <!-- Aqui, nomedoeditor é o nome da variável que chegará para o PHP -->
 </fieldset>
 </form>
 </body>
</html>

Foi somente isso mesmo.

Quanto ao index, ficou fora da pasta public,

Assim:

http://img128.imageshack.us/img128/1469/joao2.jpg

Criei manualmente um arquivo chamado arquivo.txt dentro da pasta para os arquivos. Está correto?

O index.php ficou assim:

***remoção de links do site pessoal***

Off:

Já pensou eu sobrevivendo de php?

(risos)

João Batista Neto · Outubro 12, 2009

<input id="arquivo" type="text" name="arquivo.txt" /> <!-- MODIFIQUEI- -----Aqui o usuário colocará o nome do arquivo que será salvo -->

Certo, o valor do atributo name deve ser apenas arquivo, assim:

<input id="arquivo" type="text" name="arquivo" />

Isso fará com que a variável arquivo chegue ao PHP assim:

$arquivo = $_POST[ 'arquivo' ]; //O conteúdo que o usuário escrever no campo texto chegará ao PHP pela variável arquivo

Quanto ao index, ficou fora da pasta public,

Nesse caso, o arquivo grava.php deve ser modificado para:

<?php
if ( isset( $_POST[ 'nomedoeditor' ] ) ){
$arquivo =& $_POST[ 'arquivo' ]; //Aqui receberemos o nome que for colocado no campo texto

if ( isset( $arquivo{ 1 } ) ){
$pasta = 'arquivos/'; //<== Veja que aqui retiramos o public/
$arquivo = sprintf( '%s%s.html' , $pasta , basename( $arquivo ) );

if ( file_put_contents( $arquivo , $_POST[ 'nomedoeditor' ] ) !== false ){
echo 'Arquivo gravado com sucesso';
}
} else {
echo 'Você precisa informar o nome do arquivo.';
}
} else {
echo 'Opz, esse arquivo não pode ser acessado diretamente';
}

E o index.php ficaria:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http-~~-//www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http-~~-//www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/xml; charset=UTF-8" />
<title>Exibindo o conteúdo</title>
</head>
<body>
<?php
$arquivo = & $_GET[ 'arquivo' ];

if ( isset( $arquivo{ 1 } ) ){
$pasta = 'arquivos/'; //<== Aqui removemos também o public/
$arquivo = sprintf( '%s%s.html' , $pasta , basename( $arquivo ) );

if ( is_file( $arquivo ) && is_readable( $arquivo ) ){
readfile( $arquivo );
}
} else{
echo '<h1>Arquivo não encontrado</h1>';
}
?>
</body>
</html>

Criei manualmente um arquivo chamado arquivo.txt dentro da pasta para os arquivos. Está correto?

Na verdade, estamos salvando como arquivos/nome_digitado_no_campo_de_texto.html

Já pensou eu sobrevivendo de php?

Tenho certeza que você seria melhor programador PHP do que eu desenhista.

;)

Jackson Dias · Outubro 12, 2009

[Eu de novo]

João,

No index.php mostra a seguinte mensagem:

Arquivo não encontrado

***remoção de links do site pessoal***

E digito texto desejado e o nome do arquivo, pressiono enter ele confirma belezinha.

Em ***remoção de links do site pessoal***

Vejo todos os arquivos

joao.html

exemplo.html

pagina.html

Qual foi a influencia do index.php?

E como eu aplico aquelas ferramentas bonitinhas no texto?

^_^

João Batista Neto · Outubro 12, 2009

Amigão, olha só: sample

Esse link ai é um sample funcional, ele servirá de base para continuarmos a implementação.

O CKEditor já está acompanhando o .zip você precisará apenas descompactá-lo.

;)

Jackson Dias · Outubro 12, 2009

João você é o cara mesmo! http://forum.imasters.com.br/public/style_emoticons/default/joia.gif

Está 99%.

1% que falta é ***remoção de links do site pessoal***

Poruqe os emoctions e a imagem não é exibida? http://forum.imasters.com.br/public/style_emoticons/default/ermm.gif

^_^

João Batista Neto · Outubro 12, 2009

1% que falta é ***remoção de links do site pessoal***

Poruqe os emoctions e a imagem não é exibida? http://forum.imasters.com.br/public/style_emoticons/default/ermm.gif

LunG,

O problema provavelmente é: http://br.php.net/ma...magicquotes.php

No seu index.php, na linha 43, existe o seguinte:

$conteudo = $_POST[ 'conteudo' ];

Modifique por:

$conteudo = get_magic_quotes_gpc() ? stripslashes( $_POST[ 'conteudo' ] ) : $_POST[ 'conteudo' ];

Isso deverá resolver para os novos arquivos criados, os antigos continuarão com problemas até serem salvos novamente.

;)

Jackson Dias · Outubro 12, 2009

Muito obrigado João Batista!!!

Está perfeito agora! 100%.

Se você fosse uma Moderadora eu ia te dar uns pegas ó!!!

Mas como não é, pode esquecer!

Agradeço pela paciência.

Ahhh se quiser aparecer lá pelos desenhos fica a vontade.

:lol:

*Resolvido*

João Batista Neto · Outubro 12, 2009

Está perfeito agora! 100%.

Legal, só um detalhezinho agora, segurança.

Da forma que ficou, qualquer um pode entrar e editar, para evitar isso, substitua o index.php atual por esse: index.php.zip

Se você fosse uma Moderadora eu ia te dar uns pegas ó!!!

http://forum.imasters.com.br/public/style_emoticons/default/sick.gif

Ahhh se quiser aparecer lá pelos desenhos fica a vontade.

Opa, pode deixar...

;)

*EDIT*: O nome de usuário e senha estão na linha 7, veja é sensível a caixa e por esse motivo, você deverá digitar exatamente igual o que você colocar lá.

Jackson Dias · Outubro 12, 2009

beautiful!

João,

O usuário e senha ficaram lindos :rolleyes: , mas acredito que você vai deixar o script ai para outros, então eu mudei a senha... http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Funcionou perfeitamente, o resultado ficou bem mais do que eu esperava 200%.

Valeu mesmo pela força. http://forum.imasters.com.br/public/style_emoticons/default/clap.gif

João Batista Neto · Outubro 12, 2009

O usuário e senha ficaram lindos :rolleyes: , mas acredito que você vai deixar o script ai para outros, então eu mudei a senha... http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Legal, de fato os arquivos para download ficarão como link permanente, então a mudança da senha foi totalmente adequada. (afinal, que segurança tem uma senha pública ??)

Funcionou perfeitamente, o resultado ficou bem mais do que eu esperava 200%.

humm, 200% é um bom número...

;)

alexbenegas · Outubro 13, 2009

Caros amigos..

estava procurando justamente algo que pudesse me orientar de forma completa...onde um exemplo de código pode fazer... e é espetacular este exemplo...

Apartir disto posso ir me aperfeiçoando...

muito obrigado!

Leandro Luiz · Outubro 26, 2009

O envio de imagem upload como faço para habilitar ele?

alexbenegas · Novembro 7, 2009

Caro amigo João Batista Neto, poderia esplanar neste seu modelo como configurar o CKFinder? http://forum.imasters.com.br/public/style_emoticons/default/grin.gif

Arquivado

[Resolvido] openwysiwyg / ckeditor

Recommended Posts

Jackson Dias 68

Compartilhar este post

Link para o post

Compartilhar em outros sites

hooligans 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

João Batista Neto 448

Compartilhar este post

Link para o post

Compartilhar em outros sites

Jackson Dias 68

Compartilhar este post

Link para o post

Compartilhar em outros sites

João Batista Neto 448

Compartilhar este post

Link para o post

Compartilhar em outros sites

Jackson Dias 68

Compartilhar este post

Link para o post

Compartilhar em outros sites

João Batista Neto 448

Compartilhar este post

Link para o post

Compartilhar em outros sites

Jackson Dias 68

Compartilhar este post

Link para o post

Compartilhar em outros sites

João Batista Neto 448

Compartilhar este post

Link para o post

Compartilhar em outros sites

Jackson Dias 68

Compartilhar este post

Link para o post

Compartilhar em outros sites

João Batista Neto 448

Compartilhar este post

Link para o post

Compartilhar em outros sites

Jackson Dias 68

Compartilhar este post

Link para o post

Compartilhar em outros sites

João Batista Neto 448

Compartilhar este post

Link para o post

Compartilhar em outros sites

Jackson Dias 68

Compartilhar este post

Link para o post

Compartilhar em outros sites

João Batista Neto 448

Compartilhar este post

Link para o post

Compartilhar em outros sites

Jackson Dias 68

Compartilhar este post

Link para o post

Compartilhar em outros sites

João Batista Neto 448

Compartilhar este post

Link para o post

Compartilhar em outros sites

alexbenegas 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Leandro Luiz 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

alexbenegas 0