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:
1 | <script src="ckeditor/ckeditor.js"></script> |
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:
1 | config.removeDialogTabs |
coloque:
1 | 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:
1 2 3 4 5 6 7 8 | <script type="text/javascript"> CKEDITOR.replace( 'editor', { height: 300, filebrowserUploadUrl: "/ckeditor_fileupload/ajaxfile.php?type=file", filebrowserImageUploadUrl: "/ckeditor_fileupload/ajaxfile.php?type=image", } ); </script> |
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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <!DOCTYPE html> <html> <head> <title>Fazendo upload de imagens pelo CKEditor PHP</title> <!-- CKEditor JS --> <script src="ckeditor/ckeditor.js" type="text/javascript" ></script> </head> <body> <!-- Editor --> <textarea id='editor'></textarea> <!-- Script --> <script type="text/javascript"> CKEDITOR.replace( 'editor', { height: 300, filebrowserUploadUrl: "/ckeditor_fileupload/ajaxfile.php?type=file", filebrowserImageUploadUrl: "/ckeditor_fileupload/ajaxfile.php?type=image", } ); </script> </body> </html> |
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!
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | <?php // parametros de recebimento do ajax do CKeditor $CKEditor = $_GET['CKEditor']; $funcNum = $_GET['CKEditorFuncNum']; // inicio do processo de upload $allowed_extension = array( "png","jpg","jpeg" ); // pega a extensao do arquivo carregado $file_extension = pathinfo($_FILES["upload"]["name"], PATHINFO_EXTENSION); if(in_array(strtolower($file_extension),$allowed_extension)){ if(move_uploaded_file($_FILES['upload']['tmp_name'], "uploads/".$_FILES['upload']['name'])){ // realiza o upload if(isset($_SERVER['HTTPS'])){ $protocol = ($_SERVER['HTTPS'] && $_SERVER['HTTPS'] != "off") ? "https" : "http"; } else{ $protocol = 'http'; } $url = $protocol."://".$_SERVER['SERVER_NAME'] ."/ckeditor_fileupload/uploads/".$_FILES['upload']['name']; // retorna pro CKeditor a resposta com a URL do arquivo carregado echo '<script>window.parent.CKEDITOR.tools.callFunction('.$funcNum.', "'.$url.'", "'.$message.'")</script>'; } } 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í!