Creare un modulo upload e browse immagini in CkEditor

Pubblicato lun 22 lug 2013 by
Creare un modulo upload e browse immagini in CkEditor

CkEditor è un editor di testo WYSIWYG (What you see is what you get) Open Source da utilizzare nelle proprie pagine web, questo blog ed in particolare gli articoli che trovate in esso sono stati scritti proprio con questa applicazione, per maggiori informazioni vi rimando alla pagina degli sviluppatori CkEditor . Quello che interessa a noi in questo articolo però, non è l'editor in sè ma piuttosto la possibilità di effettuare l'upload di una immagine e l'inserimento della stessa nell'editor, ovviamente in questo tutorial mostrerò anche come sfruttare la funzione cerca sul server, proprio per fare in modo da andare a selezionare la nostra immagine dalla galleria che si creerà dopo i vari upload.

Ckeditor è predisposto per selezionare le immagini o caricarle, però il plugin non è disponibile di default, se lo volete dovrete acquistare CkFinder sempre dal sito di CkEditor e diciamo che se non avete grosse esigenze sborsare dai 99$ ai 499$  non è il massimo della vita, questo mio script non è assolutamente vicino alla qualità di CkFinder ma funziona, fa quello che mi serve e questo mi basta. Ora però passiamo alla creazione dello script.

Per prima cosa editiamo il file config.js situato nella directory principale di ckeditor aggiungendo questo codice nella sezione editorConfig:

CKEDITOR.editorConfig = function( config ) {
  config.filebrowserBrowseUrl = "browse.php";
  config.filebrowserUploadUrl = "upload.php";
  config.filebrowserWindowWidth = 700;
  config.filebrowserWindowHeight = 700;
};

Vediamo il codice in dettaglio:

config.filebrowserBrowseUrl = "browse.php";

browse.php sarà il file che ci permetterà di visualizzare la nostra galleria e selezionare l'immagine da inserire nell'editor, attenzione perchè se il file non sarà nella stessa directory del file config dovrete inserire anche il percorso.

config.filebrowserUploadUrl = "upload.php";

Qua specifichiamo che il file da caricare premendo il pulsante invia al server è appunto upload.php

 config.filebrowserWindowWidth = 700;
 config.filebrowserWindowHeight = 700;

Ora abbiamo impostato la dimensione della finestra di dialogo a 700px di larghezza e 700px di altezza, questo valore è modificabile a vostro piacimento.

Una volta salvato e chiuso il file config.js creiamo una cartella chiamata images e ricordiamoci di impostare i permessi a 777.

Ora passiamo alla creazione del file di upload, creiamo un nuovo file di testo e chiamiamolo upload.php apriamolo e iniziamo a inserire il codice:

<?php 
$url = 'images/'.time()."_".$_FILES['upload']['name'];
	if (($_FILES['upload'] == "none") OR (empty($_FILES['upload']['name'])) )
    {
       $message = "Nessuna immagine caricata.";
    }

In questa prima parte di codice abbiamo impostato la variabile $url per impostare il nome e il percorso del file, il comando time() è stato utilizzato perchè per evitare problemi di sovrascrittura di una immagine con lo stesso nome aggiungiamo prima del nome del file il timestamp  e la linea _ , in questo modo saremo sempre sicuri di avere un nome univoco per ogni file. quindi se avrò immagine.jpg il file caricato sarà rinominato in 1374505711_immagine.jpg dopodichè se nessun file è stato caricato o se non esiste nessun nome verrà impostato il messaggio di errore corrispondente alla variabile $message.

    else if ($_FILES['upload']["size"] == 0)
    {
       $message = "Il file ha una dimensione pari a 0.";
    }

Continuano i controlli if, se il file ha dimensione 0 vorrà dire che c'è stato un errore durante il caricamento o il file è danneggiato quindi daremo un messaggio di errore.

else if (($_FILES['upload']["type"] != "image/pjpeg") AND ($_FILES['upload']["type"] != "image/jpeg") AND ($_FILES['upload']["type"] != "image/png"))
    {
       $message = "Il formato deve essere JPG o PNG. Per favore controlla di aver selezionato un formato immagine corretto.";
    }

Io ho deciso di permettere l'upload solamente di file png o jpg quindi ho creato un controllo anche di questo, nulla vi vieta di aggiungere all'elenco altre estensioni.

else if (!is_uploaded_file($_FILES['upload']["tmp_name"]))
    {
       $message = "Non è stato possibile caricare il file, qualcosa è andato storto";
    }

Infine controlliamo che il file è stato caricato ed esiste, così evitiamo anche tentativi di hack.

else {
      $message = "";

Se la variabile $message è vuota vorrà dire che fino ad ora non c'è stato nessun errore, quindi possiamo iniziare la creazione e il ridimensionamento dell'immagine. Per comodità i commenti li inserirò all'interno dello script, così non dovrò ripetere due volte il codice:

//Creo la variabile $uploadedfile e le dò il valore del file caricato
$uploadedfile=$_FILES['upload']['tmp_name'];
//Creo l'immagine da rielaborare
$src = imagecreatefromjpeg($uploadedfile);
//Leggo i valori larghezza e altezza dell'immagine caricata
list($width,$height)=getimagesize($uploadedfile);
//imposto la larghezza a 250px, voi potete modificare questo valore come più vi pare
$newwidth=250;
//con questo calcolo ottengo la larghezza giusta in base all'aspetto dell'immagine e della mia larghezza impostata
$newheight=($height/$width)*$newwidth;
//ora creo il contenitore con la nuova dimensione ottenuta
$tmp=imagecreatetruecolor($newwidth,$newheight);
//copio l'immagine e la ridimensiono nel nuovo contenitore
imagecopyresampled($tmp,$src,0,0,0,0,$newwidth,$newheight,$width,$height);
//creo il jpg con qualità al 100%, questo valore è a vostro piacimento
imagejpeg($tmp,$url,100);
//elimino il file da rielaborare in quanto non più necessario
imagedestroy($src);
//ora elimino il file temporaneo
imagedestroy($tmp);
//Se ci sono dei problemi durante la creazione del file probabilmente i permessi di scrittura non sono corretti quindi effettuiamo un ultimo controllo
if(!$tmp)
      {
         $message = "Errore durante lo spostamento del file. Potrebbe essere un problema di permessi in lettura/scrittura.";
      }

Dopo aver caricato la nostra immagine lo script dovrà occuparsi di passare il risultato a ckeditor, anche per fare in modo di inserire direttamente l'immagine nella nostra casella di editor:

//Associamo il numero funzione di CkEditor a una variabile
$funcNum = $_GET['CKEditorFuncNum'] ;
//ora lo script si occuperà di passare il messaggio generato o la foto caricata a CkEditor
echo "<script type='text/javascript'>window.parent.CKEDITOR.tools.callFunction($funcNum, '$url', '$message');</script>";
?>

Il file di upload è pronto, volendo ora siamo già in grado di caricare le foto e inserirle nel campo di testo, però se volessimo andare a riprendere o eliminare una foto caricara in precedenza? Dovremo servirci del file browse.php che abbiamo dichiarato nel file di configurazione di CkEditor e di un file che ho chiamato browse_func.php

Se non li avete già creati fatelo ora e iniziamo a inserire il codice html nel file browse.php, per non incasinare nessuno tralascio stili e tutto il codice che a noi in questo momento non interessa, il resto sarà a vostra discrezione.

<?php include 'browse_func.php'; ?>
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
  </head>
   <body>
    <ul>
      <?php Elenca(); ?>
    </ul>
   	</body>
</html>

Praticamente browse.php sarà il vostro template, e nella funzione elenca ci sarà lo script che si occupa di elencare tutte le foto caricate. Ora apriamo browse_func.php e inseriamo il codice:

 <?php
function Elenca()
	{
 //Apro la directory contenente le immagini		
 $pics = opendir('images');
 //Inizio con il ciclo while a caricare le immagini una alla volta
 while ($filename = readdir($pics)){
	//escludo file che non abbiano estensione regolare
        if ($filename != '.' && $filename != '..') {
        //assegno l'url dell'immagine
        $pathimg = 'images/'.$filename;
        //stampo il codice html per caricare l'immagine e il link per eliminarla
        echo '<li><a href="#" onClick="insert(''.$pathimg.'')"><img src="'.$path.'" /></a><a href="' . $_SERVER["PHP_SELF"] .'?img='. $filename .' ">ELIMINA</a></li>';
         }	
	}

 //se abbiamo cliccato su elimina	
 if(isset($_GET['img'])) {
  //impostiamo la directory contenente l'immagine
  $path = 'images/';
 //otteniamo il nome del file
  $filename= $_GET['img'];
  //eliminiamo il file
 unlink($path.$filename);
 } 
?>

Come potete vedere con questo script sarete in grado di caricare una foto sul vostro server, inserirla in CkEditor e richiamarla successivamente per poterla reinserire, il tutto può o meglio... DEVE essere modellato a vostro piacimento, per esempio la lista delle immagini avranno il pallino a fianco perchè non ho editatoin nessuna maniera il css, quando cliccate su elimina non vi chiede conferma e la cosa è molto sgradevole, però come vi dicevo in precedenza, ci siamo soffermati esclusivamente sul cuore del sistema, starà poi a voi sbizzarrirvi e aggiungere controlli, funzioni e chi più ne ha più ne metta.

Per le domande, consigli, suggerimenti o critiche lasciate un commento.

Grazie e alla prossima.


 

 

comments powered by Disqus