Questo post spera di essere utile per chi come me usa CKEditor anche per modificare pegine web (magari in qualche CMS) e vuole utilizzare lightbox con le proprie immagini. Non solo, anche per chi vorrebbe usarli e non l'ha ancora fatto.
Innanzitutto:
1. Informazioni su CKEditor
2. Informazioni su LightBox
La maggior parte delle informazioni contenute in questo post sono state riprese da questo sito:
http://www.chilipepperdesign.com/2010/01/08/adding-the-rel-and-title-attributes-to-image-links-in-ckeditor-3
Se non avete problemi con l'Inglese potete consultare direttamente il sito originale.
Per tutti gli altri ... buona lettura
Premessa.
Il problema nell'usare lightbox con CKEditor sta nel fatto che alla versione attuale dell'editor non è possibile impostare l'attributo "rel" e "title" per i link nelle immagini. E' possibile inserire il solo attributo "title" dalla finestra di dialogo dei collegamenti (dalle impostazioni avanzate) ma non direttamente dalle immagini.
Quello che andremo a fare è modificare un paio di file di CKEditor in modo per avere due nuovi campi di testo nei quali inserire gli attributi "rel" e "title" direttamente dalla scheda "Collegamento" presente nella finestra di dialogo "Proprietà immagine"
I file che dobbiamo modificare sono 2
- image.js presente nella cartella /plugins/image/dialog
- it.js presente nella cartella /lang/ (o qualsiasi altro file lingua che si vuole modificare)
Modificare questi due file è pressoccè impossibile perchè sono stati compressi ma possiamo utilizzare i file presenti nel codice sorgente (stesse posizioni all'interno della cartella /_source/)
Come procedere
- apriamo il file image.js dal codice sorgente (/_source/plugins/image/dialog/image.js)
- copiamo tutto il contenuto di questo file
- apriamo il file image.js effettivamente usato da CKEditor (/plugins/image/dialog/image.js)
- incolliamo il contenuto del file sorgente nel file usato dall'editor
Tra il contenuto di questo file ci solo alcuni blocchi di codice fatti più o meno così
{
id : 'qualcosa',
qualcos'altro,
qualcos'altro,
qualcos'altro
}
ognuno di questi blocchi è diviso da una virgola
{
blocco1
},
{
blocco2
},
Tranne l'ultimo che ha una graffa di chiusura come tutti ma nessuna virgola.
{
ultimo blocco
}
Questo è molto importante per capire dove andare ad scrivere le modifiche necessarie.
Se qualcosa non funzionerà probabilmente la causa è da imputarsi alla posizione errata utilizzata per inserire il codice.
Come suggerito dall'autore originale dell'articolo in inglese anche io vado ad effettuare le mie modifiche dopo il blocco che ha come id cmbTarget. (nel mio caso alla riga 2291).
Dopo la parentesi graffa di chiusura del blocco cmbTarget inserisco il seguente codice
,{
id : 'txtTitle',
type : 'text',
label : editor.lang.link.advisoryTitle,
'default' : '',
setup : function( type, element )
{
if ( type == LINK )
{
this.setValue( element.getAttribute( 'title' ) );
}
},
commit : function( type, element )
{
if ( type == LINK )
{
if ( this.getValue() || this.isChanged() )
{
element.setAttribute( 'title', this.getValue() );
}
}
}
},
{
id : 'txtRel',
type : 'text',
label : editor.lang.link.rel,
'default' : '',
setup : function( type, element )
{
if ( type == LINK )
{
this.setValue( element.getAttribute( 'rel' ) );
}
},
commit : function( type, element )
{
if ( type == LINK )
{
if ( this.getValue() || this.isChanged() )
{
element.setAttribute( 'rel', this.getValue() );
}
}
}
}
A questo punto i due campi di testo dove inserire gli attributi title e rel sono già visibili nella scheda Collegamento della finestra di dialogo Proprietà immagine.
Manca solo l'etichetta con scritto "rel" sopra l'apposito campo.
Per fare questo come nel caso precedente seguiamo questi passi:
- apriamo il file it.js dal codice sorgente (/_source/lang/it.js)
- copiamo tutto il contenuto di questo file
- apriamo il file image.js effettivamente usato da CKEditor (/lang/it.js)
- incolliamo il contenuto del file sorgente nel file usato dall'editor
All'interno del blocco segnato da // Link dialog inserisco questo piccolo pezzo di codice
rel: 'Rel',
L'autore dell'articolo originale suggerisce di inserirlo tra le voci "styles" e "selectAnchor" ma la posizione è pressoccè indifferente purche sia all'interno del blocco corretto (anche in questo caso i vari blocchi sono strutturati come per il file precedente tra parentesi graffe)
Questo è il risultato nel mio caso
Ora posso usare lightbox ed in generale gli attributi rel e title direttamente dalle proprietà delle immagini.
Fonte:
http://www.chilipepperdesign.com/2010/01/08/adding-the-rel-and-title-attributes-to-image-links-in-ckeditor-3
Dopo la campagna contro 
