Occupandomi del backend della nuova piattaforma, mi sarebbe piaciuto utilizzare una semplice textarea per scrivere i post. Cosa fattibilissima, ma che creava troppi problemi di retrocompatibilità.
Difatti tutti i post che pubblico con piattaforma dblog sono stati ottenuti via FCKEditor. Allora mi son detto che dopo tutto avrei potuto continuare ad usarlo anche sulla nuova piattaforma. E’ un ottimo editor di testo e sapendolo usare con criterio, crea codice perfettamente valido XHTML.
Un punto di forza di FCKEditor è il filemanager integrato. E’ possibile fare upload direttamente dal tool integrato nell’editor e navigare i file con pochi click.
Linkare un’immagine diventa in questo modo molto semplice ed intuitivo. Se non che i link creati da FCKEditor sono relativi. Spiegai in questo articolo il perchè i link relativi dessero problemi e come risolvere su dblog.
La soluzione proposta escludeva di proposito l’agire sui file dell’editor. Il link assoluto si creava tramite un controllo stringa via RegEx in fase di posting dell’articolo.
Dato che la piattaforma che andrò ad usare sarà solo mia, perchè non agire direttamente sul sorgente dell’editor?
Ecco due righe su come forzare il riferimento assoluto ad un file o un’immagine prelavata dal filemanager di FCKEditor.
Configuriamo il FileManager
Come prima cosa, dobbiamo assicurarci di aver configurato a dovere il filemanager. Farlo è abbastanza semplice. Entriamo nella directory /fckeditor/filemanager/browser/default/connectors/. Dentro la directory ci saranno tante sottodirectory quanti sono i linguaggi supportati da fckeditor.
Usando io una piattaforma in php, non posso che usare anche il connector relativo. Per cui entrate nella sotto directory /php/ ed aprire il file config.php.
Prima di tutto abilitate il connettore.
E’ disabilitato per default con valore in false.
In secondo luogo, impostate la directory che ospiterà i file inviati al server, ricordando che l’indicazione da dare è sempre relativa alla root del dominio. Se avete il sito in una sottodirectory regolatevi di conseguenza.
Salviamo e chiudiamo il file, senza dimenticare di dare i giusti permessi di scrittura e lettura alla directory prescelta.
Il link assoluto.
Apriemo il file frmresourceslist.html contenuto in /fckeditor/editor/filemanager/browser/default/. Se abbiamo scaricato l’ultima versione disponibile oggi (la 2.4.3) intorno alla riga 53 dovremmo avere qualcosa del genere.
All’interno di questa funzione troveremo la dichiarazione della variabile sLink, che è quella che crea l’argomento di src o href dei file caricati via file manager.
Subito sopra questa funzione ho dichiarato una nuova funzione che ha il solo scopo di catturare il nome del dominio in cui FCKEditor sta girando.
var Detect = document.location.href;
var Split = Detect.split("/");
var URL = Split[0] + Split[1] + ‘//’ + Split[2];
return URL;
}
La metodologia la ritengo veramente sporca! Se qualcuno ha idee migliori si faccia avanti 🙂
Una volta che ho il nome a dominio, non mi resta che modificare la viariabile sLink aggiungendo da dicitura (in grassetto la modifica).
In questo modo, i link immagine e file, invece di apparire come relativi in formato:
Verranno correttamente scritti a livello assoluto:
Ho però notato un inconveniente in FCKEditor e cioe’ che per esempio quando clicchi sul bottone per rendere il testo in grassetto lui scrive come codice:
<span style=”font-weight: bold;”>TESTO</span>
Feedburner però, se ci hai fatto caso, non so per quale motivo non interpreta correttamente questo codice e per farlo bisogna inserire:
<strong>prova</strong>
Lo stesso vale per il testo in corsivo:
<span style=”font-style: italic;”>TESTO</span>
deve essere:
<i>TESTO</i>
Per il testo sottolineato:
<span style=”text-decoration: underline;”>TESTO</span>
<u>TESTO</u>
E così via!
Lo stesso per i colori!
<span style=”color: rgb(255, 0, 0);”>TESTO</span>
Dovrebbe essere:
<span style=”color:red”>TESTO</span>
E:
<span style=”color: rgb(0, 0, 255);”>TESTO</span>
sarebbe:
<span style=”color:blue”>prova</span>
Ciao! 😉
Ops… certe volte ho scritto prova e certe volte TESTO…
Vabbe’ spero tu abbia capito!
Che versione stai usando?
Testando l’ultima stable disponibile e usando l’editor in php vengono correttamente usati i tag <strong> <em> <strike>.
Sto usando la versione di default in dBlog…
Prova la 2.4.3.
Ho testato solo l’editor in php, ma anche quello in asp dovrebbe reagire allo stesso modo.
La versione inclusa in dblog è abbastanza datata 🙂
In Javascript sono una scarpa, ma non puoi usare ‘document.domain’ ? Se non ho capito nulla e ho detto una cavolata, cancella questo messaggio
!
E’ un buon metodo, ma con document.domain acchiappi solo il nome del dominio.
Non puoi sapere poi se è configurato per girare o meno con prefisso www o se stai in https.
document.location.href invece prende tutto. Lo so è sporco come metodo, ma non mi è venuto in mente niente di meglio…
Ma si può aggiornare la versione del FCKEditor presente in dblog?
Yep!
Devi fare tutto a manina e prestando attenzione. Fra l’altro su server win fornito da Aruba, far funzionare il connectop in asp non è semplicissimo, ma se non ricordo male ho scritto qualcosa su come risolvere (anche perchè io in altri siti riuscivo ad usarlo senza problemi)
Forse dico una cavolata ma non potrebbe funzionare inserendo nell’header il tag:
<base href=”http://www.urldelsito.dominio”>
?
Carissimo DAVIDONZO stavo leggendo questo articolo e mi chiedevo se avevi anche scoperto qual'è la variabile che crea il LINK vero e proprio nel pannello di FCK: COLLEGAMENTO.
Mi spiego meglio dovrei riuscire ad infilare dentro al codice "A HREF" creato da FCK:
<p><a href="http://www.miosito.it/public/image/miafoto.jpg"><img height="10" width="10" src="http://www.miosito.it/public/image/miafoto.jpg" alt="Mia foto" /><br />
</a></p>
la dicitura: rel="nomegalleria" in modo da poter utilizzare quegli effetti JAVASCRIPT tipo gallerie LIGHTBOX o CLEARBOX
GRAZIE MILLE
Grandissimo!!!
Era proprio quello che cercavo per risolvere il problema nell'invio di immagini nelle mailing list.
Io dovrei avere una versione più recente di FCKeditor, rispetto a quella indicata in questo post, ma il numero di riga slitta solo di un paio di numeri in avanti.
Inoltre ho sostituito questo codice (dopo aver aggiunto la tua funzioncina a monte):
var sLink = '<a href="#" onclick="OpenFile('' + ProtectPath( fileUrl ) + '');return false;">' ;
con questo:
var sLink = '<a href="#" onclick="OpenFile('' + ServerName() + ProtectPath( fileUrl ) + '');return false;">' ;
e funziona tutto alla grandissima!!!
Grazie come sempre e buon lavoro.
Max Fabran