Buongiorno a tutti, oggi vedremo come integrare uno dei più famosi WYSIWYG editor all’interno di un progetto MVC in tre semplici STEP.

Nel Nostro esempio abbiamo creato un Model chiamato Article ed abbiamo creato il controller e le relative View per le normali operazioni di CRUD.

    public class Article
    {
        public int ArticleId { get; set; }
        public string Title { get; set; }
        public string Summary { get; set; }

        public string Body { get; set; }
    }

Di seguito i nostri tre step:

STEP 1 Installazione Script CKEditor

Per installare CKEditor possiamo utilizzare NUGET:

PM> Install-Package CKEditor

STEP 2 Modifica MasterPage

All’interno della pagina di layout _Layout.cshtml comunemente chimata Masterpage, inseriamo una nuova sezione dove andremo ad inserire il riferimento al nostro componente nel tag HEAD dell’HTML:

    @RenderSection("headerScripts", required: false)

STEP 3 Modifica View

Per utilizzare il nostro editor è necessario utilizzare una textbox o una textarea, per istanziare l’editor è possibile sia utilizzare una classe CSS che una semplice chiamata Javascript p.es:

@Html.TextAreaFor(model => model.Body,5,20,htmlAttributes: new{@class="ckeditor" })

Oppure

<script type="text/javascript">
    CKEDITOR.replace('Summary', {
        toolbar: 'Basic'
    });
</script>

Il risultato del codice della View sarà:

@model CKEditorSample.Models.Article

@{
    ViewBag.Title = "Create";
}

<h2>Create</h2>


@using (Html.BeginForm()) 
{
    @Html.AntiForgeryToken()
    
    <div class="form-horizontal">
        <h4>Article</h4>
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        <div class="form-group">
            @Html.LabelFor(model => model.Title, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Title, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Title, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Summary, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Summary, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Summary, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Body, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.TextAreaFor(model => model.Body,5,20,htmlAttributes: new{@class="ckeditor" })
                @Html.ValidationMessageFor(model => model.Body, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Create" class="btn btn-default" />
            </div>
        </div>
    </div>
}

<div>
    @Html.ActionLink("Back to List", "Index")
</div>

@section Scripts {
  @Scripts.Render("~/bundles/jqueryval")

<script type="text/javascript">
    CKEDITOR.replace('Summary', {
        toolbar: 'Basic'
    });
</script>
}
@section headerScripts{
    <script src="~/Scripts/ckeditor/ckeditor.js"></script>
    }

Una volta compilato ed eseguita la pagina avremo il seguente risultato:

Create View CKEditor

Tutto qui!

Happy Coding;)

Altri Articoli

ASP.NET Core Middleware
views 455
"Middleware are software components that are assembled into an application pipeline to handle requests and responses. Each component chooses whether t...
ASP.NET Core Project Start Up
views 237
Pubblicato nella sezione wiki un nuovo tutorial su ASP.NET Core: ASP.NET Core Project Start Up. Questo tutorial spiega passo passo la creazione di un...
Creare una Applicazione ASP.NET Core con CLI e Vis...
views 373
La nuova versione ASP.NET CORE è ormai arrivata alla RC2 (Release Candidate 2), possiamo dire che i tempi sono maturi e nonostante le continue evoluzi...
Benvenuto ASP.NET Core 1.0
views 146
Lo scorso 19 gennaio Scott Hanselman ha annunciato sul suo blog la scelta di modificare il nome della prossima versione di ASP.NET, nel giro di una an...