Olá pessoal,
Resolvi criar este tutorial para mostrar a vocês como é um sistema de envio de imagens para um servidor (upload de imagens com CKEditor) usando a versão 4 e demonstro com o código PHP realizando o procedimento de forma fácil e simples.
Bom, vamos aos passos:
Baixar o CKEditor e incluir em seu código
Primeiramente baixe o pacote “STANDARD” no site oficial do CKEditor: https://ckeditor.com/ckeditor-4/download/ e depois realize o upload para a pasta com acesso ao seu site de sua preferência.
Após carregar tudo pro seu servidor, inclua o arquivo javascript do CKeditor entre as tags <head> … </head> do seu site, conforme mostra a seguir:
Feito isso onde você quer que apareça o CKEditor, prossiga para o segundo passo.
Editar o Config.js do CKEditor
Para que funcione, precisamos colocar uma linha de código no arquivo “config.js”. É muito fácil fazer isso, basta abrir a pasta do CKEditor que você subiu pro seu servidor e dentro dela possui um arquivo “config.js”, abra ele com seu editor de códigos preferido e insira a seguinte linha de código abaixo da linha:
config.removeDialogTabs
coloque:
config.filebrowserUploadMethod = 'form'; // Added for file browser
Editando seu HTML e JS
Agora com o plugin instalado e carregado pro seu servidor, crie um <textarea> com o id=”editor” e inclua no seu HTML, e no fim da página, antes da tag </body> insira o seguinte código:
Os caminhos que inseri acima fazem referência ao meu uso, caso você tenha necessidade de apenas realizar o upload de imagens pelo CKEditor basta comentar a opção “filebrowserUploadUrl” e deixar a outra. Claro que as pastas acima e o arquivo PHP você precisa criar e indicar ao caminho corretamente de sua aplicação. Basicamente, a página HTML completa ficaria assim:
Fazendo upload de imagens pelo CKEditor PHP
Tudo certo? Seguimos!
Código PHP
Agora com a parte do front-end feita acima, precisamos que o código javascript trabalhe em conjunto com o PHP no back-end para que seja feito o envio da imagem corretamente. Para isso veja os parâmetros que o código recebe e veja se adapta ao seu código. É um código simples de fácil entendimento e não preciso estar comentando cada linha aqui, porém o básico de segurança já possui e caso queira realizar melhorias fique à vontade!
window.parent.CKEDITOR.tools.callFunction('.$funcNum.', "'.$url.'", "'.$message.'")';
}
}
exit;
Bom, por hoje é isso pessoal. Espero que tenham gostado do post de hoje explicando de maneira bem direta como funciona e como implementar o upload de imagens pelo CKEditor 4. Ficou alguma dúvida? Sugestão? Comenta aí!
Uma resposta em “Fazendo upload de imagens pelo CKEditor PHP”
Achei bem interessante, só uma dúvida sobre o diretório “ckeditor_fileupload”, não achei no pacote que baixei.