[Tutorial] CKEditor

Jackson Dias · Outubro 12, 2009

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

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/

Patrique · Outubro 12, 2009

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!

Jackson Dias · Outubro 12, 2009

:huh:

Valeu Patryck. :D

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

GabrielFerrari · Outubro 13, 2009

Uia

Show cara

Bem completo :)

Jackson Dias · Outubro 13, 2009

É muito util!

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

Leandro Luiz · Outubro 23, 2009

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.

Jackson Dias · Outubro 23, 2009

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/

WellingtonSG · Outubro 24, 2009

Obrigado por disponibilizar os arquivos, só uma dúvida, como faço para habilitar a opção para upload de imagens?

Att;

WellingtonSG · Outubro 28, 2009

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

Matias Rezende · Outubro 28, 2009

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

Vertin · Dezembro 22, 2009

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

Rodrigo Resende · Dezembro 24, 2009

Show de bola Lung... quem quiser ainda tem como instalar o CKFinder para fazer upload http://forum.imasters.com.br/public/style_emoticons/default/natal_biggrin.gif

rockman 2 · Março 18, 2010

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!!!

rockman 2 · Março 20, 2010

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!

Jackson Dias · Março 30, 2010

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

zombie · Abril 14, 2010

show de bola, parebens!!!!!!!!

Arquivado

[Tutorial] CKEditor

Recommended Posts

Jackson Dias 68

Compartilhar este post

Link para o post

Compartilhar em outros sites

Patrique 0

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

GabrielFerrari 41

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

Leandro Luiz 0

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

WellingtonSG 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

WellingtonSG 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Matias Rezende 50

Compartilhar este post

Link para o post

Compartilhar em outros sites

Vertin 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Rodrigo Resende 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

rockman 2 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

rockman 2 0

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

zombie 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Javascript - Calcular Valores Monetário em Tempo Real

JavaScript - Exibir logo dentro da Tabela html

PHP+Codeigniter - Implementar o Input CÓDIGO ou ID do Produto

Fóruns

Tempo Real

Informação importante