Configurare CKEditor

CK Editor è un editor html che può essere facilmente integrato nelle pagine del proprio sito. E' sviluppato interamente in JavaScript ed è un prodotto free ed open source.

CKEditor viene spesso usato nei forum e nei blog e permette di inserire testo formattato ed elementi html come link, tabelle, elenchi, ecc.
In parole povere trasforma una semplice textarea in un editor simile a Microsoft Word.
I pulsanti presenti nella toolbar sono personalizzabili, così come il comportamento dell'editor stesso. 

CKEditor è scaricabile dal sito ufficiale dove è presente anche la documentazione e un forum per il supporto. Una volta scaricato si possono consultare gli esempi contenuti nella cartella samples.
Sarebbe ridondante riportare anche qui la configurazione di base.

Esistono anche altri editor validi come TinyCME ma personalmente preferisco CKEditor.

Integrazione con Asp.Net

E' possibile integrare la versione di CKEditor 3.x con Asp.Net. Questo significa utilizzare l'editor come un controllo Asp.Net e configurarlo tramite codice C# o VB.Net lato server.
Sul sito è presente una bella documentazione passo a passo.

Il problema è che alcune funzionalità a mio parere indispensabili sono state introdotte solo nella versione 4.x pertanto consiglio di usare l'implementazione standard tramite JavaScript. Questa soluzione può risultare comoda per il riutilizzo del codice ad esempio volendo trasferirlo su un'applicazione sviluppata in php.

Configurazione

Il comportamento di default di CKEditor è molto blindato: non è possibile inserire classi css personali e stili in linea, vengono generati inutilmente paragrafi vuoti, il codice sorgente viene modificato in maniera inaspettata. Secondo il creatore dell'editor questi sono comportamenti voluti, secondo altri si tratta di bug. Per fortuna è possibile configurare l'editor in modo che faccia esattamente quello che vogliamo noi.

Riporto il codice html e javascript usato nel backoffice del sito dev-oclock.com nella sezione inserimento/modifica articolo. Nel mio caso è necessaria una grande precisione del codice html visto che deve essere totalmente personalizzato e alla fine deve essere considerato valido dal w3c.

<textarea runat="server" id="txtTesto" tabindex="8" cols="80" rows="10" clientidmode="Static"></textarea>
<script language="javascript" type="text/javascript" src="/ckeditor/ckeditor.js"></script>
<script language="javascript" type="text/javascript">
    CKEDITOR.replace('txtTesto', {
        allowedContent: true,    //permette che vengano specificati gli attributi CLASS nei tag
        on:
        {
            //necessario per mantenere ritorni a capo e indentazione all'interno dei tag PRE
            instanceReady: function (ev) {
                this.dataProcessor.writer.setRules('pre',
                {
                    indent: true,
                    breakBeforeOpen: true,
                    breakAfterOpen: false,
                    breakBeforeClose: false,
                    breakAfterClose: true
                });
            }
        }
    });
    
    //specifico un foglio di stile da applicare al contenuto della textarea in modalità wysiwyg
    //in questo modo durante la digitazione ho un'anteprima fedele al risultato finale
    CKEDITOR.config.contentsCss = '/ckeditor/ckeditor.css';

    //evita che vengano aggiunti inutili paragrafi vuoti <p>&nbsp;</p> in automatico
    CKEDITOR.config.autoParagraph = false;

    //fa sì che le html entities vengano elaborate correttamente;
    //lato server in fase di caricamento pagina in modalità modifica: txtTesto.InnerHtml = articolo.Body.Replace("&", "&amp;")
    //http://komlenic.com/246/encoding-entities-to-work-with-ckeditor-3/
    CKEDITOR.config.entities = false;
    CKEDITOR.config.htmlEncodeOutput = false;

    //Toolbar: seleziono solo i pulsanti che mi servono
    //http://ckeditor.com/latest/samples/plugins/toolbar/toolbar.html
    CKEDITOR.config.toolbar = [
        { name: 'document', groups: ['mode', 'document', 'doctools'], items: ['Source'] },
        { name: 'tools', items: ['Maximize'] },
        { name: 'clipboard', groups: ['clipboard', 'undo'], items: ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo'] },
        { name: 'editing', groups: ['find', 'selection'], items: ['Find', 'Replace', '-', 'SelectAll'] },            
        { name: 'paragraph', groups: ['list', 'indent', 'blocks', 'align', 'bidi'], items: ['NumberedList', 'BulletedList', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'] },
        '/',
        { name: 'styles', items: ['Styles', 'Format'] },
        { name: 'basicstyles', groups: ['basicstyles', 'cleanup'], items: ['Bold', 'Italic', '-', 'RemoveFormat'] },
        { name: 'links', items: ['Link', 'Unlink'] },
        { name: 'insert', items: ['Table', 'HorizontalRule', 'SpecialChar'] },
        { name: 'colors', items: ['TextColor', 'BGColor'] },
        { name: 'others', items: ['-'] }
    ];

    //elementi presenti nel menu a tendina 'Format'
    CKEDITOR.config.format_tags = 'p;h1;h2;h3;div';
</script>

Questo è il risultato finale:

Autore: Sergio Roberto Boarina