Integrare un semplice "filebrowser" per ckeditor realizzato con cakephp (versione italiana)

Tra i vari editor html liberi il mio preferito è il popolarissimo ck editor. Come spesso accade, il componente per la gestione dei file e delle immagini non è gratuito. E’ decisamente completo e ben fatto – ed esistono pure varie alternative di terze parti, di ottimo livello.

Non sempre serve un file manager completo. A volte è meglio implementare una semplice soluzione ad hoc, avendo controllo completo sulle funzionalità e tutto ciò che gli utenti possono, o non possono, fare.

Poche opzioni per gli utenti e qualche automatismo.

Vediamo, in questa serie di tre o quattro articoli, come uno sviluppatore che usa da poco cakephp ed è un principante per quanto riguarda javascript, ha implementato le funzioni principali per l’inserimento di file, immagini, e media da fonti esterne.

Nell’ordine:

1) File allegati.
Iniettare html personalizzato in ckeditor con un link per scaricare il file (impedendo all’utente di inserire link errati)

2) Immagini.
Poche opzioni per l’utente – immagine piccola allienata a sinistra o destra, o grande al centro, con link alla versione originale.

3) e forse 4) webservices. media da fonti esterne. Usare le api di youtube per cercare ed inserire video, o quelle di Flickr per inserire singole foto o slideshow. beh, è più semplice di quanto sembri.

–Filebrowser di base

Quel che voglio realizzare è un semplice popup con una lista filtrabile dei file e un comando per inserire unlink al file scaricabile in ckeditor.

Nella vista (elemento) in questione, che chiama il “filebrowser”, ho qualcosa del genre:

contents.ctp:

Code block

<?php
$javascript->link('ckeditor/ckeditor', false);  // started this with cakephp 1.2, so I’m still using javascript and ajax helper..
?>
 
[..]
 
<?php
echo $form->input('summary', array('type' => 'textarea'));
 
// [..]
echo $html->link($html->image('icons_big/attachment.png',
	 array('align' => 'absmiddle'))
	. __(' Files ', true),
 
	'javascript:;',
 
	array('escape' => false	,
 
	'onclick' => "javascript:window.open('".$html->url(array(
 
	'controller' => 'assets',
 
	'action'=>'filebrowser',
 
	$Type.'Summary'  // opener instance
 
// $Type is the model name (this element is used by different controllers and actions), so this is the rendered form helper field name / id; i.e. NewsSummary, EventSummary, PageWholeContent
 
	)
 
)."','_blank', 'toolbar=0,scrollbars=1,location=0,status=1,menubar=0,resizable=1,width=800,height=680'); return false;"
),
null
);
 
// [..]
 
?>
 
<script type="text/javascript">
 
var editor = CKEDITOR.replace( "<?php echo $Type ?>Summary" , {customConfig : "/js/ckeditor/alternate_config.js", height : "150px"});
 
CKEDITOR.add
 
CKEDITOR.config.contentsCss = '<?php echo $html->webroot('/js/ckeditor/mycontents.css') ?>' ;
 
</script>

Essenazilmente, una (o più) istanze di ckeditor ed i relativi link per i popup.

—

Il modello

Niente di speciale, qui.

Dipende molto dalle spcifiche esigenze e preferenze. Io ho questo modello Asset che sostanzialmente imposta la configurazione per il behaviour che effettua l’upload. In questo caso uso il Media Plugin di David Persson (http://github.com/davidpersson/media), v 0.60, con alcune modifiche.
Ma andrà bene qualsiasi componente / plugin / behaviour per l’upload dei file (e il ridimensionamento delle immagini).

(Preferisco salvare i dati dei file nel database. Non è strettamente necessario ai fini di questo articolo; trovo però che sia molto più semplice -e utile, e veloce- usare una unica tabella per salvare i dati e riferimenti dei file piuttosto che fare la scansione di un albero nel filesystem)

—

Il Controller

Ecco una versione molto semplificata del codice che uso effettivamente in un controller apposito.

Giusto come riferimento, qui ci sono le principali dichiarazioni:

assets_controller.php:

Code block

<?php
 
class AssetsController extends AppController {
 
var $name = 'Assets';
 
var $helpers = array("Html", "Form", "Javascript", "Ajax", "Time", "Text", "Utility", "Media.Medium", "Number");
 
var $components = array('Auth', 'Cookie', 'Toggle', 'Session', 'RequestHandler','Flickr');
 
var $paginate = array('contain' => array(
	'Site' => array('fields' => array('title', 'slug')),
	'Content'=> array('fields' => array('title','slug','publish')))
, 'order' => 'Asset.id DESC'
);
 
?>

Di seguito, l’azione che gestisce il popup (per filtrare, paginare, caricare e selezionare i file da inserire nel testo)

Anche qui niente di speciale, faccio solo notare il parametro $opener_instance. E’ usato per identificare l’istanza di ckeditor che legata al popup, così da avere la possibilità di istanze multiple (ad esempio introduzione e corpo nel testo, come nel mio caso).

In AssetsController.php:

Code block

<?php
 
/**
* file browser, renders the (filtered) popup list of files for the current site
* @param <string> $opener_instance, name of the field / ckeditor instance
*                that will get the injected html for image display.
*                You can use multiple ck editor instances on teh same page
*/
 
function admin_filebrowser($opener_instance,$type='all') {
 
	if (isset($this->params['named']['type']))
	$type = $this->params['named']['type'];
 
	if($this->admin_index($type, true)) {
		$this->set('opener_instance', $opener_instance);
		$this->render('admin_filebrowser', 'basic');
	}
 
}
 
?>

L’azione passa semplicemente i parametri necessari alla funzione admin_index e imposta le variabili per la view.

admin_index è il nostro tuttofare. Funge sia da normale azione del controller, sia per preparare l’array di valori filtrati / paginati che vengono restituiti all’azione per il filebrowser popup. (e per il “browser” delle immagini, ma questo è un altro post).

In assets_controller.php:

Code block

<?php
 
/**
* function admin_index
*
* displays a filtered (by type, search terms, site) lists of files;
*
* used as an action for assets management, or returns data for
* file/imagebrowser used in ckeditor
*
*
* @param <string> $type - type of media
* @param <boolean> $return false, it's the normal asset controller action,
*                        true, sets data for the popup ckeditor "fielbrowser" and skips
*                        admin_index view rendering
* @return <boolean>
*/
 
function admin_index($type = null, $return = null) {
 
	$this->Asset->recursive = 0;
 
	// [..]
	// all logic for filtering records
 
	$this->Asset->contain($this->defaultContain);
 
	$assets = $this->paginate(null,$filter);
 
	$assets = Sanitize::clean($assets);
 
	$this->set('assets', $assets);
 
	//[..]
	// if it's called by imagebrowser or filebrowser
 
	if($return) return true;
	// else render index view..
 
}
?>

Ho tolto le parti non rilevanti (in particolare il codice per filtrare i file in vari modi e la paginazione). Quel che resta è una semplice. funzione per recuperare certi dati. E’ nella view la parte più significativa (è alqaunto semplice, in effetti).

Non ho neanche approfondito le ck editor javascript api o la developer guide. Per mantenere le cose semplici, mi serviva solo una funzione per inserire html formattato nell’appropriata “textarea” / oggetto ck editor.

In admin_filebrowser.ctp:

Code block

<script type="text/javascript">
<!--
function InsertHTML(passed)
{
//get the correct editor object instance (in my case, i.e. if news controller: NewsSummary or
//NewsWholeContent, if events controller -> EventsSummary.. etc. )
 
	var oEditor = opener.CKEDITOR.instances.<?php echo $opener_instance ?>;
 
// Check the active editing mode.
 
	if ( oEditor.mode == 'wysiwyg' )
	{
 
	// Insert the desired HTML.
		oEditor.insertHtml( passed ) ;
 
	}
	else
		alert('<?php echo __('You must be on WYSIWYG mode!', true); ?>') ;
 
	window.close();
}
-->
</script>

Questo è il punto. Questa semplice funzione javascript semplicemente prende l’instanza corretta di ckeditor e inietta nel contenuto della “textarea” quello che gli passiamo, usando il metodo insertHtml().

Tutto ciò ch resta da fare è generare l’html necessario per riempire propriamente la variabile passed. La semplicità sta nel fatto che non serve alcuna azione ajax, ma, essendo nel popup, possiamo fare quel che vogliamo (filtri, paginazione) e generare in php, esclusivamente lato server, il comando javascript necessario.

Quindi, sempre togliendo tutto il codice non rilevante:

In admin_filebrowser.ctp:

Code block

<table>
<?php
foreach ($assets as $asset):
?>
  <tr>
    <td>
	<?php echo $asset['Asset']['id']; ?>, <strong><?php echo $asset['Asset']['name']; ?></strong>
    </td>
    <td>
	<?php
	// HERE WE ARE
	// generated HTML to be embedded in CKeditor
	$insert = $html->link(
	  $html->image('icons_small/attachment.png',
	    array('width' => 14, 'height' => 14, 'align' => 'absmiddle',
	    'alt' => __('attached file', true),
	   'title' => __('attached file', true),'border' => 0
	   )
    ) . ' ' . __( $asset['Asset']['name'], true),
	array('controller' => 'assets', 'action' => 'show',$asset['Asset']['id'], 'admin' => false),
array('escape' => false),null,false
);
 
//then the javascript lnk that will inject the generated html in ck editor
 
    echo $html->link(
	$html->image('icons/attachment.png', array('alt' => 'allega', 'title' => 'allega', 'border' => 0, 'align' => 'absmiddle')) .
	   $html->image('icons/link.png', array('alt' => 'allega', 'title' => 'allega', 'border' => 0, 'align' => 'absmiddle')) .
	 __('Embed this file', true),
 
//'javascript:;',
	'javascript:InsertHTML(\''. $insert .'\');',
 
	array('escape' => false,
 
	//'onclick' => 'javascript:InsertHTML(\''. $insert .'\');'
    ),
    null, false
    );
    ?>
 
   </td>
  </tr>
<?php endforeach; ?>
</table>

Tutto qua. E’ sufficiente per iniettare quel che vogliamo nel testo. In questo caso, si tratta del nome/titolo del file con un link che punta alla visualizzazione del file (un’azione che, in caso di immagini, le visualizza a risoluzioen originale, oppure usa la media view di cakephp per far scaricare il file).

Ad esempio:

assets_controller .php

Code block

<?php
function show ($id) {
	$this->view = 'Media';
	$this->Asset->recursive = -1;
 
	$asset = $this->Asset->find('first', array('conditions' => array('Asset.id' => $id)));
 
//ClassRegistry::init('Inflector');
 
	$name = Inflector::slug(substr($asset['Asset']['name'], 0, -3));
 
	$download = false;
 
	if($asset['Asset']['medium_type'] != 'img') $download = true;
 
	$params = array(
		'id' => $asset['Asset']['basename'],
		'name' => $name,
		'download' => $download,
		'extension' => substr($asset['Asset']['basename'], -3),
		'path' => 'media' . DS . $asset['Asset']['dirname'] . DS,
		'cache' => true
	);
 
	$this->set($params);
 
	$this->render();
}
 
?>

nell’immagine, uno screenshot del popup “filebrowser”.

(si, avrei bisogno di un designer. Davvero. Ma mi manca il budget. Beh, lo stesso template di questo blog è fatto in 30 minuti con artisteer. Siate gentili)

Se qualcuno è interessato, cercherò di pubblicare l’intero codice rilevante “pulito”.Alla fine forse l’intera applicazione verrà rilasciata con una licanza libera. C?è ancora molto tempo..

Nei prossimi articoli della serie: immagini, webservices (yuotube e flickr).

E, come sempre: non sono un super esperto di cakephp – probabilmente ci sono modi migliori per scrivere il codice o per fare le stesse cose. I suggerimenti sono benvenuti