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 CLEditorhttp://premiumsoftware.net/cleditor/
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Utilizzare Container Queries nominali
Miglioramenti nelle performance di Angular 16
Migrare una service connection a workload identity federation in Azure DevOps
Usare i servizi di Azure OpenAI e ChatGPT in ASP.NET Core con Semantic Kernel
Persistere la ChatHistory di Semantic Kernel in ASP.NET Core Web API per GPT
Proteggere le risorse Azure con private link e private endpoints
Gestire i dati con Azure Cosmos DB Data Explorer
Il nuovo controllo Range di Blazor 9
Introduzione alle Container Queries
Cancellare una run di un workflow di GitHub
Supporto ai tipi DateOnly e TimeOnly in Entity Framework Core
Utilizzare i primary constructor di C# per inizializzare le proprietà