29 dicembre 2007  6

BBCode Toolbar extension per BlogEngine.NET 1.3

English version of this post

Dal giorno del rilascio della nuova release di BlogEngine.NET ho dovuto dedicare gran parte del mio tempo all'adeguamento di tutte le personalizzazioni che avevo implementato nella versione precedente. Queste attività si sono rese necessarie in virtù dell'introduzione del nuovo extension manager che consente una maggiore flessibilità nella gestione dei plug-in (o estensioni) dando la possibilità non solo di attivarli o disattivarli in maniera selettiva, ma anche di configurarne i parametri (se disponibili) direttamente dal pannello di amministrazione del blog.

Per questo motivo, la fase di upgrade (che sarebbe del tutto lineare su un'installazione standard di BlogEngine) sta diventando più lunga del previsto, dato che sto provvedendo alla conversione in estensioni di tutte le funzionalità aggiuntive che avevo sviluppato per la vecchia piattaforma.

La prima estensione implementata secondo le nuove specifiche è la BBCode Toolbar, ovvero una piccola collezione di pulsanti che consente l'inserimento automatico dei metatag in standard BBCodeW all'interno della textarea dedicata all'inserimento dei commenti. La toolbar può essere posizionata in un qualunque punto del form dedicato all'inserimento dei commenti ma, sia per motivi estetici che funzionali, è preferibile immediatamente al di sopra della casella demandata all'inserimento del testo (come visibile in figura)

I singoli pulsanti consentono sia l'inserimento semplice della coppia di metatag associati (ad esempio: [b][/b]) che l'inserimento successivo alla selezione di un testo all'interno della textarea; in tal caso i metatag di apertura e chiusura del BBCode scelto veranno inseriti rispettivamente all'inizio ed alla fine del testo stesso (ad esempio: [b]testo selezionato[/b])

Dal pannello di configurazione dell'estensione è possibile:

  1. Mostrare o nascondere i pulsanti
  2. Personalizzare l'etichetta di ciascun pulsante e la formattazione della stessa (usando la sintassi CSS standard)
  3. Aggiungere nuovi pulsanti (o rimuovere gli esistenti)

L'uso della BBCode Toolbar è vincolato alla presenza (e relativa attivazione) nel sistema dell'estensione BBCode, che ricordo, dalla versione 1.3 di BlogEngine, è comunque installata di default. Ciò significa che prima di aggiungere nuovi pulsanti è necessario aggiungere prima i relativi metatag nel pannello di controllo dell'estensione dedicata.

Installazione

Scaricare l'archivio compresso BBCodeToolbar.zip (8,80 kb), quindi:

  1. Copiare il file BBCodeToolbar.cs nella cartella /App_Code/Extensions/
  2. Copiare il file BBCodeToolbar.js nella cartella /User controls/
  3. Copiare il file CommentView.ascx nella cartella /User controls/
    sovrascrivendo il file esistente
  4. Copiare i file errors.it.resx ed errors.resx
    nella cartella /App_GlobalResources/

Se sono state effettuate delle personalizzazioni al file CommentView.ascx è possibile saltare i passaggi 3 e 4: aprire il file medesimo con un editor di testo, Visual Studio o Visual Web Developer ed inserire nella posizione in cui si vuole inserire la toolbar la seguente riga di codice

<%=BBCodeToolbar.Toolbar() %>

Il nuovo file CommentView.ascx oltre a contenere il codice per la visualizzazione della BBCode ToolBar è stato anche modificato per:

  • Mostrare il numero totale di commenti all'inzio della lista degli stessi
  • Mostrare i messaggi di errore dovuti ad errata compilazione del form di commento anche in italiano (oltre che in inglese nel caso in cui la localizzazione del browser client sia diversa da quella in lingua italiana)

Personalizzazione

L'aspetto della della BBCode Toolbar può essere personalizzato creando la classe BBCode all'interno del foglio di stile associato al tema utilizzato. La toolbar è racchiusa all'interno della coppia di tag HTMLW


<div class="bbcode">...</div>

mentre i singoli pulsanti sono creati mediante i tag HTML standard 


<input type="button" ... />

Altre estensioni ...

BBCode Toolbar extension for BlogEngine.NET 1.3

This extension adds one toolbar of buttons in order to automatically insert the BBCode in the textarea dedicated to the comments.

From the configuration panel of the extension you can:

  1. Show or hide buttons.
  2. Personalize the label of every button and the format of the same one (using standard CSS sintax).
  3. Add new (or remove) buttons.

System requirements:

  • BlogEngine.NET 1.3
  • BBCode extension (default in BlogEngine.NET 1.3)

Installation

Download the compressed file BBCodeToolbar.zip (8,80 kb), then:

  1. Copy BBCodeToolbar.cs into /App_Code/Extensions/ folder
  2. Copy BBCodeToolbar.js into /User controls/ folder
  3. Overwrite CommentView.ascx into /User controls/ folder
  4. Copy errors.it.resx and errors.resx into /App_GlobalResources/ folder

If you have customized CommentView.ascx then do not execute step 3 and 4, but insert

<%=BBCodeToolbar.Toolbar() %>

into CommentView.ascx source where you want to display the toolbar.

Customization

You can customize the aspect of BBCode Toolbar: simply create (and edit) the BBCode class in stylesheet of your preferred theme.

More extensions ...

P.S.: i'm sorry for my poor english

Esprimi il tuo giudizio

Commenti (6) -

Emanuel
Emanuel
29 dic 2007 alle 23:38  01
Ottimo Lavoro Cristiano
Tobaldo
Tobaldo
01 gen 2008 alle 18:38  03
Ottimo lavoro Cristiano ! Installata e configurata in 10 minuti !
Cristiano
Cristiano
02 gen 2008 alle 15:19  04
@ Emanuel  e @ Tobaldo:
Vi ringrazio entrambi! A breve anche l'estensione per la toolbar presente in calce ad ogni commento.

Tobaldo
Tobaldo
02 gen 2008 alle 23:01  05
Cristiano ha scritto:
@ Emanuel  e @ Tobaldo:
Vi ringrazio entrambi! A breve anche l'estensione per la toolbar presente in calce ad ogni commento.

Cavolo ! Sarebbe utilissimissimo ! In effetti nel mio blog manca proprio questa feature, la prima cosa che avevo pensato che sarebbe stato utile aggiungere. Grazie !
sanghino
sanghino
04 gen 2008 alle 18:03  06
Bello, ottimo lavoro.
Ho avuto solo un po' di problemi a configurare le dimensioni dei bottoni, se lo facevo da foglio di stile del mio tema se ne infischiava allegramente. Ho risolto aggiungendo direttamente dalla gestione delle estensioni ...
font-weight:bold; width: 50px;
così mi funziona benissimo ....

Ciao
Cristiano
Cristiano
04 gen 2008 alle 19:23  07
@ sanghino:
E' preferibile lasciare l'impostazione:

width: auto;

per la proprietà di stile associata al pulsante nel pannello di controllo di BBCodeToolbar. Questo ti assicura che cambiando il tema i pulsanti assumano automaticamente la dimensione corretta in base alla larghezza dell'etichetta associata.

Per impostare l'aspetto grafico del pulsante dal foglio di stile, invece, rimuovi

width:auto;

da ciascun pulsante dal pannello di controllo di BBCodeToolbar e usa la seguente definizione di classe:

.bbcode input[type=button]
{      
    width: 50px;
   /* ... inserire qui le altre proprietà */
}

Pingbacks and trackbacks (2)+

Aggiungi Commento

biucitecode
  • Commento
  • Anteprima
Loading


| |   |  

Codice QR

Codice QR - cristianofino.net

Ultimi Commenti