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