Como instalar o FCKEditor e configurar o Upload de imagens
O FCKEditor é um editor WYSIWYG, acrônico da expressão “What You See Is What You Get”, “o que você vê é o que você tem” em português. Sempre que precisei incluir um editor HTML em meus projetos optei pelo TinyMCE, que também é uma ótima ferramenta, mas a versão free do TinyMCE não permite o upload de imagens.
Como nunca precisei desta função não pesquisei alternativas. Essa semana que passou precisei do upload e me indicaram o FCKEditor, gostei bastante e resolve escrever este post mostrando como instalar o FCKEditor e configurar o upload de imagens.
A primeira coisa a fazer é baixar o FCKEditor no site oficial do projeto, depois você vai subir os arquivos para o seu servidor.
fckeditor
Instalando o FCKEditor
Agora vamos chamar o FCKEditor na página, para isto basta incluir a página assim:
1 2 3 | <?php include_once("fckeditor/fckeditor.php"); ?> |
Claro que você deve alterar o caminho entre aspas pelo caminho da pasta fckeditor.
Depois disto basta chamar o FCKEditor dentro do seu formulário da seguinte forma:
1 2 3 4 5 6 | <?php $oFCKeditor = new FCKeditor('fckeditor1') ; $oFCKeditor->BasePath = 'fckeditor/' ; $oFCKeditor->Value = $codigo['codigo']; $oFCKeditor->Create() ; ?> |
Logo na primeira linha você deve alterar o “fckeditor1″ pelo nome do campo do seu formulário.
Upload de imagens no FCKEditor
Pronto, você já tem um campo com editor HTML, agora vamos configurar para que o upload de imagens possa funcionar. Abra o arquivo fckeditor/editor/connectors/php/config.php e localize as linhas:
1 | $config['Enabled'] = false; |
Mude para:
1 | $config['Enabled'] = true; |
Na linha:
1 | $Config['UserFilesPath'] = ''; |
Você deve informar o endereço da pasta onde as imagens serão armazenadas, com http://www e tudo… assim:
1 | $Config['UserFilesPath'] = 'http://www.seusite.com.br/imagens/'; |
Não esqueça da barra no final.
Por fim altere a linha:
1 | $Config['UserFilesAbsolutePath'] = ''; |
Inserindo o caminho absoluto no servidor da pasta onde as imagens serão armazenadas, maisou menos assim:
1 | $Config['UserFilesAbsolutePath'] = '/home/seusite/public_html/imagem/'; |
Feito isto crie a pasta “imagem” e mude a permissão para 777.
Pronto, o FCKEditor já esta funcionando com upload de imagens e tudo mais.
Qualquer dúvida pode vir aqui que terei o prazer em ajudar no que puder.
[update 2/06/2010]
O TigreBR falou nos comentários que estava com dificuldade para saber qual o caminho absoluto do servidor e tentou postar algum código que exibe o caminho, mas o código não apareceu porque o WordPrees não permite código nos comentários então tentarei ajudar.
Se você não sabe qual o caminho absoluto crie um arquivo chamado path.php com o seguinte código:
1 2 3 | <?php echo getcwd(); ?> |
Coloque o arquivo na raiz do seu site e acesse pelo navegador (www.seusite.com/path.php) para que ele imprima na tela o caminho absoluto do seu servidor.
[update]
Se você gostou deste post, escreva um comentário e/ou cadastre-se em nosso feed.
Comentários
Manuel, eu não sou tão conhecedor do FCKEditor, comeceia utilizar a pouco tempo, e por isso não sei lhe dizer se existe uma função nativa mas consigo pensar em uma solução simples para o teu problema.
O usuário provavelmente precisa logar no teu sistema para acessar o editor, certo? Quando ele loga você cria uma sessão que o identifica dentro do sistema pelo nome, ID, login ou whatever?
Uma forma de fazer o que você quer é criar uma sessão quando o usuário logar e então no arquivo fckeditor/editor/connectors/php/config.php do FCKEditor você pega essa session e guarda em uma variavel tipo: $pasta = $_SESSION["id_user"];, nas linhas que ensinei a editar para identificar onde a imagem deve ficar você faz assim:
$Config['UserFilesPath'] = ‘http://www.seusite.com.br/'.$pasta.'/';
E
$Config['UserFilesAbsolutePath'] = ‘/home/seusite/public_html/’.$pasta.’/';
Então as imagens serão enviadas para a pasta com ID do usuário logado. Não tenho certeza se a pasta será criada automaticamente mas ai você cria uma rotina no seu sistema para criar a pasta com o ID do usuário no momento do cadastro.
Pessoal, estou integrando o fckeditor com java, mas nao consigo utilizar o upload de imagens do meu localhost para o servidor(ou uma pasta qualquer), na hora de carregar a imagem ele fica na barra de carregando ” _ _ _ _ _ _ _ _” eternamente, alguem sabe o que posso fazer?
Isso aconteceu comigo antes de alterar as linhas:
$Config['UserFilesPath'] = ”; e Config['UserFilesAbsolutePath'] = ”;
Mais detalhes no post.
Pessoal, estou com o fck editor for java mas gostaria de alterar o criação da pasta de upload, para outro local… se conseguirem me ajudar, agradeço muuuito…
[...] http://www.leobaiano.com/como-instalar-o-fckeditor-e-configurar-o-upload-de-imagens.html VN:F [1.6.4_902]please wait…Rating: 0.0/10 (0 votes cast)VN:F [1.6.4_902]Rating: 0 (from 0 [...]
Boas a todos, estou mexendo no meu Fck aqui e apos eu “upar” a imagem na hora que aparece a pré visualização a imagem não está lá, fica como se não tivesse upado a imagem e o atalho para um local vazio…. Tipo assim ele “simula” que a imagem foi upada quando na vdd ela não foi.
Alguem sabe como corrigir isso?
Rafael, siga o tutorial no texto…
Esse erro acontece por um ou todos os motivos abaixo:
1 – A pasta para onde a imagem vai ser gravada não tem permissão 777;
2 – O caminho esta mal informado no arquivo config.php;
Olá galera!!
eu fiz todo procedimento só que quando eu vou fazer o upload ao prcurar uma imagem dá o seguinte erro: “ERROR CREATING FOLDER” dei todas as permissões, mas esse erro persiste. Alguém pode me ajudar?
Valew!
quais permissões vc deu,
e no caminho da pasta tenta colocar o caminho completo com ‘/’ no começo.. Tipo
/httpdos/minhapasta/conteudo/imagem
Olá Rafael!, então as permissões nas pastas foram alterdas para 777 que é de upload. Eu já havia colocado o caminho assim começando com a barra, mas nada… =/
Para ser mais específico aparece isso:
Error creating folder “/httpdocs/atw/conteudo/imagemimage/” (Can’t create directory)
Galera consegui! o erro estava mesmo no caminho absoluto. Eu não estava indicando o caminho completo, por isso não fazia o uplaod. Grande post.
Valew!!
na hora que a gente faz um upload de algum arquivo não é possivel escolher a localização? ou tenho que subir sempre para o mesmo lugar.
Achei o POST do Leo Baiano muito interssante, bem desenvolvido e muito explicito, por isso antes de mais os meus parabens ao autor do post.
Apesar disso achei que houve apenas um pequeno lapso do autor, que foi ensinar a fazer funcionar o upload em localhost?
Para quem não sabe ai vai:
1º passo:
$Config['UserFilesPath'] = ‘http://localhost/root/meusite/imagens/';
$Config['UserFilesAbsolutePath'] = ‘/xampp/htdocs/root/meusite/imagens/’ ;
Marco eu ainda não testei a nova versão do FCKEditor mas assim que sobrar um tempo vou ler a documentação, testar e atualizar o post, ou quem sabe até escrever um novo.
[...] que tornam simples a implementação de editores de texto. Eu prefiro usar o FCKEditor por conta do upload de imagens e arquivos, no TinyMCE para habilitar o upload é necessário utilizar uma versão paga ou [...]
Fico no aguardo mais acho que na versão nova o upload de imagens não venha a não ser que se pague pelo código
Prezados,
Estou com dúvida… Se eu colar uma imagem no textarea do fck, como eu faco para que ele faco upload automatico da imagem?? será se há possibilidadde??
Adorei, parabéns era exatamente o que eu procurava a muito.
UMA QUESTÃO:
Fiz um formulario utilizando a developer do dreamweaver,
adaptei o codigo do FCKeditor, e cadastrou normal, mas tenho um arquivo que edita o conteudo e não consegui adaptara o codigo porque o formulario edita com filtro pela id e tem um echo veja o codigo abaixo.
Boa tarde, estou com um problema no FCKeditor na hora de falar o upload de imagens. Alterei o fckconfig para php e na que clico em figura depois em localizar servidor ele continua pegando em asp.
Se copiar o link fckeditor/editor/filemanager/browser/default/browser.html?Type=Image&Connector=http%3A%2F%2F192.168.1.4%2Fhertape%2Fintraweb%2Fhtml%2Ffckeditor%2Feditor%2Ffilemanager%2Fconnectors%2Fasp%2Fconnector.asp e substituir para php funciona perfeitamente.
Obrigado
Olá LéoBaiano,
Queria dizer Parabéns por essa explicação do FCKEditor, fazia tres dias que eu estava sofrendo para solucionar o meu problema de upload de imagens no fckeditor … mas agora de forma simples sua explicação resolveu meu problema.
Muitissimo Obrigado,
Fabrício Alves
Eu também quebrei um pouco a cabeça e por isso tive a idéia de compartilhar a configuração aqui no blog.
Obrigado!
Olá estou precisando redimensionar a imagem automaticamente ao fazer o upload, utilizando o FCKEditor, vc saberia como me ajudar?
Quando você faz o upload da imagem e ela é carregada aparece uma caixa de opções onde você pode escolher as dimensões.
Quando vai gerar o upload, ele da erro de permissao, na pasta home… ja dei permisao na pasta
mas ta dando erro no caminho fisico
no aguardo
grande abraço
Olá Srs,
EStou desenvolvendo uma aplicação na qual estou utilizando o fckeditor.
A minha dificuldade está na hora de salvar o texto que foi digitado. Quando eu clico no ícone de Salvar na Barra de Ferramentas fica dando um erro 404 na página.
Alguém poderia me ajudar?
Grata desde já.
Mario, você esta salvando as imagens na pasta home??? Cria um diretorio na raiz do seu site, é melhor, depois siga os passos que expliquei no subtitulo Upload de imagens no FCKEditor do post acima.
Gilmara, veja na documentação do FCKEditor que eles explicam como fazer a integração, eu particularmente não costumo usar aquele botão “salvar” até desabilito ele nos meus projetos, o que faço é colocar um botão do formulário logo abaixo do editor, até porque normalmente, em meus projetos, existem outros campos que precisam ser salvos no BD e se não me engano integrando o FCKEditor pra chamar um arquivo passando o conteúdo ele só mandaria o conteúdo da textarea e não dos outros campos.
Leo, parabéns pelo blog.
Seguinte… Qual versão você está usando? Não consigo Localizar o arquivo ‘fckeditor/editor/connectors/php/config.php’.
Parceiro, esse tutorial é da versão FCKEditor 2.x antes do editor mudar de nome para CKEditor na versão 3.x. Gosto dessa versão…
Magnifico post!
Estava com problemas aqui para descobrir o meu diretório absoluto, se for em php criem um arquivo com as instruções abaixo e salve no diretorio raiz de seu site:
A dica do arquivo path.php para descobrir o caminho absoluto no servidor foi ótima, em poucos minutos resolvi um problema que levei horas para solucionar! Muito obrigado!
Leo,
consegui configurar o fckeditor no meu site, ta fazendo upload, salvando tudo bonitinho… através da sua dica. Mas estou querendo fazer alguns tratamento com os uploads e ja vasculhei a net e não consegui descobri. estou precisando limitar o tamanho máximo do arquivo a ser upado. Você sabe se tem algum opção para eu configurar isso? ou se daria pra mexer em algum lugar do código dele mesmo para ele tratar? Outra coisa q eu estava precisando era remover os espaços dos nomes dos arquivos upados? Se souber como me ajudar ficarei mto grata!
Leo,
Estou com o seguinte problema com upload, tenho que realizar o upload e downlaod das minha imagens de outro servidor diferente do meu e não estou conseguindo amigo o que devo fazer?
Grande abraço
Adelito Tosta
Olá a todos
Olha só minha dúvida, ja instalei várias vezes o FCKeditor, e sempre funcionou, porém agora me deparei com um erro que não entendo
Faço o upload da imagem, perfeito, ela vai pra pasta e aparecece corretamente enquanto estou editando a mensagem, porem quando mando precessar e enviar, da um erro estranho, não da mensagem nenhuma, de erro conhecido nem falha no envio nada, a imagem esta la, se eu abrir o código fonte na edição da mensagem o caminho da imagem está perfeito certinho, porem no e-mail quendo recebo e na página onde eu visualiso a mensagem enviada, a parece no lugar da imagem só isso
” \”\” ”
ou seja uma barra, aspas, barra e aspas nvamente, muito estranho
percorrios códigos e não encontrei erros de parseamento.
se algupem ouder me ajudar ou ja tenha passado por essa situação da um help ai
beleza
Hum abraço a todos
Caros colegas,
Tenho o seguinte erro acontecendo:
Criei os caminhos:
$Config['UserFilesPath'] =’http://meusite.com/caminho/imagens/’ ;
$Config['UserFilesAbsolutePath'] = ‘/home/meusite/www/caminho/imagens/’ ;
O quando faço upload de uma imagem pela função “enviar para o servidor”, ele envia correto para dentro da pasta imagens, porém, se eu for em “localizar no servidor” ele mostra uma pasta que o fckeditor criou chamada image dentro da pasta imagens.
Esta tudo com permissão 777, como faço resolver isso?
Grande abraço
Olhem como estão ficando os links tanto em imagens quanto arquivos:
http://www.meusite.com/%22http://www.meusite.com/caminho/imagens/file/arquivo.txt/%22
obvio que isso não deixa eu vizualizar nem imagens nem os arquivos.
O que estou fazendo de errado..
grande abraço
opa, veja primeiramente que
$Config['UserFilesPath'] =’http://meusite.com/caminho/imagens/’ ;
$Config['UserFilesAbsolutePath'] = ‘/home/meusite/www/caminho/imagens/’ ;
essa linha vc tem que colocar seu site mesmo
tipo ’http://www.MUDARAQUI.com/SITEMUDARAQUI/imagens/
esse é um erro
preciso saber o que ocorre mais
Sim, na verdade estou testando para ver o funcionamento antes de colocar em meu painel, por isso o os links
$Config['UserFilesPath'] ’http://meusite.com/caminho/imagens/’ ;
$Config['UserFilesAbsolutePath'] = /home/meusite/www/caminho/imagens/’ ;
o ‘caminho’ é uma pasta que eu criei para teste e dentro dela uma pasta chamada imagens, mas o sistema esta criando automaticamente uma pasta ‘image’ dentro da pasta imagens, e depois o link esta ficando totalmente desconfigurado.
grande abraço
Onde esta meu site é somente para não mostrar escancarado o site, mas esta config para a url do meu site corretamente vejam como esta ficando o link das imagens:
–
http://www.jcpersonalwebsites.com/%22http://www.jcpersonalwebsites.com/imagens/image/dell.bmp/%22
–
O mesmo ocorrendo com os arquivos, e observem que ele cria a pasta image também.
Abraço
Instalei o fckeditor em um projeto que estou trabalhando mas estou tendo problemas com imagens, ele cria a pasta no diretório mas não salva as imagens dentro dela e nem retorna erros, se eu colocar uma imagem na pasta ele lista, mas não faz upload de nenhuma imagem, todas as pastas estão com permissão 777, alguém tem alguma idéia do que pode ser??? Eu agradeço muito qq ajuda.
Valew
Bom dia, eu inseri o patch.php
e saiu este caminho:
D:\webs\fert21\FCKeditor\editor\filemanager\connectors\php
o caminho que está minha imagem é: ‘/webroot/image/’
porem eu digito somente: ‘/webroot/’
pois ele ja insere o image automaticamente e mesmo assim dá o erro: Erro creating folder: “/webroot/image/”
Qual a solução?!
muito bom o tutorial!
funcionou certinho aqui 
alias.. existe uma nova versão do fckeditor que é o ckeditor, queria saber se o esquema para instalar e fazer upload de imagem é o msmo, pq estou pensando em atualizar o meu editor.
Rafa, se eu não me engano a versão free do ckeditor não tem upload de imagens, mas faz tempo que não uso em nenhum projeto então vale a pena conferir, é sempre bom utilizar a versão mais atual do script né.
Boa noite.
Não consigo configurar me editor para que ele fique apenas com alguns botoes, quero saber onde que faço para tirar ou colocar os botoes (salvar, colar. ….)
grato
Para cria um formulario de contato, eu posso usar a função mail do php sem problema. o email não vai perder a formatação?
obrigado
Estou usando Fckeditor porem quando clico no botão para inserir uma imagem no corpo do texto abarece a caixa Botão Imagem mas não vem campos, botões..ou seja a caixa aparece sem os seus elementos. Sabe porque?
Paulo, nunca encontrei um bug desse tipo, faz muito tempo que publiquei esse post, faz tempo que não utilizo o FCKEditor, hoje ele é chamado de CKEditor, talvez um upgrade na versão resolva seu problema.
Tenho um problema que não consigo ultrapasar na questão das imagens no fckeditor. Vi que percebe muito disto. O que quero é que cada utilizador tenha a sua pasta e tenha as suas imagens. há alguma forma de fazer isso?
obrigado
Manuel