CKeditor

Fazendo upload de imagens pelo CKEditor PHP

Postado em | por Websign Sistemas de Gestão

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í!

 

 

Deixe uma resposta