Header Ads

ASP.NET MVC5: Rich Text (WYSIWYG) Editor

An interactive website requires interactive components in it for the target audience to interact in a more user friendly way.
Getting long rich content kind of text from the target audience adds a responsibility towards the website to do half of the work for the user e.g. auto spell checker, allowing user to place inline images or links, content indentation etc. These features can be provided individually, but, it will become more cumbersome for the website developer to develop each and every single feature from scratch. For, such matter many amazing affordable rich text editor plugins are available for commercial use.

Today, I shall be demonstrating how to integrate a rich text editor into ASP.NET MVC5 environment. I will be using Summernote Rich Text (WYSIWYG) Editor. This particular plugin is simple to use and the best part that I like about it is that it allows inline images which by far I am at least unable to find at free of cost, simple to use and working inline image media in different plugins that I have evaluated.

Following are some prerequisites before you proceed further in this tutorial:

1) Knowledge of ASP.NET MVC5.
2) Knowledge of HTML.
3) Knowledge of JavaScript. 
4) Knowledge of Bootstrap. 
5) Knowledge of Jquery. 
6) Knowledge of C# Programming.

You can download the complete source code for this tutorial or you can follow the step by step discussion below. The sample code is being developed in Microsoft Visual Studio 2015 Enterprise.

Download Link

Now, let's begin.

1) Create new MVC web project name it "RichTextEditor".
2) Now, open "HomeController.cs" file and replace following code in it i.e.


using System;  
 using System.Collections.Generic;  
 using System.Linq;  
 using System.Web;  
 using System.Web.Mvc;  
 namespace RichTextEditor.Controllers  
 {  
   public class HomeController : Controller  
   {  
     public ActionResult Index()  
     {  
       return View();  
     }  
   }  
 }  

In above code, I have simple cleaned the existing file and create "Index()" method that simply returns my view.

3) In "Model" folder, create "RichTextEditorViewModel.cs" file and place the following code in it i.e.


using System.Collections.Generic;  
 using System.ComponentModel.DataAnnotations;  
 using Microsoft.AspNet.Identity;  
 using Microsoft.Owin.Security;  
 using System.Web.Mvc;  
 namespace RichTextEditor.Models  
 {  
   public class RichTextEditorViewModel  
   {  
     [AllowHtml]  
     [Display(Name = "Message")]  
     public string Message { get; set; }  
   }  
 }  

In the above code, I have simply created a simple model with message property only. This variable will contain all the text that user will write inside the rich text editor. The important part here is the "[AllowHtml]" attribute, this will let the message variable save all html generated content by the rich text editor which includes any formatting or media content. The important point to be noted here that, we cannot use "[Require]" attribute here with rich text editor, we can however, achieve it easily via code when posting the content to controller, I am not going to show that here though.  

4) Open ''Shared->_Layout.cshtml" file and replace it with the following code i.e.


<!DOCTYPE html>  
 <html>  
 <head>  
   <meta charset="utf-8" />  
   <meta name="viewport" content="width=device-width, initial-scale=1.0">  
   <title>@ViewBag.Title</title>  
   @Styles.Render("~/Content/css")  
   @Scripts.Render("~/bundles/modernizr")  
   <!-- Font Awesome -->  
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" />  
 </head>  
 <body>  
   <div class="navbar navbar-inverse navbar-fixed-top">  
     <div class="container">  
       <div class="navbar-header">  
         <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">  
           <span class="icon-bar"></span>  
           <span class="icon-bar"></span>  
           <span class="icon-bar"></span>  
         </button>  
       </div>  
     </div>  
   </div>  
   <div class="container body-content">  
     @RenderBody()  
     <hr />  
     <footer>  
       <center>  
         <p><strong>Copyright &copy; @DateTime.Now.Year - <a href="http://www.asmak9.com/">Asma's Blog</a>.</strong> All rights reserved.</p>  
       </center>  
     </footer>  
   </div>  
   @Scripts.Render("~/bundles/jquery")  
   @Scripts.Render("~/bundles/bootstrap")  
   @RenderSection("scripts", required: false)  
 </body>  
 </html>  

In the above code, I have simply set my generic page layout.  

5) Open ''Home->Index.cshtml" file and replace it with the following code i.e.


@using RichTextEditor.Models  
 @model RichTextEditorViewModel  
 @{  
   ViewBag.Title = "ASP.NET MVC5: Rich Text Editor Plugin";  
 }  
 <h2>@ViewBag.Title.</h2>  
 <div class="row">  
   <div class="col-md-12">  
     <section id="loginForm">  
       @using (Html.BeginForm("Index", "Home", new { ReturnUrl = ViewBag.ReturnUrl }, FormMethod.Post, new { @class = "form-horizontal", role = "form" }))  
       {  
         @Html.AntiForgeryToken()  
         <h5>  
           <i class="fa fa-link" aria-hidden="true"></i>  
           <a href="http://summernote.org/">Summernote Rich Text WYSIWYG Editor</a>  
         </h5>  
         <hr />  
         <div class="form-group">  
           <label class="col-md-4 control-label">Message </label>  
           <div class="col-md-8">  
             <div class="input-group">  
               @Html.TextAreaFor(m => m.Message, new { rows = "20", style = "resize:none;width:400px;", placeholder = Html.DisplayNameFor(m => m.Message), @class = "form-control input-lg textarea-editor" })  
             </div>  
           </div>  
         </div>  
         @*<div class="form-group">  
             <div class="col-md-offset-2 col-md-10">  
               <input type="submit" value="Log in" class="btn btn-default" />  
             </div>  
           </div>*@  
       }  
     </section>  
   </div>  
 </div>  
 @section Scripts  
 {  
   <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.2/summernote.js"></script>  
   @Scripts.Render("~/bundles/Script-custom-editor")  
   <link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.2/summernote.css" rel="stylesheet">  
 }  

 In the above code, I have created my textarea control and apply the Summernote Rich Text (WYSIWYG) Editor plugin. I have also, included in this page the reference JavaScript and CSS style files for this plugin.  

6) In "Scripts" folder create a new file and name it "script-custom-editor.js". Place following code into this JavaScript file i.e.


$(document).ready(function ()  
 {  
    // Initialize Editor   
   $('.textarea-editor').summernote(  
   {  
     height: 300,         // set editor height  
     minHeight: null,       // set minimum height of editor  
     maxHeight: null,       // set maximum height of editor  
     focus: true         // set focus to editable area after initializing summernote  
   });  
 });  

In the above code, I have attached the Summernote Rich Text (WYSIWYG) Editor plugin with my textarea HTML control, which will capture rich text from the end-user. I have used basic settings for the plugin.  

7) Now, execute the project and you will be able to see the following i.e.


Conclusion

In this tutorial, you are able to learn about the importance, usage and advantage of rich text editor. You will also, learn about using Summernote Rich Text (WYSIWYG) Editor plugin with ASP.NET MVC5.

5 comments:

  1. This is an awesome post.Really very informative and creative contents. These concept is a good way to enhance the knowledge.I like it and help me to development very well.Thank you for this brief explanation and very nice information.Well, got a good knowledge.
    New Zealand Education Consultants in Chennai

    ReplyDelete
  2. I do trust all of the concepts you’ve presented on your post. They’re really convincing and will definitely work. Still, the posts are too brief for newbies. May you please extend them a little from subsequent time?Also, I’ve shared your website in my social networks.
    Office Interiors in Chennai
    Home Interior Decorators in Chennai

    ReplyDelete
    Replies
    1. Thank you for your support. Your feedback is valuable to me. I will try my best. Just for info the blog is shifted to www.asmak9.com

      Delete
    2. Thank you for your support. Your feedback is valuable to me. I will try my best. Just for info the blog is shifted to www.asmak9.com

      Delete