ASP.NET MVC 5 - Rich Text (WYSIWYG) Editor

Ben Chris
7y
34.3k
0
7

Article

An interactive website requires interactive components in it for 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 the user to place inline images or the links, and content indentation etc. These features can be provided individually, but, it will become more cumbersome for the website developers to develop each and every single feature from scratch. In regards to such matter, many amazing affordable rich text editor plugins are available for the 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 I like about it is that it allows the inline images, which so far, I am at least unable to find free of cost, simple to use and with working inline image media in different plugins.

The prerequisites include the knowledge about the technologies given below.

ASP.NET MVC 5
HTML
JavaScript
Bootstrap
jQuery
C# Programming

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

Now, let's begin.

Create new MVC Web project, name it "RichTextEditor".
Now, open "HomeController.cs" file and replace the code given below in it i.e.
1. using System;
2. using System.Collections.Generic;
3. using System.Linq;
4. using System.Web;
5. using System.Web.Mvc;
6. namespace RichTextEditor.Controllers {
7. public class HomeController: Controller {
8. public ActionResult Index() {
9. return View();
10. }
11. }
12. }
In the code given above, I have simply cleaned the existing file and create "Index()" method that simply returns my view.
In "Model" folder, create "RichTextEditorViewModel.cs" file and place the code given below in it i.e.
1. using System.Collections.Generic;
2. using System.ComponentModel.DataAnnotations;
3. using Microsoft.AspNet.Identity;
4. using Microsoft.Owin.Security;
5. using System.Web.Mvc;
6. namespace RichTextEditor.Models {
7. public class RichTextEditorViewModel {
8. [AllowHtml]
9. [Display(Name = "Message")]
10. public string Message {
11. get;
12. set;
13. }
14. }
15. }
In the code given above, I have simply created a simple model with the message property only. This variable will contain all the text that the user will write inside the rich text editor. The important part here is the "[AllowHtml]" attribute. This will allow 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 is 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, although I am not going to show it here
Open ''Shared->_Layout.cshtml" file and replace it with the code i.e.
1. <!DOCTYPE html>
2. <html>
4. <head>
5. <meta charset="utf-8" />
6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
7. <title>@ViewBag.Title</title> @Styles.Render("~/Content/css") @Scripts.Render("~/bundles/modernizr")
8. 
9. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" /> </head>
11. <body>
12. <div class="navbar navbar-inverse navbar-fixed-top">
13. <div class="container">
14. <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
15. <span class="icon-bar"></span>
16. <span class="icon-bar"></span>
17. <span class="icon-bar"></span>
18. </button> </div>
19. </div>
20. </div>
21. <div class="container body-content"> @RenderBody()
22. <hr />
23. <footer>
24. <center>
25. <p><strong>Copyright © @DateTime.Now.Year - <a href="http://www.asmak9.com/">Asma's Blog</a>.</strong> All rights reserved.</p>
26. </center>
27. </footer>
28. </div> @Scripts.Render("~/bundles/jquery") @Scripts.Render("~/bundles/bootstrap") @RenderSection("scripts", required: false) </body>
30. </html>
In the code given above, I have simply set my generic page layout.
Open ''Home->Index.cshtml" file and replace it with the code given below i.e.
1. @using RichTextEditor.Models
2. @model RichTextEditorViewModel
3. @ {
4. ViewBag.Title = "ASP.NET MVC5: Rich Text Editor Plugin";
5. } < h2 > @ViewBag.Title. < /h2> < div class = "row" > < div class = "col-md-12" > < section id = "loginForm" > @using(Html.BeginForm("Index", "Home", new {
6. ReturnUrl = ViewBag.ReturnUrl
7. }, FormMethod.Post, new {
8. @class = "form-horizontal", role = "form"
9. })) {
10. @Html.AntiForgeryToken() < h5 > < i class = "fa fa-link"
11. 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 {
12. rows = "20", style = "resize:none;width:400px;", placeholder = Html.DisplayNameFor(m => m.Message), @class = "form-control input-lg textarea-editor"
13. }) < /div> < /div> < /div>
14. @ * < div class = "form-group" > < div class = "col-md-offset-2 col-md-10" > < input type = "submit"
15. value = "Log in"
16. class = "btn btn-default" / > < /div> < /div>*@
17. } < /section> < /div> < /div>
18. @section Scripts { < script type = "text/javascript"
19. src = "http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.2/summernote.js" > < /script>
20. @Scripts.Render("~/bundles/Script-custom-editor") < link href = "http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.2/summernote.css"
21. rel = "stylesheet" >
22. }
In the code given above, 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.
In "Scripts" folder, create a new file and name it "script-custom-editor.js". Place the code given below into this JavaScript file.
1. $(document).ready(function() {
2. // Initialize Editor
3. $('.textarea-editor').summernote({
4. height: 300, // set editor height
5. minHeight: null, // set minimum height of editor
6. maxHeight: null, // set maximum height of editor
7. focus: true // set focus to editable area after initializing summernote
8. });
9. });
In the code given above, I have attached the Summernote Rich Text (WYSIWYG) Editor plugin with my textarea HTML control, which will capture the rich text from the end-user. I have used basic settings for the plugin.
Now, execute the project.

Conclusion

In this article, you have learned about the importance, usage, and advantages of rich text editor. You also learned about using Summernote Rich Text (WYSIWYG) Editor plugin with ASP.NET MVC5.

Up Next

Ebook Download

View all

Programming ASP.NET MVC 5

Read by 122.1k people

Download Now!

Learn

View all