Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Jackson Dias

[Tutorial] CKEditor

Por , em PHP

Recommended Posts

Jackson Dias    68

Jackson Dias
Postado

Olá iMasters, segue a minha primeira contribuição para o fórum de PHP.

Será mostrado um painel de edição para inclusão/remoção de textos e imagens, que pode ser oferecido para seu cliente, para que assim ele mesmo possa alterar todo o conteúdo do site.

 

 

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

 

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

 

Descompacte os arquivos para uma pasta desejada.

Vou chama-la de ckeditor. E matenha a seguinte organização:

 

 

|- ckeditor

|- index.php

|

|-application

|--- controller

|---- editor.php

|---- footer.php

|---- header.php

|---- list.php

|

|--- view

|

|- public

|-- arquivos

|--- js

|----ckeditor(pasta que fica dentro do arquivo que foi descompactado)

|----- .htaccess

|----- CHANGES

|----- ckeditor

|----- ckeditor.pack

|----- ckeditor_basic

|----- ckeditor_basic_source

|----- ckeditor_source

|----- config

|----- contents

|----- INSTALL

|----- LICENSE

|----- _samples

|----- _source

|----- _tests

|----- images

|----- lang

|----- plugins

|----- skins

|----- themes

 

 

 

Arquivos:

 

index.php

 

<?php
$auth = false;

if ( isset( $_SERVER[ 'PHP_AUTH_USER' ] ) && isset( $_SERVER[ 'PHP_AUTH_PW' ] ) ){
	$user = $_SERVER[ 'PHP_AUTH_USER' ];
	$pswd = $_SERVER[ 'PHP_AUTH_PW' ];
	$auth = ( ( $user == 'SEU_NOME_DE_USUÁRIO') && ( $pswd == 'SUA_SENHA' ) );
}

if ( !$auth ){
    header('WWW-Authenticate: Basic realm="Digite sua senha"');
    header('HTTP/1.0 401 Unauthorized');
    echo '<h1>Acesso negado.</h1>';
} else {
	$dir = 'public/arquivos/';
	$act = null;

	if ( isset( $_GET[ 'act' ] ) ) $act =& $_GET[ 'act' ];
	else $act = 'list';

	require 'application/view/header.php';

	if ( isset( $_REQUEST[ 'arquivo' ] ) )
		$arquivo = basename( implode( '' , explode( '.html' , $_REQUEST[ 'arquivo' ] ) ) );

	switch ( $act ){
		/**
		 * Se a ação for list ou se nenhuma ação for requisitada, listaremos os arquivos
		 */
		case 'list':
			$list = array();

			foreach ( glob( 'public/arquivos/*.html' ) as $file ) $list[] = basename( $file );

			require 'application/view/list.php';
			break;

		/**
		 * Se um arquivo for selecionado então iremos iremos editá-lo
		 */
		case 'edit':
			/**
			 * Verificamos se o nome do arquivo foi passado
			 */
			if ( isset( $_GET[ 'arquivo' ] ) )
				$conteudo = file_get_contents( sprintf( '%s%s.html' , $dir , $arquivo ) );
			else {
				echo '<h1>Requisição inválida</h1>';
				break;
			}
		case 'new':
			require 'application/view/editor.php';
			break;
		case 'save':
			if ( isset( $_POST[ 'arquivo' ] ) && isset( $_POST[ 'conteudo' ] ) ){
				$conteudo = get_magic_quotes_gpc() ? stripslashes( $_POST[ 'conteudo' ] ) : $_POST[ 'conteudo' ];

				if ( file_put_contents( sprintf( '%s%s.html' , $dir , $arquivo ) , $conteudo ) !== false ){
					echo '<script type="text/javascript">alert( \'Arquivo gravado com sucesso.\' );</script>';

					require 'application/view/editor.php';
				}

				break;
			}
		default:
			echo '<h1>Requisição inválida</h1>';
	}

	require 'application/view/footer.php';
}

 

Em:

|- ckeditor

|-- application

|--- view

|

|

|

editor.php

 

<form id="meuform" action="index.php?act=save" method="post">
	<fieldset>
		<label for="arquivo">
			<span>Nome do arquivo:</span>
			<input id="arquivo" type="text" name="arquivo" value="<?php echo isset( $arquivo ) ? $arquivo : null; ?>" /> <!-- Aqui o usuário colocará o nome do arquivo que será salvo -->
		</label>
		<textarea id="conteudo" class="ckeditor" cols="80" name="conteudo" rows="10">
		<?php if ( isset( $conteudo ) ) echo $conteudo; ?>
		</textarea>
	</fieldset>
</form>

<a href="?act=list" title="Listagem">Listagem</a>

|

|---------

|footer.php

 

	</body>
</html>

|

|---------

| header.php

 

<!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-->
		<style type="text/css">
			body {
				font-family: Arial, Helvetica;
				font-size: 12px;
				color: #333333;
			}

			a {
				text-decoration: none;
				color: #333333;
				margin-left: 10px;
			}

			a:hover {
				border-bottom: 1px dashed #333333;
			}

			ul li a {
				margin	: 0px;
			}

			form fieldset {
				border : 0px none;
			}

			form fieldset label {
				margin : 0px 0px 10px 0px;
				display: block;
			}
		</style>
	</head>
	<body>

|

|---------

| list.php

 

 

<ul class="list">
<?php
	foreach ( $list as $file ){
		printf( '<li><a href="?act=edit&arquivo=%s" title="Clique para editar">%s</a></li>' , $file , $file );
	}
?>
</ul>

<a href="?act=new" title="Novo arquivo">Novo</a>

 

Agora faça o Upload dos arquivos para o servidor.

Após terminar o envio dos arquivos abra:

 

www.seusite.com.br/ckeditor

 

Digite a senha escolhida no inicio do index.php

Para quem não lembra aqui vai:

 

$auth = ( ( $user == 'SEU_NOME_DE_USUÁRIO') && ( $pswd == 'SUA_SENHA' ) );

 

Ai digitar o nome de usuário e senha corretamente aparecerá a opção: Novo, clique uma vez nele e aguarde o carregamento do modo Editor.

 

No topo do lado esquerdo <---- Vai aparecer a opção para inserir o nome para o arquivo, você deve digitar o nome do arquivo, exemplo: imasters, o arquivo será gerado na extensão *.html use a caixa de edição da forma que achar melhor como se no microsoft word fosse.

 

Após fazer suas alterações clique no botão que tem um "Disquete", o botão Salvar.

Confirme a alteração clicando no botão Ok.

 

Para ver o(s) arquvos criados, clique em Listagem na parte Inferior do Editor.

Clicando em um dos arquivos

 

*.html

*.html

 

Você poderá fazer edições (ex: Adicionar/excluir textos e/ou imagens).

 

Para os arquivos serem visualizados você deverá entrar no endereço:

 

www.SEUSITE.com.br/ckeditor/public/arquivos/

 

Vai aparecer a lista de arquivos que já foram criados.

Ok, agora é você quem sabe o que irá fazer com eles.

 

 

Espero que ajude alguém!

 

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

 

 

Atenciosamente,

 

Jackson Dias

Moderação Global iMasters

 

 

 

 

 

Créditos: João Batista Neto

Tópico: http://forum.imasters.com.br/index.php?/topic/366625-openwysiwyg-ckeditor/

Compartilhar este post

Link para o post
Compartilhar em outros sites

Patrique    0

Patrique
Postado

Nossaaaaa!!! Lungggg a tempos esta precisando de um tutorial bem explicado assim que me desse uma noção do ckeditor, exelente cara, nota 1000! para este seu tuto, continue assim!

 

MUITO OBRIGADO!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Leandro Luiz    0

Leandro Luiz
Postado

Ola boa tarde, tentei fazer este procedimento so que não deu certo, a possibilidade de você zipar os arquivos para fazer download ou verificar se realmente está ordem está correta das pasta e arquivo, desde já muito obrigado.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Jackson Dias    68

Jackson Dias
Postado

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

 

Os arquivos estão nesse tópico disponibilizados pelo João.

 

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

 

http://forum.imasters.com.br/index.php?/topic/366625-openwysiwyg-ckeditor/

Compartilhar este post

Link para o post
Compartilhar em outros sites

Matias Rezende    50

Matias Rezende
Postado

Warning: file_put_contents(public/arquivos/noticias1.html) [function.file-put-contents]: failed to open stream: Permission denied in /home/xxxx/htdocs

 

Falta permissão no arquivo.

 

Carlos Eduardo

Compartilhar este post

Link para o post
Compartilhar em outros sites

Vertin    0

Vertin
Postado

Porque este erro na hora de salvar:

 

Warning: file_put_contents(public/arquivos/noticias1.html) [function.file-put-contents]: failed to open stream: Permission denied in /home/xxxx/htdocs/SistemaNews/index.php on line 45

 

 

Nesse tópico estou com a mesma dúvida sua, acompanhe que vai conseguir fazer upload de imagens no Ckeditor

 

http://forum.imasters.com.br/index.php?/topic/375804-configurar-ckeditor-para-uploads/#entry1451516

Compartilhar este post

Link para o post
Compartilhar em outros sites

rockman 2    0

rockman 2
Postado

Olá Lung!

 

Bom primeiramente estou agradecendo pelo tuto que sem duvida é perfeito pois não achei nada parecido na internet!

Porem tenho 3 perguntas basica para fazer amigo.

 

1° Para integrar com o CFKeditor posso usar a mesma estrutura de arquivos se não você poderia me indicar como ficaria?

2° Após salvar o conteudo verifiquei que ele cria um arquivo ".html" o que teria que mudar para ele criar e listagem de arquivos ".php" quando clicar em salvar em vez de ".html"?

3° Ná pagina "list.php" senti falta de um link ou botão ao lado da linha que indica o arquivo criado para apagar o arquivo; Você poderia me indicar como acrecentar esta função no arquivo list.php?

 

Obrigado novamente por este ótimo tutorial!!!

Compartilhar este post

Link para o post
Compartilhar em outros sites

rockman 2    0

rockman 2
Postado

Olá Lung!

 

Bom primeiramente estou agradecendo pelo tuto que sem duvida é perfeito pois não achei nada parecido na internet!

Porem tenho 3 perguntas basica para fazer amigo.

 

1° Para integrar com o CFKeditor posso usar a mesma estrutura de arquivos se não você poderia me indicar como ficaria?

2° Após salvar o conteudo verifiquei que ele cria um arquivo ".html" o que teria que mudar para ele criar e listagem de arquivos ".php" quando clicar em salvar em vez de ".html"?

3° Ná pagina "list.php" senti falta de um link ou botão ao lado da linha que indica o arquivo criado para apagar o arquivo; Você poderia me indicar como acrecentar esta função no arquivo list.php?

 

Obrigado novamente por este ótimo tutorial!!!

 

Bom consegui resolver a questão n°2 que é estupidamente facil pois era só alterar todos as extenções .html por .php no arquivo index.php para os documentos serem criados com extensão .php.

Mas em relação ao FCKeditor só consegui integra-lo a ponto de carrega-lo na tela de edição mas quando eu cliko em salvar ele até cria o arquivo novo, quando cliko em listar e em seguida no arquivo criado o conteúdo não aparece no editor CFK e sim no "textarea" dentro do form que está fora do form sendo que o FCK editor deveria estar dentro do form com o conteudo para edição!!!

 

A minha 3° pergunta ainda nem coloquei as mãos heheh... estou me acabando com a segunda :D !!!

 

Ainda no aguardo por uma ajudinha!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Jackson Dias    68

Jackson Dias
Postado

Olá rockman,

 

Que bom que gostou do tutorial.

Mas que fique claro que apenas passei o que o João Batista Neto me passou ;)

 

1º item - Você fala do CKFinder, ou você fala do CKEditor? Não entendi muito bem pois nos seus ultimos posts está tudo "embaralhado" quanto ao nome do editor :(

2º item - muito bom eim, a sua audácia foi eficiente ^_^

3º item - não faço ideia :D -

Obs.: Não manjo de programação, sou da área de artes... O post inicial é apenas uma tentativa de ajudar com algo que fui ajudado. Mas quem sabe outra pessoa que tenha entendido sua duvida e sobre a duvida, possa entrar em debate e nós conseguiremos aprender como fazer.

 

Se você conseguir antes de alguma resposta, se possivel posta aí pra todos.

 

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

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos PHP
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito