Dall'archivio script > ASP.NET MVC

Utilizzare CLEditor per consentire l'input di HTML in ASP.NET MVC

di Marco De SanctisMarco De Sanctis, in ASP.NET MVC,

Quando realizziamo un'applicazione di tipo CMS, tipicamente dobbiamo dare ai gestori del sito la possibilità di inserire in maniera semplice contenuti HTML. Esiste un gran numero di librerie javascript che possono risultare utili allo scopo e, tra queste, CLEditor è un esempio freeware e open source, che garantisce allo stesso tempo semplicità di utilizzo e funzionalità di alto livello.

Dato che, inoltre, è disponibile come package NuGet, l'installazione è assolutamente banale: basta infatti ricercarlo all'interno della libreria online e decidere di includerlo nel progetto, per far sì che tutte le dipendenze (jQuery) e i file grafici e di stile siano copiati nelle cartelle opportune.

Il modo più strutturato per utilizzare questo componente è quello di realizzare un editor template che potremo sfruttare tutte le volte che dobbiamo gestire un input di tipo HTML; l'idea, allora, è quello di inserire all'interno della cartella Shared\EditorTemplates una nuova view, che chiameremo HtmlEditor, simile alla seguente:

@Html.TextAreaFor(x => x, new { @class = "cleditor" })

Come possiamo notare, si tratta di una semplicissima TextArea, alla quale abbiamo aggiunto una classe CSS di nome cleditor, tramite cui individuare, dalla layout page, tutti gli elementi su cui attivare CLEditor:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>@ViewBag.Title</title>
    <link href="@Url.Content("~/Content/jquery.cleditor.css")" 
          rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery-1.7.1.min.js")" 
            type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.cleditor.min.js")" 
            type="text/javascript"></script>
    <script type="text/ecmascript">
        $(function () {
            $('.cleditor').cleditor({ width: 500, height: 140 });
        });
    </script>
</head>
<body>
    @* altro markup qui *@
</body>
</html>

Dopo aver incluso gli opportuni script e file css, infatti, non dobbiamo far altro che eseguire la funzione javascript $.cleditor sulle TextArea individuate dal selector jQuery e i nostri utenti avranno a disposizione un'interfaccia estremamente evoluta per imputare markup HTML.


Per sfruttare il nostro editor template, è sufficiente indicarne il nome quando utilizziamo l'helper EditorFor:

<div class="editor-field">
  @Html.EditorFor(x => x.HtmlProperty, "HtmlEditor")
</div>

Per evitare attacchi di script injection, il runtime di ASP.NET vieta per default il submit di form che contengano tag HTML e, pertanto, è necessario ricordarci di marcare con l'attributo AllowHtml le proprietà del model per le quali invece vogliamo consentire questo tipo di dato.

public class MyViewModel
{
  public string SimpleStringProperty { get; set; }

  [AllowHtml]  
  public string HtmlProperty { get; set; }
}

Sempre per la stessa ragione, quando porteremo in output il contenuto HTML, è necessario sfruttare l'helper Html.Raw per evitare l'encoding del markup:

@this.Model.SimpleStringProperty

@Html.Raw(this.Model.HtmlProperty)

Per approfondimenti

Sito ufficiale di CLEditor
http://premiumsoftware.net/cleditor/

Commenti

Visualizza/aggiungi commenti

| Condividi su: Twitter, Facebook, LinkedIn
Aggiorna

Per inserire un commento, devi avere un account.

Fai il login e torna a questa pagina, oppure registrati alla nostra community.

Approfondimenti

I più letti di oggi