lunedì 7 gennaio 2008

FCKeditor: guida all'installazione e all'uso

Oggi vi parlo di FCKeditor, un ottimo HTML editor da integrare ai nostri form online.

FCKeditor infatti non è un semplice Blocco Note per scrivere il nostro codice in locale, ma un tool da installare nel nostro sito web per permettere agli utenti, o a noi stessi, di scrivere del testo personalizzato, automaticamente tradotto dall'editor in codice HTML completamente validabile.

In questa pagina potete vedere un esempio di come apparirà l'editor nel vostro sito: http://www.fckeditor.net/demo. Naturalmente l'aspetto della barra degli strumenti è completamente personalizzabile. Si possono scegliere tre stili già pronti, oppure se avete la pazienza di crearvi da soli i vari pulsanti, potete addirittura usarne di personalizzati.

COME INSTALLARLO NEL VOSTRO SITO - INTEGRAZIONE CON IL PHP

  • Innanzitutto scaricate l'ultima versione disponibile dall'area download. A questo punto scompattate lo zip in una cartella del vostro sito.
  • Prendete la pagina .php in cui volete inserire l'editor, e aggiungete, a inizio pagina, il seguente codice (naturalmente il percorso è da modificare a seconda di dove avete inserito la cartella fckeditor):

<?php
include_once("fckeditor/fckeditor.php") ;
?>
  • A questo punto supponiamo di voler utilizzare l'editor all'interno di un form. Solo in questo modo infatti potremo recuperare e riutilizzare il codice HTML prodotto dallo stesso. Nella pagina dovremo scrivere:


<?php
include_once("fckeditor/fckeditor.php") ;
?>
<html>
<head>
<title>FCKeditor - Sample</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>

<body>
<form action="send.php" method="post">
<?php
$oFCKeditor = new FCKeditor('testo') ;
$oFCKeditor->BasePath = '/fckeditor/' ;
$oFCKeditor->Value = 'Inserisci qui il testo';
$oFCKeditor->Create() ;
?>
<br>
<input type="submit" value="Submit">
</form>
</body>
</html>




  • Così facendo potremo recuperare, nella pagina send.php, il codice prodotto, che è contenuto nella variabile $_POST['testo'].

COME MODIFICARE L'ASPETTO DELLA BARRA DEGLI STRUMENTI

Non si tratta di una modifica di immediata comprensione, ma vedrò di essere il più chiara possibile :)
  • Aprite il file fckconfig.js, che trovate all'interno della cartella fckeditor.
  • Cercate la riga FCKConfig.SkinPath = FCKConfig.BasePath + 'skins/default/' ; .
  • Tra gli stili presenti, oltre a "default", quello indicato nella riga precedente, potete scegliere "silver" o "office2003". E' sufficiente sostituire la parola "default" con una di queste due per avere subito un aspetto diverso. Gli stili sono contenuti all'interno della cartella fckeditor/editor/skins/.
  • Sempre nel file fckeditor.js trovate molti altri settaggi. Dal nome della variabile dovreste capire automaticamente di cosa si tratta :)
  • Se vogliamo creare la nostra personale barra degli strumenti senza andare a modificare quelle già presenti, copiamo la barra di strumenti di default:FCKConfig.ToolbarSets["Default"] = [.......]; e rinominiamola a nostro piacimento (es. FCKConfig.ToolbarSets["Miosito"] = [.......];). Al suo interno lasciamo tutte le voci che ci interessano, e cancelliamo quelle che non vogliamo far apparire, avendo cura di cancellare anche gli apici ed eventuali virgole che le delimitano.
  • Sempre nello stesso file possiamo cambiare eventualmente i colori disponibili, i font e molto altro.
  • Apriamo ora il file fckeditor.php. Qui possiamo cambiare l'altezza e la larghezza dell'editor, ma soprattutto possiamo dire al nostro editor di usare la nostra toolbar, modificando la riga $this->ToolbarSet = 'Default' ; in questo modo $this->ToolbarSet = 'Miosito' ;
  • Nella cartella fckeditor/editor/css troviamo infine i css che determinano l'aspetto del nostro editor (fck_internal.css) e i css che determinano invece l'aspetto degli stili che possiamo applicare al testo creato con il nostro editor (fck_editorarea.css).

ALTRE INFORMAZIONI

Il LAU gli dedica questo interessante articolo: http://lau.csi.it/realizzare/accessibilita/linguaggi_programmazione/FCKEditor/documentazione.shtml

E questa è la guida completa per l'integrazione con il PHP:
http://docs.fckeditor.net/FCKeditor_2.x/Developers_Guide/Integration/PHP

26 commenti:

Luca ha detto...

Ciao, grazie innanzi tutto per la guida…
Ho una domanda da farti. Ho usato FCKEditor con ASP e ho visto che chi l’ha settato, ha abilitato la possibilità di eliminare un file dal server. E se si posiziona su un’immagine, si vede l’anteprima.
Te lo mostro in quest’immagine.
http://www.fckeditor.net/forums/download/file.php?id=99
Sapresti aiutarmi a farlo anche in PHP?
Grazie!!

elisa.cucco ha detto...

Ciao Luca,
non mi vorrei sbagliare ma credo che tu ti riferisca a CKFinder integrato in FCKEditor. Per vedere un esempio clicca qui. A fine pagina vedrai una textarea FCKeditor Integration, clicca sul pulsante immagine nella toolbar e quindi su Cerca nel Server nella prima schermata che appare.
E' quello che intendevi?

lorenzo ha detto...

Prima di tutto grazie per queste preziose informazioni!!!!
Ho riscontrato un problema, ho inserito il codice nella pagina in cui volevo includere l'editor, ma visualizzo solo il tasto submit, mentre quello che dovrebbe essere l'editor viene un bel "The page cannot be found". Ho controllato il percorso del file fckeditor.php e mi sembra tutto ok???
Sapresti aiutarmi???
Grazie

elisa.cucco ha detto...

E' sicuramente un problema di percorso dei file. Magari postami il codice che hai usato per inserire l'editor e dimmi la posizione esatta della cartella così controlliamo insieme!

lorenzo ha detto...

Il cosice che ho inserito nella pagina e' il seguente:

include_once('fckeditor/fckeditor.php');


il file nel quale ho inserito questo codice si trova qui (ti posto l'url completo):
http://www.fratellimungai.it/public/vivaimungai/mag_edit.php

mentre il file fckeditor.php si trova qui:
http://www.fratellimungai.it/public/vivaimungai/fckeditor/fckeditor.php

Grazie mille!!!!

elisa.cucco ha detto...

Il percorso sembrerebbe corretto... Prova a sostituire

include_once('fckeditor/fckeditor.php');

con

include_once('http://www.fratellimungai.it/public/vivaimungai/fckeditor/fckeditor.php');

Questa dovrebbe essere la prova del nove!

lorenzo ha detto...

Ho provato ma mi restituisce questo errore:
Warning: include_once() [function.include-once]: URL file-access is disabled in the server configuration in D:\Inetpub\webs\fratellimungaiit\public\vivaimungai\mag_edit.php on line 2

Warning: include_once(http://www.fratellimungai.it/public/vivaimungai/fckeditor/fckeditor.php) [function.include-once]: failed to open stream: no suitable wrapper could be found in D:\Inetpub\webs\fratellimungaiit\public\vivaimungai\mag_edit.php on line 2

Warning: include_once() [function.include]: Failed opening 'http://www.fratellimungai.it/public/vivaimungai/fckeditor/fckeditor.php' for inclusion (include_path='.;c:\php\includes') in D:\Inetpub\webs\fratellimungaiit\public\vivaimungai\mag_edit.php on line 2


Fatal error: Class 'FCKeditor' not found in D:\Inetpub\webs\fratellimungaiit\public\vivaimungai\mag_edit.php on line 11

booohhh!!!!
ma le cartelle che carico sul server devono avere tutte il permesso di lettura e scrittura per caso????

lorenzo ha detto...

Ciao Elisa!!!!
Ho trovato la soluzione!!!!
alla riga 12 dello script, che
si trova nella pagina in cui ho inserito l'editor c'era una variabile dichiarata cosi':

$oFCKeditor->BasePath = '/fckeditor/' ;

l'ho cambiata in questo:

$oFCKeditor->BasePath = 'fckeditor/' ;

(In pratica ho tolto lo slash prima di fckeditor)
e ora funziona!!!!!
Grazie dell'aiuto!!!!

elisa.cucco ha detto...

Mi fa piacere che tu abbia risolto! Purtroppo non sono riuscita ad aiutarti molto perchè sto lavorando su un progetto e non mi posso permettere di perdere molto tempo! Ci avrei pensato su stasera dopo cena, ma visto che hai fatto tutto da solo, bene così!

Buon lavoro!

rafland ha detto...

Ciao Elisa,
grazie al tuo post sono riuscito a settare Fckeditor e funziona benissimo!
Sto perdendo un pò di tempo nel cercare di prendere una notizia dal database inserita con fckeditor e di riuscirla a modificare in maniera visuale per poi aggiornare la notizia nel database, ho fatto vari tentativi falliti, mica mi potresi dare delle indicazioni?
Grazie per la guida!
Raffaele

elisa.cucco ha detto...

Ciao rafland!

Il tuo quesito ha una risposta molto semplice.
Innanzitutto la notizia si deve trovare in un campo di tipo TEXT.
Poi semplicemente con una SELECT estrai il testo della notizia e con un "echo" lo stampi nella textarea.
Al click sul submit effettui un post del valore della textarea così com'è, tag inclusi, e lo salvi nel db con una INSERT.

rafland ha detto...

Grazie per la risposta!
Adesso mi ci metto e ti farò sapere.

Complimenti per la tua disponibilità

Ciao
Raffaele

rafland ha detto...

Ciao Elisa,

obiettivo raggiunto!

ti ringrazio nuovamente.

Ciao
Raf

alessandro ha detto...

fino ad ora è la pagina con maggiori dritte su questo benedetto editor. grazie
ora passo al mio problemino
ho installato fck, mi funziona alla grande, l'ho modificato etc etc, tutto questo su localhost poi una volta pubblicato ... ho risolto quasi tutto ma per quanto riguarda il caricamento delle immagini ancora no.
quando vado a cercare la mia img sul server e ci clicco sopra mi da questo percorso

../../../../../admin/upfiles/images.gif

ma non mi visualizza nulla nella textarea, solo se sostituisco agli ../etc etc il mio percorso assoluto funziona. come risolvo ? come posso dagli direttamente il percorso assoluto

grazie dell'aiuto che mi potrai dare e ... buon anno

elisa.cucco ha detto...

Ciao Alessandro. Perdonami per il ritardo con cui ti rispondo.
Innanzitutto ti consiglio di passare a CKEditor, il degno erede e successore di FCKEditor.
In secondo luogo, per caricare una immagine dal tuo pc al server devi usare una applicazione come ckfinder, che io personalmente non ho mai utilizzato. Altrimenti devi prima caricare le tue immagini via ftp, e poi dare il giusto collegamento con il pannello "Proprietà immagine". Nell'url ti consiglio di utilizzare il percorso assoluto per non avere problemi!

Anonimo ha detto...

Ciao Elisa e complimenti per la tua attività e per questa guida meravigliosa.
Ho qualche problema con FCKeditor perchè devo digitare sempre due volte l'indirizzo del link. La prima volta lo sostituisce da solo con un indirizzo "java..." etc.
Poi ti sarei molto grato se mi aiutassi a scoprire come si fa ad aggiungere un font nel menu a tendina del toolbar dei font.
Grazie in anticipo per la tua disponibilità
Stefano

vodkaeluna ha detto...

Ciao Elisa,
ho FCKEditor 2.3 e sono su Aruba.
Uso Firefox e ho alcuni problemi di visualizzazione delle pagine con Explorer.
La modalità è Quirks mode e non so come passare a uno standard che vada bene anche per IE.
Anche io, come il post precedente, vorrei sapere com posso aggiungere font alla stringa.
Grazie e complimenti per la guida.
Lorenzo

Mario ha detto...

Ciao Elisa, complimenti per questo tutorial.
Dopo aver seguito il tutorial, e aver letto le tue risposte, ho visto che c'è la nuova versione di CKEDITOR, sapresti dirmi cortesemente, come funziona?
Perchè seguendo i passi di FCKEDITOR non riesco a farlo funzionare..
Grazie mille...

Se puoi cortesemente inviami anche una mail.

E-mail:ant_agonia@hotmail.com

Mario ha detto...

Ciao Elisa sono sempre Mario, scusami se ti riscrivo al volo, ma ho risolto...
Quindi, non preoccuparti.
ti ringrazio.
Buona giornata e buon lavoro.

Mario ha detto...

Ciao Elisa, scusami ancora...
Il problema è questo, non riesco ad inviare i dati attraverso jQuery...
faccio cosi ma non funziona:


Come si inviano sti maledetti dati con CKEDITOR?
grazie mille...

Davide ha detto...

Ciao Elisa,
grazie mille per questa guida, mi e' stata veramente utile per far funzionare fck editor.
Ho solo un piccolo problema, ovvero nella visualizzazione delle immagini.

Fck mi salva correttamente le immagini che carico nella cartela di destinazione, mi visualizza correttamente l'immagine all'interno dell'editor, la salva anche correttamente all'interno del database, ma quando tento di stamparla a video, facendo una select e poi un echo, non mi visualizza nulla, visualizzando il sorgente della pagina visalizzo il tag <img src= ecc..., ma comunque non me lo stampa e' come se rimanesse nasconsta.
premetto che sto lavorando in locale.

sapresti mica darmi qualche dritta?

grazie mille Davide

Anonimo ha detto...

Ciao,
Approdo per la prima volta a questa pagina, dopo un paio di giorni in cui non faccio altro che cercare un modo per configurare la toolbar di fckeditor a mio piacimento. Immagino dalla data di pubblicazione che il tuo post si riferisca a una versione diversa dall'attuale 3.4, perché seguendo passo passo le tue indicazioni non ho combinato granché. In fckconfig.js ho duplicato una toolbar e l'ho chiamata custom, ho tolto alcuni bottoni e sono passato a fckeditor.js (c'è anche questa) dove ho settato la nuova barra. Poi sono passato a fckeditor.php che include due file fckeditor_php4.php e fckeditor_php5.php e anche in questi ho modificato il nome della barra. Ma alla fine, in pagina, mi sparisce e mi si apre un alert che mi dice che la toolbar Custom non esiste. Hai qualche idea? Potrei essertene eternamente grato.
Grazie.
Roberto

Anonimo ha detto...

Ciao Elisa,
grazie per questa guida davvero utile.
Ho riscontrato però un problema, ho la versione più recente di FCKeditor dal nome CKEeditor.

Il codice da inserire nel corpo della pagina è leggermente diverso, lo posto qui sotto:


$CKEditor = new CKEditor();
$CKEditor->returnOutput = true;
$code = $CKEditor->editor("editor1", "");

echo $code;



Viene visualizzato tutto correttamente, il problema è che non riesco ad inviare il testo inserito nell'editor nel database MySql.

Devo usare la variabile $_POST, ma non so che nome dare alla variabile.
Ho provato anche a modificare questa parte di codice:

$CKEditor = new CKEditor('testo');

aggiungendo 'testo' ma mi da errore :(

In attesa di un tuo riscontro,
ti saluto

Skifoso ha detto...

Complimenti, grazie per la guida, voglio implementarla nel mio sito.
Forssa Padova.

Anonimo ha detto...

salve ma ho notato che la cartella è ckeditor e dunque il path non fuonziona,
malgrado possa cambiare il nome cartella! Qualcuno mi aiuta per favore ???? :(

Anonimo ha detto...

Salve,
malgrado abbia capito che si tratta di cosa piuttosto semplice, nn riesco ad implementare ckeditor in pagine ASP.
E' possibile?
Esiste guida?
Grazie, Francesco

Posta un commento