Na minha "carreira" de desenvolvedor já testei 3 editores WYSWYG (What You See, What You Get) baseados em JavaScript. O primeiro foi o NicEdit, extremamente leve, mas os clientes reclamavam da falta de recursos. Mudei para o TinyMCE. Novamente encontraram problemas, desta vez foi com as imagens. Segundo eles. era muito complicado inserir uma imagem. Finalmente mudei para o CKEditor. Pesado, trocentos arquivos, mas com a tão sonhada funcionalidade de upload de imagens, quando integrado com o CKFinder. O CKFinder permite que você faça upload de imagens e outros arquivos, inserindo-os no CKEditor. Também fornece uma página, onde é possível navegar entre os arquivos escolhidos e alterar várias opções.
O objetivo deste post é ensinar como integrar o CKEditor com o CKFinder.
Baixe o CKEditor e extraia em alguma pasta.
Baixe o CKFinder e extraia dentro da pasta que você extraiu o CKEditor. Eu estou usando a versão para PHP
Agora, vá até a pasta do CKFinder e edite o arquivo "config.php". A primeira função do arquivo, CheckAuthentication(), deve retornar true para que você possa acessar o painel do CKFinder. Porém, se ela sempre retornar true, qualquer um poderá acessar e modificar suas imagens. A solução, no meu caso, foi usar a própria sessão do usuário para autenticar no CKFinder. Mais ou menos assim:
function CheckAuthentication() {
if (!empty($_SESSION['usuario']))
return true;
return false;
}
Para anexar o CKFinder com o CKEditor temos duas opções: no próprio arquivo (HTML, PHP) que vai conter o editor ou no arquivo de configuração do CKEditor, config.js.
No caso de configurar no próprio código:
CKEDITOR.replace( 'editor',{
filebrowserBrowseUrl : 'ckeditor/ckfinder/ckfinder.html',
filebrowserImageBrowseUrl : 'ckeditor/ckfinder/ckfinder.html?type=Images',
filebrowserFlashBrowseUrl : 'ckeditor/ckfinder/ckfinder.html?type=Flash',
filebrowserUploadUrl : 'ckeditor/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files',
filebrowserImageUploadUrl : 'ckeditor/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images',
filebrowserFlashUploadUrl : 'ckeditor/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Flash'
}
;);
Usando o config.js da pasta do CKEditor:
CKEDITOR.editorConfig = function( config ){
config.filebrowserBrowseUrl = 'ckeditor/ckfinder/ckfinder.html',
config.filebrowserImageBrowseUrl = 'ckeditor/ckfinder/ckfinder.html?type=Images',
config.filebrowserFlashBrowseUrl = 'ckeditor/ckfinder/ckfinder.html?type=Flash',
config.filebrowserUploadUrl = 'ckeditor/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files',
config.filebrowserImageUploadUrl = 'ckeditor/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images',
config.filebrowserFlashUploadUrl = 'ckeditor/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Flash'
};
O sistema está pronto. Na configuração padrão, o CKFinder armazena as imagens do upload na raíz do servidor, pasta ckfinder/userfiles/. Essa pasta deve ter permissão 777 para que funcione corretamente. Esse caminho pode ser mudado no arquivo "config.php" da pasta do CKFinder.
Após a instalação, o CKFinder fica disponível no botão "Figura" do CKEditor. Clicando nesse botão e indo até a aba "Submeter", você poderá realizar o upload das suas imagens. Clicando em "Localizar no servidor", você poderá usar as imagens já upadas.
Abraço e até a próxima!
Bom post, só sabia do Nicedit, q aliás uso nos comentários do meu site, e não conhecia esses outros.
AT+
bom tuto, mais está dando este exibindo esta mensagem quando clico em localizar no servidor
"A navegação de arquivos está desativada por razões de segurança. Contacte o administrador do sistema."
poderia mim ajudar.
obrigado
@Hugo
Cara, verifica o arquivo "[b]config.php[/b]"e procura essa função:
function CheckAuthentication() {
return false;
}
Ela tem que retornar true para poder acessar o CKFinder.
Putz maxo, eu nao tinha visto o false la em baixo
kkk vlws velho, fazia bem um mes que eu estava tentado fazer isso e nao tinha visto o codigo muito obrigado velho.
Velho outra duvida por favor, estou colocando o caminho no config correto, mais diz pasta nao encontrada, ja tentei de varias maneiras e nada.
Poderia mim ajudar se for possivel.
Obrigado desde já
Ae Jonnas...
Brigadão pela ajuda, já consegui aqui.
Cara, tentei fazer colocando o código lá no config.js do ckeditor, mas não deu muito certo =/ Quando clico em enviar pro servidor, aparece um alert com isso: "Image source URL is missing". Ahh, na função lá deixei retornando true! E aí????
Olá maravilhoso seu post estava procurando algo assim a um tempo.
Bom esta tudo funcionado perfeitamente depois de sua orientação, mais como eu tiro a mensagem de DEMO(This is the demo version of CKFinder. Click here to visit our web site.) sem ter que comprar.
Tem como???
@Bruno
Não recomendo fazer isso, mas dá sim. A mensagem está codificada nos arquivos da pasta ckfinder/core/js/. A mensagem está na linha 43, variável "qo"
Boa tarde, estou tentando integrar o ckfinder mas sempre que clico no botão para abrir o html do ckfinder é gerada a mensagem "XML request error: OK (200)
Do you want to see more info?". Preciso ter mais alguma coisa configurada? Obrigado
@André
Acredito que algum caminho da sua configuração esteja trocado.
Obrigado pelo retorno Jonnas. O único caminho que eu alterei no config.php foi o $baseUrl = 'D:/Projetos/portal/workspace_portal/Site/web/ckeditor/ckfinder/userfiles';
Preciso ter algum componente PHP instalado?
Caraca tu salvou minha vida, ficou show o editor to usando ele. como tu disse é um pouco pesado mas fica da hora vlw aí pelo tuto
@André
Que eu saiba, precisa ter o GD instalado (pelo menos pra gerar as miniaturas). Tenta algumas variações no baseUrl, o problema também pode ser ai
Jonnas, muito obrigado pela atenção. Desculpe a demora mas tive que fazer outros ajustes na minha aplicação. Meu código ficou o seguinte:
CKEDITOR.replace( 'TXT_DESCRICAO',
{
extraPlugins : 'youtube',
language : 'pt-br',
resize_enabled : false,
uiColor : '#EFEFDE',
width: '80%',
height: '150px',
filebrowserBrowseUrl : '../ckeditor/ckfinder/ckfinder.html',
filebrowserImageBrowseUrl : '../ckeditor/ckfinder/ckfinder.html?type=Images',
filebrowserFlashBrowseUrl : '../ckeditor/ckfinder/ckfinder.html?type=Flash',
filebrowserUploadUrl : '../ckeditor/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files',
filebrowserImageUploadUrl : '../ckeditor/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images',
filebrowserFlashUploadUrl : '../ckeditor/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Flash',
filebrowserImageWindowWidth : '640',
filebrowserImageWindowHeight : '480',
toolbar :
[
[ 'YouTube','Source','Font','Preview','Flash','Bold','Italic','NumberedList','BulletedList','Link', 'Unlink']
]
});
$baseUrl = 'D:/Projetos/portal/workspace_portal/Site/web/ckeditor/ckfinder/userfiles/';
Jonnas, esqueci de comentar que estou utilizando o ckeditor + ckfinder em uma página jsp. O ckeditor está funcionando 100% mas o ckfinder não consegue apresentar o conteúdo das pastas.
Obrigado
Bom, aproveitando a deixa que o Bruno fez, alguém aí sabe como funciona o sistema de licensas? por exemplo, trabalho com desenvolvimento de sites e será então que eu deveria comprar uma licensa para cada cliente meu? ou eu compro o direito de usar e quantos forem..... se permanecer o demo no site, isso para algum dia, ou a única restrição é que meu cliente vai ficar vendo que o sistema é Demo? abração até+
@Edgar
É possível adquirir o CKFinder de 3 formas: licença de 59 dólares para usar num único site, 590 dólares para usar em todos os sites que você desenvolver e a licença OEM, de 1390 dólares que permite que o CKFinder seja distribuído como uma parte do seu software. Quanto ao demo, a única restrição é a mensagem. Abraço!
Muito bom, Obrigado. Virei frequentador do blog... Abração.
Muito obrigada!!!!!
Ajudou a tirar todas as minhas dúvidas.
parabens cara
Que Deus continue mandando pessoas como vc para os programadores
perdi 3 horas nisso, li com atenção e mesmo assim cometi uns erros qeu consegui acertar
grande abraço
cara simplismente deveriam existir mais profissionais como vc, o pessoal posta cada coisa complicada para um simple exemplo, eu gastei nada mais de 10 min pra integrar o finder no meu editor gracas a sua ajuda muito obrigado!!!
Cara seguinte ta funcionando otimo no firefox, forem to com um erro no IE igualzinho a um citado la em cima (estou tentando integrar o ckfinder mas sempre que clico no botão para abrir o html do ckfinder é gerada a mensagem "XML request error: OK (200) Do you want to see more info?")
ALGUEM SABE O QUE É ISSO??
E aee xará, parabéns cara. Muito boa sua explicação, tiro todas as minhas dúvidas. Só estou com um problema aqui, quando abro aqui aparece a mensagem "Pasta não encontrada. Atualize e tente novamente." Você saberia me dizer porque acontece isso ?
Valeu cara, parabens
@Edson Junior
Cara, se funcionar no Firefox pode ser um bug do IE. Tente baixar as últimas versões do CKFinder e do CKEditor.
@Jonas
Verifica as permissões da pasta raíz do site e veja também se você não exclui a pasta para onde os arquivos estão sendo enviados e também as suas permissões. O caminho da pasta está em "config.php" na pasta do CKFinder
@Mario
Valeu cara, estamos ai pra isso :)
Jonnas estou usando o caminho que esta no config $baseUrl = 'ckfinder/userfiles/';. Tenho que mudar algo nele ou posso deixar esse msmo ? Eu criei as pastas images, flash e files dentro dessa userfiles e deu permissao em todas. Porém ainda estou com o erro =/. Você pode me dar uma mão nessa parte ?
Obrigadao
Abs
muito bom! já estou utilizando!
E aee Jonnas blza ? Cara consegui aqui. Vou deixar aqui a minha solução para aqueles que estiverem com o mesmo problema. Bem havia dois problemas. 1 - Permissao das pastas no servidor e 2 - Eu puis rota completa pra funcionar. Por exemplo, no $basedir = /home/diretorio/meusite/ckeditor/ckfinder/userfiles/ e no $baseUrl = http://www.meusite.com.br/ckeditor/ckfinder/userfiles/. Espero que ajude algm.
Valeu d++ galera
@Jonas
Xará, muito obrigado por compartilhar a solução do problema. Grande abraço!
Muito boas as dicas.
Tudo rodando perfeitamente.
Obrigado pelo Post.
Estava utilizando o SPAW Editor, mas este tem sido mais fácil de utilizar pelos meus clientes.
Olá. Ótimo artigo.
Gostaia que me tirasse uma dúvida. Porque a pasta em que CKFinder faz o upload não aparece no Windows Explorer, como configurar para ela aparecer.
Obrigado!
E se eu quiser resgatar o username do usuario logado para que cada usuario salve em sua pasta? Como faço? O global $USER nao me atende
Grande Jonnas! Hoje fiz uma migração do FCKEditor para o CKEditor+CKFinder, e o seu post foi providencial para que eu configurasse e fizesse os últimos se integrarem e funcionarem. Pena que a coisa aqui ainda rode em ASP...
@goncin
Valeu parceiro...ASP é uma tristeza. A única experiência que tenho são pequenos ajustes em lojas virtuais da empresa, mas dá uma dor de cabeça danada...
Ótimo artigo, salvou a pátria... ;)
Cara, este CKEditor é Demo, sabe me dizer qual a limitação dele??
@Rodrigo
Na verdade, o CKFinder é que é demo. Pelo que eu sei, a única limitação é uma mensagem que aparece nele. O CKEditor é livre.
No versão 2.0 do CKFinder consegui reduzir a msg de demo com fundo azul para "This is the CKFinder" editando o arquivo ckfinder.js
Procure por 'hA:null,pq:0}),E=' (sem aspas) e troque os valores das variáveis conforme abaixo.
E="\x65\x20\074\x61\040\150\x72\x65\x66\075\047\x68\x74\x74\x70\x3a\x2f\057\143\153\x66\151\x6e\x64\145\162\056\x63\x6f\155\x27\x20\x74\x61\x72\147\145\x74\x3d\047\137\142\154\x61\x6e\x6b\047\076\x43\x4b\106\x69\156\144\145\162\040\x77\074\x2f\x61\076\040\x2e"
F="\x54\x68\x69\163\040\151\x73\x20\x74\x68"
No final do arquivo tem uma variável chamada 'o' procure por 'function(){var o=' (sem aspas) e troque o valor para:
o="\040"
@Jonnas,
Sorry quebrar todo o layout do blog no post anterior.
Dah uma olhada como ficou aqui.
http://superbilly.com.br/wp-files/ckfinder_semihacked.jpg
AMIGO O CKFinder E PAGO? ELE ESTA EXIBINDO A SEGUINTE MSG
This is the DEMO version of CKFinder. Please visit the CKFinder web site to obtain a valid license.
NAO ESTOU CONSEGUINDO CRIAR PASTAS FICA SO UMA COM NOME DE CESTA.
ABRAÇO!
Muito bom, obrigada!!!
Eu estou usando o CKFinder versao demo, voce sabe se quando envia imagem por ele, ele reduz o tamanho automaticamente?? As imagens originais no tamanho de 570kb estao ficando com 170kb no servidor, e eu não quero que isso ocorra. Valeu!
@Diego
Cara, dá uma olhada no arquivo [b]config.php[/b], em $config["Images"]. Lá tem as configurações que você precisa.
Eu não estou conseguindo passar as imagens pelo POST para gravar no banco de dados, vc pode me ajudar????
@Zaira
Ajudo sim, qual a dúvida? Só esclarecendo, o que será gravado no banco de dados será o caminho da imagem e não a imagem em si. Pelo que entendi o problema era esse ;)
Eai Galera beleza!?
É possivel fazer a intregração em [b]LocalHost[/b]?
Segui o turorial corretamente mas não tive bons resultados.
E aí, blz? Kra tô tentando usar o ckeditor com o ckfinder ... segui se tutorial, mas quando vou buscar as imagens dá a seguinte msg:
Warning: is_dir() [function.is-dir]: open_basedir restriction in effect. File (caminho) is not within the allowed path(s), POde me ajudar?
@Wladymir Cara, existe algum bloqueio na sua configuração do PHP que não permite acesso a pasta onde as imagens são armazenadas
kra, consegui solucionar o problema anterior, só que ele cria uma pasta images dentro da pasta que eu deixei na baseURL e essa pasta eu não consigo setar a permissão 7777. Sabe o que pode ser?
@Wladymir Provavelmente a pasta foi criada pelo usuário do servidor e não pelo usuário do FTP. Tente deletar a pasta (talvez com unlink()) e recriar no FTP, ao invés de deixar o CKFinder criar para você
Valeu fera .... deu certo
H3nrique Alves, muito legal a sua dica! Eu tô com a versão 2.0.1 instalada e funcionando, mas não consegui remover completamente a mensagem de DEMO. Vou fuçar aqui nas variáveis para ver se consigo.
A mensagem que fica na barra lateral, como foi que você conseguiu remover?
Valeu!
Ola, to com um probleminha, voce pode me ajudar fiz o ckeditor e ckfinder funcionar, insere a imagem no texto, porem quando salvo ele salva da seguinte forma
[i]
[/i]
ele fica usando [b]( \" )[/b] porem quando vou echoar a imagem nao aparece por causa dessa marcação, voce pode me ajudar? agradeço a atenção e pelas dicas
@Eduardo Mandei um email pra você
quando vou fazer upload da este erro não estou conseguindo resolver voce poderia me ajudar com isso ???
Not Found
The requested URL /Prototipos/CkEditor Com CKFinder/ckeditor/ckfinder/core/connector/php/connector.php was not found on this server.
no meu caso a janela que abre do ckfinder fica "carregando" e não sai disso. Conferi as configurações conforme as explicações e aparentemente estão ok. Meu servidor é Apache em Windows, php4.
Jonas, seu comentário me ajudou bastante! Obrigada!!
Obrigado pelo post! Realmente ajudou bastante! Se possível por favor, poste algo que fale sobre a mensagem: 'This is the DEMO version of CKFinder. Please visit the CKFinder web site to obtain a valid license'. Não sei existe um mode de retirar esta mensagem sem fazer a compra ou se por ser demo quais sã as limitações. Valew
@Persio Mandei um email pra você.
Jonnas, muito obrigado pelo post, foi muito útil. Gostaria de uma ajuda, estou querendo criar uma autenticação onde cada usuário terá acesso a sua própria pasta, porém não estou conseguindo colocar o $baseURL de forma dinâmica. Teria como você me dar uma forcinha?
Obrigado
Parabéns, excelente dica.
Muito obrigado.
Cara gostei muito dessas informações, agora tem como remover esta mensagem de demo?
Oi gente, alguém sabe me dizer como fazer esta integração em ASP?
ja fiz de tudo aki chmod e verifica o caminho mais soh da isso
"A navegação de arquivos está desativada por razões de segurança. Contacte o administrador do sistema"
olha soh como esta:
$baseUrl = 'http://site.com/admin/ckeditor/ckfinder/userfiles/'
$baseDir = '/userfiles/';
Local funciona perfeitamente, mas quando eu posto no meu servidor não consigo ver as pastas com as imagens da esse erro: Internal Server Error
, a 404 Not Found error was encountered while trying to use an ErrorDocument to handle the request.
Olá Jonas! Parabéns pelo tutorial. Foi bem útil porém ainda estou com um problema. Fiz tudo isso que você ensinou porém, quando clico no botão de imagem por exemplo, a janela é aberta porém não aparece absolutamente nada do ckfinder. O link dessa janela termina com
"ckfinder.html?type=Images&CKEditor=editor1&CKEditorFuncNum=4&langCode=pt-br"
se eu apagar e colocar apenas:
"ckfinder.html?type=Images"
o CKFinder abre normalmente.
Você tem alguma sugestão do que pode está acontecendo?
Desde já agradeco a sua ajuda.
@Francisco Pode ser que estejam faltando os arquivos de idioma (langCode=pt-BR) ou esteja passando o id do textarea do CKEditor incorreto (CKEditor=editor1)
poxa...deu que a pasta nao foi encontrada...ja fiz de tudo...alguem tem uma luz?
Cara valeu era isso que eu esta precisando Valeu mesmo otimo post
Olá Jonnas, eu estou com o mesmo problema que Jonas ali em cima, porém não consegui resolver com o que ele disse. dá esse erro: "Pasta não encontrada. Atualize e tente novamente" Ja testei o CHMOD 777 e o local das pasta. :/
Nossa, parabens, show de bola, vai me salvar em uns projetos sobre a mensagem: 'This is the DEMO version of CKFinder. Please visit the CKFinder web site to obtain a valid license'. Não sei existe um mode de retirar esta mensagem sem fazer a compra ou se por ser demo quais sã as limitações. Valew
Valeu Jonnas Fonini pelo artigo me ajudou muito apanhei um pouco para entender, mas ainda to iniciando, muito obrigado.
Olá Obrigado pelo artigo , me ajudou muito. Baixei a ultima versão e já vem na versão ASP tbm. Deixei funcionando belezinha para FF. Mas no IE abre o editor mas não a parte de editar o texto, fica tudo cinza. Ckfinder, funfando belezinha, depois de apanhar um pouco. Mas este site me ajudou 100%. Abraço.
André, não consegui inserir o ckeditor em minha jsp, da um erro de script dizendo que o editor não foi definido.
pode me ajudar?
Olá jonas, estou com problemas
meu ckeditor esta normal, mais o ckfinder não ta funcionando direito,
qnd eu upo uma imagem, ele nao funciona e retorna um erro 404
404 Page Not Found
The page you requested was not found.
Da uma olhada no print que tirei:
http://n2kinformatica.com.br/print.jpg
Jonnas você sabe me dizer como criar um sistema para cada usuário ter acesso apenas a sua própria pasta? Obrigado!
No meu fica aparecendo esta mensagem:
Não foi possível carregar a resposta XML enviada pelo servidor.
Resposta original enviada pelo servidor:
Internal Server Error
The server encountered an internal error or misconfiguration and was unable to complete your request.
Please contact the server administrator, webmaster@poetavictorchaves.anapaula.mat.br and inform them of the time the error occurred, and anything you might have done that may have caused the error.
More information about this error may be available in the server error log.
Additionally, a 404 Not Found error was encountered while trying to use an ErrorDocument to handle the request.
Já fiz tudo o que disseram pra fazer aqui e nada de encontrar o erro... =(
Alguém me ajuda?
[...] pesquisando na internet a fim de conhecer melhor o CKFinder e encontrei esse blog, http://www.fonini.net/blog/integracao-do-ckeditor-com-o-ckfinder-upload-de-imagens, que explica perfeitamente e me ajudou [...]
Consegui aqui! Caso alguem precise:
Estrutura do diretorio no meu servidor
public_html
|--admin
|--ckeditor
|--ckfinder
|imagens
|css
|js
Quando aparecer a mensagem de Arquivo ou pasta não encontrado:
resposta: vá no arquivo config.php localizado dentro da pasta ckfinder
altere a linha: $baseDir = resolveUrl($baseUrl);
para: $baseDir = '/home/aqui_fica_usuario_do_servidor/public_html/';
na linha onde tem: $baseUrl, voce pode deixar assim:
$baseUrl = ''; ou
$baseUrl = 'http://seuDominio.com.br/';
pra finalizar na linha:
onde tem $config['ResourceType'][] = Array(...mais codigo
voce pode substituir as linhas:
'url' => $baseUrl.'images',
'directory' => $baseDir.'images',
para:
'url' => $baseUrl,
'directory' => $baseDir,
espero que ajude a quem tiver precisando!
Como a estrtura de diretorios ficou desorganizada por causa do editor aqui. Vou fazer mais detalhado:
1 - dentro da pasta admin ficam a pasta:
1.1 - ckeditor
2 - dentro da pasta ckeditor fica a pasta:
2.1 - ckfinder
3 - no diretorio public_html, fica assim:
pastas
1 - admin
2 - css
3 - js
4 e outros arquivos do sistema
isso é só pra ajudar na resolução de se problema. valeu galera!