Dopo aver visto come creare un semplice blog con CakePHP, ho pensato di aggiungere un editor WYSIWYG (what you see is what you get) per rendere più intuitivo l’inserimento e la modifica di testo in un articolo.
Per fare ciò ho seguito questo tutorial che spiega come aggiungere TinyMCE (uno dei più diffusi editor WYSIWYG) a CakePHP. I passi da seguire sono i seguenti:
- scaricare TinyMCE da qui, estrarre il file compresso e copiare la cartella tinymce/jscripts/tiny_mce in /webroot/js
- creare un nuovo layout default.thtml nella cartella /cake/app/views/layouts con questo codice di base:
- aggiungere questo codice in ogni file di tipo view in cui vogliamo mostrare l’editor:
<html>
<head>
<title><?php echo $title_for_layout?></title>
<?php
if(isset($javascript)):
echo $javascript->link(‘tiny_mce/tiny_mce.js’);
endif;
?>
</head>
<body>
<?php echo $content_for_layout ?>
</body>
</html>
<script type=”text/javascript”>
tinyMCE.init({
theme : “simple”,
mode : “textareas”,
convert_urls : false
});
</script>
Alcuni consigli personali:
- il codice del punto 3. potete inserirlo direttamente nel file default.thtml, se pensate di usare l’editor in tutte le views che avete creato
- attenzione al codice
<?php
if(isset($javascript)):
echo $javascript->link(‘tiny_mce/tiny_mce.js’);
endif;
?>che deve stare prima del tag </head> della pagina html, altrimenti non funzionerà l’editor! Per questo motivo non potete inserire il codice visto al punto 2. direttamente nelle views, perché verrebbe caricato dentro il <body> (e quindi dopo il tag </head>) della pagina html.
- potete modificare il layout creato al punto 2. caricando i fogli di stile css ed usando i tag <div> nel <body> della pagina (ad esempio potremmo creare un div header per l’intestazione, un div content per il contenuto e un div footer per il piè di pagina), in modo da applicare uno stile ben definito al nostro documento.
