Configurar CKeditor para uploads

Vertin · Dezembro 19, 2009

Galera, estou com um dúvida referente ao CKeditor 3.0

Eu usava o fckeditor, funcionava tudo certo com upload de imagens funcionando.

Mas como vi que o CKeditor é mais completo resolvi mudar pra ele.

Funçando nos arquivos consegui colocar ele pra aparecer na administração da seguinte maneira:

Criei um arquivo que busca os arquivos que ele precisa pra funcionar:

styleckeditor.php

<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
<script src="ckeditor/_samples/sample.js" type="text/javascript"></script>
<link href="ckeditor/_samples/sample.css" rel="stylesheet" type="text/css"/>

e inclui esse arquivo nas páginas que iria usar o editor:

pagina.php

<? include ("layout/styleckeditor.php"); ?>

e na textarea que precisava do editor coloquei o id do como editor1, que é a variável já definida:

pagina.php > textarea

<textarea class="ckeditor" cols="80" id="editor1" name="editor1" rows="10"><? echo "$texto"; ?></textarea>

Tudo bem, ele apareceu, funcionou o editor, mas eu preciso de inserir imagens com o texto,

e dessa maneira o botão inserir imagem do editor não fica com a aba de enviar imagem ao servidor.

Pesquisando no google e na documentação do CKeditor eu descobri que colocando o código abaixo depois

da textarea, ele habilita a aba de envio ao servidor:

pagina.php > textarea > script

<script type="text/javascript">
CKEDITOR.replace( 'editor1',
{
filebrowserBrowseUrl : '/browser/browse.php',
filebrowserUploadUrl : '/uploader/upload.php',
filebrowserWindowWidth : '640',
filebrowserWindowHeight : '480'
});
</script>

Com a aba de envio ativa, eu preciso definir uma pasta para as imagens que fizer o upload

mas minha dúvida é essa, não sei em que arquivo definir o diretório de upload das imagens,

quando tento fazer o upload ele diz que o diretório não existe.

Imagem Postada

"Not Found

The requested URL /uploader/upload.php was not found on this server.

Apache/2.2.4 (Win32) PHP/5.2.3 Server at localhost Port 80"

Alguém que tenha usado o CKeditor sabe onde defino?

Outra dúvida também é como eu coloco o código de configuração dentro do arquivo styleckeditor.php

para todas páginas buscar desse arquivo e não precisar alterar todas páginas.

Eu tinha visto uma página com o código de linkar uma configuração, mas agora não consigo encontrar.

Quem puder ajudar, obrigado desde já.

João Batista Neto · Dezembro 20, 2009

<script type="text/javascript">
CKEDITOR.replace( 'editor1',
{
filebrowserBrowseUrl : '/browser/browse.php',
filebrowserUploadUrl : '/uploader/upload.php',
filebrowserWindowWidth : '640',
filebrowserWindowHeight : '480'
});
</script>

Vertin,

os arquivos definidos nas propriedades filebrowserBrowseUrl e filebrowserUploadUrl devem existir no seu sistema de arquivos, veja:

CKEDITOR.replace( 'editor1' , {
	filebrowserBrowseUrl : ' filebrowser.php?action=browse',
	filebrowserUploadUrl : ' filebrowser.php?action=upload'
} );

E no seu arquivo filebrowser.php:

/**
* Essa é a pasta onde ficarão os arquivos que o usuário poderá ver e também onde será feito o upload
* @var string
*/
$folder = 'public/files';

/**
* Recuperamos a ação desejada pelo usuário
* @var string
*/
$action =& $_GET[ 'action' ];

switch ( $action ){
/**
 * Foi solicitado a exibição dos arquivos
 */
case 'browse':
	require 'views/browse.php';
	break;
case 'upload':
	if ( isset( $_FILES[ 'upload' ] ) ){
		$nome = preg_replace( '/[^\w\d\.]/' , '' , $_FILES[ 'upload' ][ 'name' ] );

		move_uploaded_file( $_FILES[ 'upload' ][ 'tmp_name' ] , sprintf( '%s/%s' , $folder , $nome ) );

		break;
	}
default:
	//Informamos ao usuário que a requisição é inválida
	header( sprintf( '%s 400 Bad Request' , $_SERVER[ 'SERVER_PROTOCOL' ] ) , true , 400 );
	readfile( 'views/errobadrequest.html' );
}

Você vai precisar também de um arquivo chamado browse.php:

<?php echo '<?xml version="1.0" encoding="UTF-8" ?>'; ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http-~~-//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http-~~-//www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Listagem de Arquivos</title>
	<script type="text/javascript" src="public/js/ckeditor/ckeditor.js"></script>
	<script type="text/javascript">
		function seleciona( arquivo ){
			window.opener.CKEDITOR.tools.callFunction( <?php echo $num =& $_GET[ 'CKEditorFuncNum' ]; ?> , arquivo );
			window.close();
		}
	</script>
	<link rel="stylesheet" type="text/css" href="public/css/browser.css" />
</head>
<body>
	<?php
	$files = array();

	foreach ( new DirectoryIterator( $folder ) as $finfo ){
		if ( $finfo->isFile() ){
			$pathname= $finfo->getPathname();
			$files[] = sprintf( '<a style="background:url(\'%s\') no-repeat;" href="#" onclick="seleciona(\'%s\');">%s</a>' , $pathname , $pathname , $finfo->getFileName() );
		}
	}

	if ( count( $files ) ){
		printf( '<ul class="fileBrowser"><li>%s</li></ul>' , implode( '</li><li>' , $files ) );
	} else echo '<h1>Nenhum arquivo encontrado.</h1>';
	?>
</body>
</html>

badrequest.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http-~~-//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http-~~-//www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Bad Request</title>
</head>
<body>
	<h1>400 Bad Request</h1>
	<p>Requisição inválida</p>
</body>
</html>

Veja que você precisará ter uma pasta public/files onde ficarão os arquivos, essa pasta precisa ter permissão de leitura e gravação.

Você precisará também de uma pasta chamada views com permissão de leitura onde ficarão os arquivos badrequest.html e browse.php.

Caso precise, posso disponibilizar um exemplo funcional para download.

Vertin · Janeiro 4, 2010

Eu fiquei em dúvida em quais pastas colocar os arquivos.

Como eu uso o include para usar o editor nos arquivos na

pasta acima da ckeditor, tive que mudar o caminho das pastas.

Minhas pastas estão assim:

Imagem Postada

Os arquivos que usam o editor estão na pasta adm

as imagens que forem upadas no site, queria que fossem para uma pasta

chamada imagens/paginas, dentro da pasta do site, onde está a pasta adm.

Imagem Postada

troquei o código pelo caminho completo:

<script type="text/javascript">
CKEDITOR.replace( 'editor1',
{
	filebrowserBrowseUrl : ' ckeditor/_samples/filebrowser.php?action=browse',
        filebrowserUploadUrl : ' ckeditor/_samples/filebrowser.php?action=upload'
});
</script>

é na pasta _samples que deve ficar o arquivo filebrowser.php?

ele deve ter as tags <? ?> no começo e no final do arquivo?

a pasta views e public também devem ficar na pasta _samples?

como coloco a permissão na pasta public/files? Agora ela será a pasta imagens/paginas

se puder postar o arquivo funcional para download para eu olhar também agradeço muito.

Obrigado pela ajuda;

Tem como postar o sistema com upload funcionando pra download pra eu dar uma olhada? Ainda não consegui fazer funcionar aqui. Obrigado!

eu consegui fazer o upload, mas o arquivo browse.css não veio no meu ckeditor, tem como postar o seu pra download?

Nick-pc · Janeiro 8, 2010

Aproveitando tópico, queria pedir ajuda sobre a integração do CKeditor v 3.0 em uma determinada página em PHP. Alguém pode desmostrar os passos de como faze-lo? Estou precisando muito.

Vertin · Janeiro 11, 2010

bom, vou tentar te ajudar.

baixe o CKeditor e coloque a pasta ckeditor na raiz do seu site.

na página onde irá inserir o editor coloque estes códigosdentro da tag <head>:

<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
<script src="ckeditor/_samples/sample.js" type="text/javascript"></script>
<link href="ckeditor/_samples/sample.css" rel="stylesheet" type="text/css"/>

no campo que deverá aparecer o editor, insira uma <textarea>

e apos o fechamento </textarea> insira o seguinte código:

CKEDITOR.replace( 'editor1' , {
        filebrowserBrowseUrl : ' filebrowser.php?action=browse',
        filebrowserUploadUrl : ' filebrowser.php?action=upload'
} );

automaticamente o editor irá aparecer, caso for salvar informações em um banco

de dados, basta guardar o valor 'editor1' em uma variável do tipo post, por exemplo:

$texto = $_POST['editor1'];

e fazer seu INSERT ou UPDATE normalmente, inserindo nesse caso a variável $texto.

espero ter ajudado, quando a upload de imagem ainda estou buscando na internet,

caso consiga uma solução postarei aqui.

helderwmarcos · Março 26, 2010

olá,

segui os passos acima para a configuração do editor deu tudo certo, só que na hora em q escolho a imagem para ser inserida no texto,

o caminho vem errrado.

O caminho mostrado é ... public/

o certo deveria ser ... editor/_samples/public/

já que segui toda a estrutura de diretórios mostrada.

Gostaria que alguém pudesse me ajudar, pois estou precisando muito desta funçao.

Agradeço desde já!

zombie · Abril 14, 2010

tambem estou com erro, aqui da certo envia normal pro servidor, e inseri normal no texto tambem, só que quando salvo, o caminho vem errado, como eu faria pra quando inserir a imagem tivece esse caminho src="../files/imagem.jpg" ???? tentei mudar de tudo aqui ja e nao to obtendo sucesso alguem pode me ajudar?

wanadark · Fevereiro 5, 2011

Para fazer a correção basta modificar o arquivo browser.php procure pela linha:

$pathname= $finfo->getPathname();

modifique para:

$pathname= 'ckeditor/_samples/'.$finfo->getPathname();

prontinho ira funcionar divinamente.

SimaoPedroS · Abril 19, 2011

Tambem estou com um problema do caminho da imagem.

O caminho da imagem certo é "public/files/leao.png"

Mas esta faltando uma "barra", o caminho da imagem esta vindo assim "public/filesleao.png"

douglasfaria · Maio 12, 2011

Olá...estou com o mesmo problema do SimaoPedroS

O caminho da imagem certo é "public/files/leao.png"
Mas esta faltando uma "barra", o caminho da imagem esta vindo assim "public/filesleao.png"

Alguém poderia nos ajudar...obrigado!

rohde · Maio 12, 2011

Opa, poderia postar um exemplo funcional ou enviar por email?

<script type="text/javascript">
CKEDITOR.replace( 'editor1',
{
filebrowserBrowseUrl : '/browser/browse.php',
filebrowserUploadUrl : '/uploader/upload.php',
filebrowserWindowWidth : '640',
filebrowserWindowHeight : '480'
});
</script>

Vertin,

os arquivos definidos nas propriedades filebrowserBrowseUrl e filebrowserUploadUrl devem existir no seu sistema de arquivos, veja:

CKEDITOR.replace( 'editor1' , {
filebrowserBrowseUrl : ' filebrowser.php?action=browse',
filebrowserUploadUrl : ' filebrowser.php?action=upload'
} );

E no seu arquivo filebrowser.php:

/**
* Essa é a pasta onde ficarão os arquivos que o usuário poderá ver e também onde será feito o upload
* @var string
*/
$folder = 'public/files';

/**
* Recuperamos a ação desejada pelo usuário
* @var string
*/
$action =& $_GET[ 'action' ];

switch ( $action ){
/**
    * Foi solicitado a exibição dos arquivos
    */
case 'browse':
	require 'views/browse.php';
	break;
case 'upload':
	if ( isset( $_FILES[ 'upload' ] ) ){
		$nome = preg_replace( '/[^\w\d\.]/' , '' , $_FILES[ 'upload' ][ 'name' ] );

		move_uploaded_file( $_FILES[ 'upload' ][ 'tmp_name' ] , sprintf( '%s/%s' , $folder , $nome ) );

		break;
	}
default:
	//Informamos ao usuário que a requisição é inválida
	header( sprintf( '%s 400 Bad Request' , $_SERVER[ 'SERVER_PROTOCOL' ] ) , true , 400 );
	readfile( 'views/errobadrequest.html' );
}

Você vai precisar também de um arquivo chamado browse.php:

<?php echo '<?xml version="1.0" encoding="UTF-8" ?>'; ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Listagem de Arquivos</title>
	<script type="text/javascript" src="public/js/ckeditor/ckeditor.js"></script>
	<script type="text/javascript">
		function seleciona( arquivo ){
			window.opener.CKEDITOR.tools.callFunction( <?php echo $num =& $_GET[ 'CKEditorFuncNum' ]; ?> , arquivo );
			window.close();
		}
	</script>
	<link rel="stylesheet" type="text/css" href="public/css/browser.css" />
</head>
<body>
	<?php
	$files = array();

	foreach ( new DirectoryIterator( $folder ) as $finfo ){
		if ( $finfo->isFile() ){
			$pathname= $finfo->getPathname();
			$files[] = sprintf( '<a style="background:url(\'%s\') no-repeat;" href="#" onclick="seleciona(\'%s\');">%s</a>' , $pathname , $pathname , $finfo->getFileName() );
		}
	}

	if ( count( $files ) ){
		printf( '<ul class="fileBrowser"><li>%s</li></ul>' , implode( '</li><li>' , $files ) );
	} else echo '<h1>Nenhum arquivo encontrado.</h1>';
	?>
</body>
</html>

badrequest.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Bad Request</title>
</head>
<body>
	<h1>400 Bad Request</h1>
	<p>Requisição inválida</p>
</body>
</html>

Veja que você precisará ter uma pasta public/files onde ficarão os arquivos, essa pasta precisa ter permissão de leitura e gravação.

Você precisará também de uma pasta chamada views com permissão de leitura onde ficarão os arquivos badrequest.html e browse.php.

Caso precise, posso disponibilizar um exemplo funcional para download.

tomzex · Maio 26, 2012

Bom dia amigos. qual o caminho do arquivo filebrowser.php.

Não estou encontrando a solucao.

Obrigado.

Carol Cruz · Junho 26, 2012

Vertin,

os arquivos definidos nas propriedades filebrowserBrowseUrl e filebrowserUploadUrl devem existir no seu sistema de arquivos, veja:

CKEDITOR.replace( 'editor1' , {
filebrowserBrowseUrl : ' filebrowser.php?action=browse',
filebrowserUploadUrl : ' filebrowser.php?action=upload'
} );

E no seu arquivo filebrowser.php:

/**
* Essa é a pasta onde ficarão os arquivos que o usuário poderá ver e também onde será feito o upload
* @var string
*/
$folder = 'public/files';

/**
* Recuperamos a ação desejada pelo usuário
* @var string
*/
$action =& $_GET[ 'action' ];

switch ( $action ){
/**
 * Foi solicitado a exibição dos arquivos
 */
case 'browse':
	require 'views/browse.php';
	break;
case 'upload':
	if ( isset( $_FILES[ 'upload' ] ) ){
		$nome = preg_replace( '/[^\w\d\.]/' , '' , $_FILES[ 'upload' ][ 'name' ] );

		move_uploaded_file( $_FILES[ 'upload' ][ 'tmp_name' ] , sprintf( '%s/%s' , $folder , $nome ) );

		break;
	}
default:
	//Informamos ao usuário que a requisição é inválida
	header( sprintf( '%s 400 Bad Request' , $_SERVER[ 'SERVER_PROTOCOL' ] ) , true , 400 );
	readfile( 'views/errobadrequest.html' );
}

Você vai precisar também de um arquivo chamado browse.php:

<?php echo '<?xml version="1.0" encoding="UTF-8" ?>'; ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Listagem de Arquivos</title>
	<script type="text/javascript" src="public/js/ckeditor/ckeditor.js"></script>
	<script type="text/javascript">
		function seleciona( arquivo ){
			window.opener.CKEDITOR.tools.callFunction( <?php echo $num =& $_GET[ 'CKEditorFuncNum' ]; ?> , arquivo );
			window.close();
		}
	</script>
	<link rel="stylesheet" type="text/css" href="public/css/browser.css" />
</head>
<body>
	<?php
	$files = array();

	foreach ( new DirectoryIterator( $folder ) as $finfo ){
		if ( $finfo->isFile() ){
			$pathname= $finfo->getPathname();
			$files[] = sprintf( '<a style="background:url(\'%s\') no-repeat;" href="#" onclick="seleciona(\'%s\');">%s</a>' , $pathname , $pathname , $finfo->getFileName() );
		}
	}

	if ( count( $files ) ){
		printf( '<ul class="fileBrowser"><li>%s</li></ul>' , implode( '</li><li>' , $files ) );
	} else echo '<h1>Nenhum arquivo encontrado.</h1>';
	?>
</body>
</html>

badrequest.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Bad Request</title>
</head>
<body>
	<h1>400 Bad Request</h1>
	<p>Requisição inválida</p>
</body>
</html>

Veja que você precisará ter uma pasta public/files onde ficarão os arquivos, essa pasta precisa ter permissão de leitura e gravação.

Você precisará também de uma pasta chamada views com permissão de leitura onde ficarão os arquivos badrequest.html e browse.php.

Caso precise, posso disponibilizar um exemplo funcional para download.

Oi gente,

também estou com problemas no ckeditr para configuração de uploads.

Meu problema é o seguinte: a URL de retorno está com problema.

Explico-me:

Eu consigo fazer upload dos itens com sucesso. Coloquei um comando "echo" no browse.php (abaixo) pra ter certeza que a imagem está ok.
```
echo "<img src=\"".$pathname."\">";
```
Quando eu clico em "Localizar no Servidor" em "Informações da imagem", consigo ver a img, já que coloquei o cmd "echo". Consigo localizar a img no servidor
Na hora que clico no link da imagem, o retorno de URL está errado! Vejam:
public/filesBemCasadosTirinha0249.png
Está faltando uma barra separando "public/files" de "BemCasadosTirinha0249.png"

Meus caminhos de hierarquia de pastas nos arquivos estão ok, senão eu não conseguiria visualizar a imagem no servidor.

Me ajudem??? :upset:

Meus códigos são:

browse/browse.php

<?php echo '<?xml version="1.0" encoding="UTF-8" ?>'; ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
       <head>
               <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
               <title>Listagem de Arquivos</title>
               <script type="text/javascript" src="../../../ckeditor.js"></script>
               <script type="text/javascript" src="public/js/ckeditor/ckeditor.js"></script>
               <script type="text/javascript">
                       function seleciona( arquivo ){
                               window.opener.CKEDITOR.tools.callFunction( <?php echo $num =& $_GET[ 'CKEditorFuncNum' ]; ?> , arquivo );
                               window.close();
                       }
               </script>
               <link rel="stylesheet" type="text/css" href="public/css/browser.css" />
       </head>
       <body>
               <?php
               $files = array();

               foreach ( new DirectoryIterator( $folder ) as $finfo ){
                       if ( $finfo->isFile() ){
							$server = '';
                               $pathname= $server.$finfo->getPathname();
                               $files[] = sprintf( '<a style="background:url(\'%s\') no-repeat;" href="#" onclick="seleciona(\'%s\');">%s</a>' , $pathname , $pathname , $finfo->getFileName() );


                       }
               }

               if ( count( $files ) ){
                       printf( '<ul class="fileBrowser"><li>%s</li></ul>' , implode( '</li><li>' , $files ) );

               } else echo '<h1>Nenhum arquivo encontrado.</h1>';

			echo "<img src=\"".$pathname."\">";
               ?>
       </body>
</html>

filebrowser.php

<?
/**
* Essa é a pasta onde ficarão os arquivos que o usuário poderá ver e também onde será feito o upload
* @var string
*/
$folder = 'public/files/';

/**
* Recuperamos a ação desejada pelo usuário
* @var string
*/
$action =& $_GET[ 'action' ];

switch ( $action ){
       /**
        * Foi solicitado a exibição dos arquivos
        */
       case 'browse':
               require 'browser/browse.php';
               break;
       case 'upload':
               if ( isset( $_FILES[ 'upload' ] ) ){
                       $nome = preg_replace( '/[^\w\d\.]/' , '' , $_FILES[ 'upload' ][ 'name' ] );


                       move_uploaded_file( $_FILES[ 'upload' ][ 'tmp_name' ] , sprintf( '%s/%s' , $folder , $nome ) );

					echo"Enviado com sucesso!";
                       break;
               }
       default:
               //Informamos ao usuário que a requisição é inválida
               header( sprintf( '%s 400 Bad Request' , $_SERVER[ 'SERVER_PROTOCOL' ] ) , true , 400 );
               readfile( 'views/errobadrequest.html' );
}

?>

../teste.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
Copyright (c) 2003-2012, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>UI Color Picker — CKEditor Sample</title>
<meta content="text/html; charset=utf-8" http-equiv="content-type" />
<script type="text/javascript" src="../ckeditor.js"></script>
<script src="sample.js" type="text/javascript"></script>
<link href="sample.css" rel="stylesheet" type="text/css" />

</head>
<body>

<p> </p>
<form action="sample_posteddata.php" method="post">
<p>
	<textarea cols="80" id="editor1" name="editor1" rows="10"><p>This is some <strong>sample text</strong>. You are using <a href="http://ckeditor.com/">CKEditor</a>.</p></textarea>
	<script type="text/javascript">
	//<![CDATA[

		// Replace the <textarea id="editor"> with an CKEditor
		// instance, using default configurations.


		CKEDITOR.replace( 'editor1',
   {
       //filebrowserBrowseUrl : 'browser/browse.php',
       //filebrowserImageBrowseUrl : 'browser/browse.php?type=Images',
       //filebrowserUploadUrl : 'uploader/upload.php',
       //filebrowserImageUploadUrl : 'uploader/upload.php?type=Images',

	 filebrowserBrowseUrl : ' php/filebrowser.php?action=browse',
       filebrowserUploadUrl : ' php/filebrowser.php?action=upload',
	toolbar :
				[
					[ 'Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink', 'Image' ],

				]
   });


	//]]>
	</script>
</p>

</p>
<p>
	<input type="submit" value="Submit" />
</p>
</form>

</body>
</html>

Rafael Antonio da Silva · Julho 5, 2012

Oi gente,

também estou com problemas no ckeditr para configuração de uploads.

Meu problema é o seguinte: a URL de retorno está com problema.

Explico-me:

Eu consigo fazer upload dos itens com sucesso. Coloquei um comando "echo" no browse.php (abaixo) pra ter certeza que a imagem está ok.
```
echo "<img src=\"".$pathname."\">";
```
Quando eu clico em "Localizar no Servidor" em "Informações da imagem", consigo ver a img, já que coloquei o cmd "echo". Consigo localizar a img no servidor
Na hora que clico no link da imagem, o retorno de URL está errado! Vejam:
public/filesBemCasadosTirinha0249.png
Está faltando uma barra separando "public/files" de "BemCasadosTirinha0249.png"

Meus caminhos de hierarquia de pastas nos arquivos estão ok, senão eu não conseguiria visualizar a imagem no servidor.

Me ajudem??? :upset:

Meus códigos são:

browse/browse.php

<?php echo '<?xml version="1.0" encoding="UTF-8" ?>'; ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
       <head>
               <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
               <title>Listagem de Arquivos</title>
               <script type="text/javascript" src="../../../ckeditor.js"></script>
               <script type="text/javascript" src="public/js/ckeditor/ckeditor.js"></script>
               <script type="text/javascript">
                       function seleciona( arquivo ){
                               window.opener.CKEDITOR.tools.callFunction( <?php echo $num =& $_GET[ 'CKEditorFuncNum' ]; ?> , arquivo );
                               window.close();
                       }
               </script>
               <link rel="stylesheet" type="text/css" href="public/css/browser.css" />
       </head>
       <body>
               <?php
               $files = array();

               foreach ( new DirectoryIterator( $folder ) as $finfo ){
                       if ( $finfo->isFile() ){
							$server = '';
                               $pathname= $server.$finfo->getPathname();
                               $files[] = sprintf( '<a style="background:url(\'%s\') no-repeat;" href="#" onclick="seleciona(\'%s\');">%s</a>' , $pathname , $pathname , $finfo->getFileName() );


                       }
               }

               if ( count( $files ) ){
                       printf( '<ul class="fileBrowser"><li>%s</li></ul>' , implode( '</li><li>' , $files ) );

               } else echo '<h1>Nenhum arquivo encontrado.</h1>';

			echo "<img src=\"".$pathname."\">";
               ?>
       </body>
</html>

filebrowser.php

<?
/**
* Essa é a pasta onde ficarão os arquivos que o usuário poderá ver e também onde será feito o upload
* @var string
*/
$folder = 'public/files/';

/**
* Recuperamos a ação desejada pelo usuário
* @var string
*/
$action =& $_GET[ 'action' ];

switch ( $action ){
       /**
        * Foi solicitado a exibição dos arquivos
        */
       case 'browse':
               require 'browser/browse.php';
               break;
       case 'upload':
               if ( isset( $_FILES[ 'upload' ] ) ){
                       $nome = preg_replace( '/[^\w\d\.]/' , '' , $_FILES[ 'upload' ][ 'name' ] );


                       move_uploaded_file( $_FILES[ 'upload' ][ 'tmp_name' ] , sprintf( '%s/%s' , $folder , $nome ) );

					echo"Enviado com sucesso!";
                       break;
               }
       default:
               //Informamos ao usuário que a requisição é inválida
               header( sprintf( '%s 400 Bad Request' , $_SERVER[ 'SERVER_PROTOCOL' ] ) , true , 400 );
               readfile( 'views/errobadrequest.html' );
}

?>

../teste.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
Copyright (c) 2003-2012, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>UI Color Picker — CKEditor Sample</title>
<meta content="text/html; charset=utf-8" http-equiv="content-type" />
<script type="text/javascript" src="../ckeditor.js"></script>
<script src="sample.js" type="text/javascript"></script>
<link href="sample.css" rel="stylesheet" type="text/css" />

</head>
<body>

<p> </p>
<form action="sample_posteddata.php" method="post">
<p>
	<textarea cols="80" id="editor1" name="editor1" rows="10"><p>This is some <strong>sample text</strong>. You are using <a href="http://ckeditor.com/">CKEditor</a>.</p></textarea>
	<script type="text/javascript">
	//<![CDATA[

		// Replace the <textarea id="editor"> with an CKEditor
		// instance, using default configurations.


		CKEDITOR.replace( 'editor1',
   {
       //filebrowserBrowseUrl : 'browser/browse.php',
       //filebrowserImageBrowseUrl : 'browser/browse.php?type=Images',
       //filebrowserUploadUrl : 'uploader/upload.php',
       //filebrowserImageUploadUrl : 'uploader/upload.php?type=Images',

	 filebrowserBrowseUrl : ' php/filebrowser.php?action=browse',
       filebrowserUploadUrl : ' php/filebrowser.php?action=upload',
	toolbar :
				[
					[ 'Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink', 'Image' ],

				]
   });


	//]]>
	</script>
</p>

</p>
<p>
	<input type="submit" value="Submit" />
</p>
</form>

</body>
</html>

ALGUEM PODERIA PASSAR O EDITOR PARA DOWNLOAD não estou conseguindo configuralo para faser upload das imagens nao intendii as ajudas too perdidao se alguem puder me ajudar agradeço

Rafael Antonio da Silva · Julho 11, 2012

ALGUEM PODERIA PASSAR O EDITOR para DOWNLOAD não estou conseguindo configuralo para faser upload das imagens nao intendii as ajudas too perdidao se alguem puder me ajudar agradeç

Uerlen Santos · Julho 29, 2012

Carol

Com relação a esta barra que esta faltando... consegui adicionando uma barra no final de caminho

ficando assim: public/files//

Encontrei outros problemas... se resolver posto aki tbm!!!

Breno Douglas · Março 19, 2013

Oi gente,

também estou com problemas no ckeditr para configuração de uploads.

Meu problema é o seguinte: a URL de retorno está com problema.

Explico-me:

Eu consigo fazer upload dos itens com sucesso. Coloquei um comando "echo" no browse.php (abaixo) pra ter certeza que a imagem está ok.
```
echo "<img src=\"".$pathname."\">";
```
Quando eu clico em "Localizar no Servidor" em "Informações da imagem", consigo ver a img, já que coloquei o cmd "echo". Consigo localizar a img no servidor
Na hora que clico no link da imagem, o retorno de URL está errado! Vejam:
public/filesBemCasadosTirinha0249.png

Está faltando uma barra separando "public/files" de "BemCasadosTirinha0249.png"

Meus caminhos de hierarquia de pastas nos arquivos estão ok, senão eu não conseguiria visualizar a imagem no servidor.

Me ajudem??? :upset:

Meus códigos são:

browse/browse.php

<?php echo '<?xml version="1.0" encoding="UTF-8" ?>'; ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
        <head>
                <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
                <title>Listagem de Arquivos</title>
                <script type="text/javascript" src="../../../ckeditor.js"></script>
                <script type="text/javascript" src="public/js/ckeditor/ckeditor.js"></script>
                <script type="text/javascript">
                        function seleciona( arquivo ){
                                window.opener.CKEDITOR.tools.callFunction( <?php echo $num =& $_GET[ 'CKEditorFuncNum' ]; ?> , arquivo );
                                window.close();
                        }
                </script>
                <link rel="stylesheet" type="text/css" href="public/css/browser.css" />
        </head>
        <body>
                <?php
                $files = array();

                foreach ( new DirectoryIterator( $folder ) as $finfo ){
                        if ( $finfo->isFile() ){
								$server = '';
                                $pathname= $server.$finfo->getPathname();
                                $files[] = sprintf( '<a style="background:url(\'%s\') no-repeat;" href="#" onclick="seleciona(\'%s\');">%s</a>' , $pathname , $pathname , $finfo->getFileName() );
								
								
                        }
                }

                if ( count( $files ) ){
                        printf( '<ul class="fileBrowser"><li>%s</li></ul>' , implode( '</li><li>' , $files ) );
						
                } else echo '<h1>Nenhum arquivo encontrado.</h1>';
				
				echo "<img src=\"".$pathname."\">";
                ?>
        </body>
</html>

filebrowser.php

<?
/**
 * Essa é a pasta onde ficarão os arquivos que o usuário poderá ver e também onde será feito o upload
 * @var string
 */
$folder = 'public/files/';

/**
 * Recuperamos a ação desejada pelo usuário
 * @var string
 */
$action =& $_GET[ 'action' ];

switch ( $action ){
        /**
         * Foi solicitado a exibição dos arquivos
         */
        case 'browse':
                require 'browser/browse.php';
                break;
        case 'upload':
                if ( isset( $_FILES[ 'upload' ] ) ){
                        $nome = preg_replace( '/[^\w\d\.]/' , '' , $_FILES[ 'upload' ][ 'name' ] );
						

                        move_uploaded_file( $_FILES[ 'upload' ][ 'tmp_name' ] , sprintf( '%s/%s' , $folder , $nome ) );

						echo"Enviado com sucesso!";
                        break;
                }
        default:
                //Informamos ao usuário que a requisição é inválida
                header( sprintf( '%s 400 Bad Request' , $_SERVER[ 'SERVER_PROTOCOL' ] ) , true , 400 );
                readfile( 'views/errobadrequest.html' );
}

?>

../teste.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
Copyright (c) 2003-2012, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license'>http://ckeditor.com/license
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>UI Color Picker — CKEditor Sample</title>
	<meta content="text/html; charset=utf-8" http-equiv="content-type" />
	<script type="text/javascript" src="../ckeditor.js"></script>
	<script src="sample.js" type="text/javascript"></script>
	<link href="sample.css" rel="stylesheet" type="text/css" />

</head>
<body>
	
	<p> </p>
	<form action="sample_posteddata.php" method="post">
	<p>
		<textarea cols="80" id="editor1" name="editor1" rows="10"><p>This is some <strong>sample text</strong>. You are using <a href="http://ckeditor.com/">CKEditor</a>.</p></textarea>
		<script type="text/javascript">
		//<![CDATA[

			// Replace the <textarea id="editor"> with an CKEditor
			// instance, using default configurations.
			
			
			CKEDITOR.replace( 'editor1',
    {
        //filebrowserBrowseUrl : 'browser/browse.php',
        //filebrowserImageBrowseUrl : 'browser/browse.php?type=Images',
        //filebrowserUploadUrl : 'uploader/upload.php',
        //filebrowserImageUploadUrl : 'uploader/upload.php?type=Images',
		
		 filebrowserBrowseUrl : ' php/filebrowser.php?action=browse',
        filebrowserUploadUrl : ' php/filebrowser.php?action=upload',
		toolbar :
					[
						[ 'Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink', 'Image' ],
						
					]
    });
			

		//]]>
		</script>
	</p>
	
	</p>
	<p>
		<input type="submit" value="Submit" />
	</p>
	</form>
	
</body>
</html>

Seu único erro é a falta de um str_replace..aqui:

<?php

$files = array();

foreach ( new DirectoryIterator( $folder ) as $finfo ){

if ( $finfo->isFile() ){

$pathname= $finfo->getPathname();

//trocar as barras aqui

$pathname = str_replace('\\', '/', $pathname);

$files[] = sprintf( '<a style="background:url(\'%s\') no-repeat;" href="#" onclick="seleciona(\'%s\');"><img src="%s" width="100px" height="120px"></a>' , $pathname , $pathname , $pathname );

}

Simples assim e irá tudo funcionar normalmente igual está funcionando aqui.

simples assim..

Arquivado

Configurar CKeditor para uploads

Recommended Posts

Vertin 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

Vertin 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Nick-pc 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Vertin 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

helderwmarcos 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

zombie 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

wanadark 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

SimaoPedroS 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

douglasfaria 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

rohde 3

Compartilhar este post

Link para o post

Compartilhar em outros sites

tomzex 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Carol Cruz 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Rafael Antonio da Silva 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Rafael Antonio da Silva 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Uerlen Santos 15

Compartilhar este post

Link para o post

Compartilhar em outros sites

Breno Douglas 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