CKEditor, il miglior text editor per il web

CKEditor, il miglior text editor per il web

Se sei un backend developer, forse ti sarà capitato di dover realizzare un’area riservata per la gestione di news ed articoli.
In questo caso la scelta del text editor più adatto è importante: sarà proprio quello ad essere utilizzato dal tuo cliente e dovrà essere semplice, intuitivo e completo in tutte le sue funzionalità. Io ne ho provati diversi, ma quello che preferisco è senz’altro CKEditor. Ora ti spiego perché.

Cos’è CKEditor?

CKEditor è un editor di testo open source ideato appositamente per il web, ossia un tool che permette la creazione e la gestione di contenuti all’interno di pagine web.
È quello che viene chiamato un WYSIWYG editor (acronimo di What You See Is What You Get): “cioè che vedi è ciò che avrai” una volta che avrai finito di scrivere.
Nonostante sia open source -e quindi completamente gratuito– questo text editor è molto potente e altamente personalizzabile: è possibile, ad esempio, scegliere tra tantissime interfacce grafiche, centinaia di plugin e decine di lingue disponibili, tra cui l’italiano.

Installazione e configurazione di CKEditor

Installare e configurare CKEditor è molto semplice: basta andare sul sito ufficiale e scegliere uno dei pacchetti disponibili tra basic, standard e full. I pacchetti si differenziano tra loro per il numero di funzionalità che includono, ma è possibile anche scegliere un pacchetto personalizzato e selezionare solo alcune delle tante funzioni disponibili.

Una volta scaricata, la cartella va spostata nella root del tuo sito e collegata alle pagine in cui devi includere il text editor.
Includere CKEditor nelle pagine è semplicissimo: è sufficiente scrivere il seguente codice nella head del file:

<script src="ckeditor/ckeditor.js"></script>

Novità: da oggi è disponibile una versione online di CKEditor, ospitata sui server di Amazon. Puoi scegliere di effettuare tutti i passaggi visti finora o limitarti a includere la versione standard utilizzando il seguente codice:

<script src="//cdn.ckeditor.com/4.5.4/standard/ckeditor.js"></script>

A questo punto, non ci resta che attivare l’editor per posizionarlo nel punto esatto della pagina in cui vogliamo visualizzarlo.

Per fare questo, ci serviremo della textarea inclusa nel tag <form> che invierà i dati immessi alla pagina di elaborazione.
Il codice da sostituire al tag <textarea> è il seguente:

<textarea id="idtextarea" name="nometextarea"></textarea>
<script>
  // Questo script sostituisce la textarea con l'interfaccia
  // di default di CKEditor.
  CKEDITOR.replace( 'nometextarea' );
</script>

In sintesi, dovresti ritrovarti con una roba tipo questa:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>La mia pagina di prova</title>
        <!-- Assicurati che il percorso del file sia corretto. -->
        <script src="ckeditor/ckeditor.js"></script>
    </head>
    <body>
      <form>
        <textarea id="idtextarea" name="nometextarea"></textarea>
        <script>
        // Questo script sostituisce la textarea con l'interfaccia
        // di default di CKEditor.
        CKEDITOR.replace( 'editor1' );
        </script>
      </form>
    </body>
</html>

Se hai fatto tutto correttamente, al posto della tua textarea troverai l’interfaccia di CKEditor con le configurazioni di base che hai scelto durante l’installazione.

Per oggi abbiamo finito! Nel prossimo articolo ti spiegherò come installare funzionalità aggiuntive e ti aiuterò nella configurazione di KCFinder, un utilissimo plugin per il caricamento di file e immagini.

Related Posts