Bootstrap WYSIWYG Editor in ASP.Net MVC

Introduction

This article introduces how to implement a Bootstrap WYSIWYG editor in an ASP.NET MVC application. There are many editors available over the internet but here we will implement the Summer note editor that is a simple WYSIWYG editor using Bootstrap. Summer note is a JavaScript library that helps us to create a WYSIWYG editor. You can download it from either GitHub or the official site.

Using the Code

Summer note uses the open-source libraries jQuery, Bootstrap and Font Awesome. To implement this in an ASP.NET MVC application we will create an MVC project in Visual Studio. First of all we will create bundles required for both JavaScript and CSS files. The following code snippet shows the BundleConfig class.

using System.Web.Optimization;

namespace BootstrapEditor.App_Start
{
    public class BundleConfig
    {
        public static void RegisterBundles(BundleCollection bundles)
        {
            bundles.Add(new StyleBundle("~/Content/css").Include(
                     "~/Content/css/bootstrap.css",
                     "~/Content/css/font-awesome.css",
                     "~/Content/css/site.css"
                   ));

            bundles.Add(new StyleBundle("~/Content/summernote").Include(
                "~/Content/summernote/summernote.css"
                ));

            bundles.Add(new ScriptBundle("~/bundle/base").Include(
               "~/Scripts/jquery-1.10.2.js",
                "~/Scripts/bootstrap.js"
               ));

            bundles.Add(new ScriptBundle("~/bundle/summernote").Include(
               "~/Content/summernote/summernote.js"
               ));
        }
    }
}

Thereafter we will create a view model (HomeViewModel) that will be bind to the view. The following code snippet shows the HomeViewModel class.

namespace BootstrapEditor.Models
{
    public class HomeViewModel
    {
        public string Title { get; set; }
        public string Content { get; set; }
    }
}

Thereafter we will create a controller that handles GET and POST requests for a view. The following code snippet shows HomeController.

using BootstrapEditor.Models;
using System.Web.Mvc;

namespace BootstrapEditor.Controllers
{
    public class HomeController : Controller
    {
        [HttpGet]
        public ActionResult Index()
        {
            HomeViewModel model = new HomeViewModel();
            return View();
        }

        [HttpPost]
        public ActionResult Index(HomeViewModel model)
        {
            return View(model);
        }
    }
}

Now we will create a view that renders the editor on UI. The following code snippet shows the index view.

@model BootstrapEditor.Models.HomeViewModel
@section head{
    @Styles.Render("~/Content/summernote")
}
<div class="panel panel-primary">
    <div class="panel-heading panel-head">Add Content</div>
    <div class="panel-body">
        @using (Html.BeginForm())
        {
            <div class="form-horizontal">
                <div class="form-group">
                    @Html.LabelFor(model => model.Title, new { @class = "col-lg-2 control-label" })
                    <div class="col-lg-9">
                        @Html.TextBoxFor(model => model.Title, new { @class = "form-control" })
                    </div>
                </div>
                <div class="form-group">
                    @Html.LabelFor(model => model.Content, new { @class = "col-lg-2 control-label" })
                    <div class="col-lg-9">
                        @Html.TextAreaFor(model => model.Content, new { @class = "form-control", @row = 5 })
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-lg-9"></div>
                    <div class="col-lg-3">
                        <button class="btn btn-success" id="btnSubmit" type="submit">
                            Submit
                        </button>
                    </div>
                </div>
            </div>
        }
    </div>
</div>
@section scripts{
    @Scripts.Render("~/bundle/summernote",
                    "~/Scripts/home-index.js")
}

As in the following code snippet, we have a textarea that will be converted to a Summer note text editor. We will use HomeViewModel's Content property for the textarea. That means the content will be its id. Now write a JavaScript file, in that file we will create a text editor on the text area input field. The following code snippet shows that the Summer note text editor renders on the content input field once the web page completes the render.

(function ($) {
    function HomeIndex() {
        var $this = this;

        function initialize() {
            $('#Content').summernote({
                focus: true,
                height: 150,
                codemirror: {
                    theme: 'united'
                }
            });
        }

        $this.init = function () {
            initialize();
        }
    }
    $(function () {
        var self = new HomeIndex();
        self.init();
    })
}(jQuery))

The preceding code is defined in the home-index.js file that was already added to the view page. The summernote() method is the key on input field that generates the text editor on any input field. Now run the application and we will get a result as in the following image.


Figure 1: Text Editor on UI

Now we will click on the submit button to submit the form on the server. Here we will get an error such as:
A potentially dangerous Request.Form value was detected from the client (Content="Welcome to<span style="font-we")

This was because .NET detected something in the entered text that looked like an HTML statement. To disable request validation, we will add the [ValidateInput(false)] to the POST action in HomeController as in the following code snippet.

[ValidateInput(false)]
[HttpPost]
public ActionResult Index(HomeViewModel model)
{
    return View(model);
}