Seleziona una pagina

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, testare applicazioni con XUnit
views 599
Come tutti sappiamo con l’avvento di .Net Core tutto l’ecosistema sta subendo evoluzioni, fin dalla prima versione del progetto ASP.NET MVC Core è sta...
ASP.NET Core, Dependency injection
views 656
In questo articolo parleremo della Dependency Injection, un pattern che consente di creare applicazioni flessibili e semplifica la fase di unit test. ...
ASP.NET Core custom Middleware
views 200
Nel precedente articolo intitolato ASP.NET Core Middleware abbiamo parlato di cosa sono i middleware ed abbiamo visto come usare i middleware buit-in ...
ASP.NET Core Middleware
views 355
"Middleware are software components that are assembled into an application pipeline to handle requests and responses. Each component chooses whether t...