Post
Ask Question

ASP.NET MVC 5 - Kendo UI - Working With Editors📝 And Customizing Those

Introduction

 
In this article, I will demonstrate how to work with Editors, how to store the HTML content into the database, and generate the PDF using Kendo UI in ASP.MVC5. The Kendo UI Editor is a powerful WYSIWYG component that allows you and your users to create rich text content in a familiar and user-friendly way. It provides a variety of tools for creating, editing, and formatting text, paragraphs, lists, images, tables, hyperlinks, and other HTML elements. The component outputs identical HTML across all major browsers, follows accessibility standards, and provides API for content manipulation and exporting to PDF.
 
Prerequisites
  • Visual Studio
  • SQL Server
  • Basic knowledge of ASP.NET MVC
  • Basic knowledge of Entity Framework
  • Basic knowledge of jQuery
  • Basic knowledge of CSS
Article Flow
  • Create an ASP.NET MVC Empty project
  • Enable Kendo UI features
  • Implement Editor
  • Save Editor Content to Database using jQuery
    •  Configure Entity Framework with database and application
  • PDF generation

Create an ASP.NET MVC Empty project

 
To create ASP.NET MVC empty project, follow the below steps one by one. Here, I have used Visual Studio 2017.
  1. Select New Project -> Visual C# -> Web -> ASP.NET Web Application and enter your application name. Here, I named it "KendoUI_Editor".
  2. Now, click OK.
  3. Then, select Empty MVC template and click "OK" to create the project.
  4. Once you click OK, the project will be created with the basic architecture of MVC.
  5. If you are not aware of how to create an Empty ASP.NET Web Application, please visit Step 1 and Step 2 to learn. 
Once you complete these steps, you will get the screen as below.
 
ASP.NET MVC 5 - Kendo UI - Working With Editors And Customize It 
 

Enable Kendo UI Features

 
Here, we are going to enable the Kendo UI Editor features with our application by adding the below CSS and JS in the application. Before adding it, let's create the controller and action. Now, create an empty Controller and View. Here, I created a Controller with the name of "EditorController". Whenever we create an empty Controller, it is created with an empty Index action method. And, create an empty View of this action method "Index". Now, add the below Kendo UI JS and CSS in Index or _Layout page.
  1. <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.common-material.min.css" />  
  2. <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.material.min.css" />  
  3. <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.material.mobile.min.css" />  
  4. <script src="https://kendo.cdn.telerik.com/2018.3.1017/js/jquery.min.js"></script>  
  5. <script src="https://kendo.cdn.telerik.com/2018.3.1017/js/kendo.all.min.js"></script>  
Implement Editor
 
Create a div in the View which will act as Editor. Here, I have used the text-area and mentioned the id for div in the name of the Editor.
  1. <div id="example">  
  2.    <textarea id="editor"> </textarea>  
  3. </div>  
Now, enable the Kendo UI Editor features to div ("editor").
  1. <script type="text/javascript">  
  2.    $(document).ready(function () {  
  3.       $("#editor").kendoEditor();  
  4.    });  
  5. </script>  
Set the default controller and action in RouteConfig.cs.
  1. public class RouteConfig {  
  2.     public static void RegisterRoutes(RouteCollection routes) {  
  3.         routes.IgnoreRoute("{resource}.axd/{*pathInfo}");  
  4.         routes.MapRoute(name: "Default", url: "{controller}/{action}/{id}", defaults: new {  
  5.             controller = "Home", action = "Index", id = UrlParameter.Optional  
  6.         });  
  7.     }  
  8. }  
Run your application. In the below image, you can see that the basic features of Editors are enabled.
 
ASP.NET MVC 5 - Kendo UI - Working With Editors And Customize It 
 
Now, we shall add a few more tools on this Editor to add more features. For that, Kendo provideds the tools property to enable these, as below.
  1. $("#editor").kendoEditor(  
  2. {  
  3. tools: [  
  4. "bold",  
  5. "italic",  
  6. "underline",  
  7. "strikethrough",  
  8. "justifyLeft",  
  9. "justifyCenter",  
  10. "justifyRight",  
  11. "justifyFull",  
  12. "insertUnorderedList",  
  13. "insertOrderedList",  
  14. "indent",  
  15. "outdent",  
  16. "createLink",  
  17. "unlink",  
  18. "insertImage",  
  19. "insertFile",  
  20. "subscript",  
  21. "superscript",  
  22. "tableWizard",  
  23. "createTable",  
  24. "addRowAbove",  
  25. "addRowBelow",  
  26. "addColumnLeft",  
  27. "addColumnRight",  
  28. "deleteRow",  
  29. "deleteColumn",  
  30. "viewHtml",  
  31. "formatting",  
  32. "cleanFormatting",  
  33. "fontName",  
  34. "fontSize",  
  35. "foreColor",  
  36. "backColor",  
  37. "print",  
  38. ]  
  39. });  
Run your application.
 
 ASP.NET MVC 5 - Kendo UI - Working With Editors And Customize It
 

Save Editor Content to Database using Jquery

 
Before formatting the data in Editor, let's create the table in the database to store the contents. I have created the table with the below design in the name of EditorContents.
 
ASP.NET MVC 5 - Kendo UI - Working With Editors And Customize It 
 
Execute the below query to get the same design.
  1. CREATE TABLE [dbo].[EditorContents](  
  2. [ID] [bigint] IDENTITY(1,1) NOT NULL,  
  3. [HtmlContent] [nvarchar](max) NULL,  
  4. CONSTRAINT [PK_EditorContents] PRIMARY KEY CLUSTERED  
  5. (  
  6.    [ID] ASC  
  7. )WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]  
  8. ) ON [PRIMARY] TEXTIMAGE_ON [PRIMARY]  
  9. GO  
Now, let's format some content using our Kendo Editor, as below.
 
ASP.NET MVC 5 - Kendo UI - Working With Editors And Customize It 
 
In the above image, you can see that I have added one Save button. So, add one button in your View as below.
  1. <input type="button" class="btn btn-primary" id="btnSave" value="Save" />   

Configure Entity Framework with database and application

 
Here, I have already discussed how to configure and implement a database first approach. In the meantime, choose your created table with Entity Framework. Once we finish our configuration with SQL table "EditorContents" from CSharpCorner database and with our application, we will get the below screen as succeeding configuration.
 
ASP.NET MVC 5 - Kendo UI - Working With Editors And Customize It 
 
Write the Save Logic in the controller.
  1. [HttpPost]  
  2. public void SaveHtmlToDatabase(EditorContent editorContent) {  
  3.     CSharpCornerEntities cSharpCornerEntities = new CSharpCornerEntities();  
  4.     cSharpCornerEntities.EditorContents.Add(editorContent);  
  5.     cSharpCornerEntities.SaveChanges();  
  6. }  
Now, Pass the Editor value to the above action method using AJAX, as below.
  1. $("#btnSave").click(function() {  
  2.     var content = $("#editor").val();  
  3.     var editorContent = new Object();  
  4.     editorContent.HtmlContent = content;  
  5.     $.ajax({  
  6.         type: "POST",  
  7.         url: "/Editor/SaveHtmlToDatabase",  
  8.         data: editorContent,  
  9.         dataType: "json",  
  10.         success: function(response) {  
  11.             Alert('Success');  
  12.         },  
  13.     });  
  14.     alert(content);  
  15. });  
We should define the "Allow HTML" attribute while binding the value to a model property.
  1. [AllowHtml]  
  2. public string HtmlContent { get; set; }  
Run your application. In the below image, you can see that we have stored the HTML content in the database.
 
ASP.NET MVC 5 - Kendo UI - Working With Editors And Customize It 
 
PDF Generation
 
We have formatted the content, right? Let's convert this Editor content to a PDF document. Now, enable the PDF features as below.
  1. $("#editor").kendoEditor({  
  2.     tools: ["pdf"],  
  3.     pdf: {  
  4.         fileName: "PDFDemoDocument.pdf",  
  5.         proxyURL: "https://demos.telerik.com/kendo-ui/service/export",  
  6.         paperSize: "a4",  
  7.         margin: {  
  8.             bottom: 20,  
  9.             left: 20,  
  10.             right: 20,  
  11.             top: 20  
  12.         }  
  13.     }  
  14. });  
Run your application.
 
ASP.NET MVC 5 - Kendo UI - Working With Editors And Customize It 
 
Complete View 
  1. @{  
  2.    ViewBag.Title = "Editor";  
  3.    Layout = "~/Views/Shared/_Layout.cshtml";  
  4. }  
  5. <br />  
  6. <script src="~/Scripts/jquery-1.10.2.min.js"></script>  
  7. <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.common-material.min.css" />  
  8. <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.material.min.css" />  
  9. <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.material.mobile.min.css" />  
  10. <script src="https://kendo.cdn.telerik.com/2018.3.1017/js/jquery.min.js"></script>  
  11. <script src="https://kendo.cdn.telerik.com/2018.3.1017/js/kendo.all.min.js"></script>  
  12. <div class="col-lg-12">  
  13. <div id="example">  
  14.    <textarea id="editor"> </textarea>  
  15. </div>  
  16. <br />  
  17. <div class="text-right">  
  18.    <input type="button" class="btn btn-primary" id="btnSave" value="Save" />  
  19. </div>  
  20. </div>  
  21. < script type = "text/javascript" > $(document).ready(function() {  
  22.     $("#editor").kendoEditor({  
  23.         tools: ["bold", "italic", "underline", "strikethrough", "justifyLeft", "justifyCenter", "justifyRight", "justifyFull", "insertUnorderedList", "insertOrderedList", "indent", "outdent", "createLink", "unlink", "insertImage", "insertFile", "subscript", "superscript", "tableWizard", "createTable", "addRowAbove", "addRowBelow", "addColumnLeft", "addColumnRight", "deleteRow", "deleteColumn", "viewHtml", "formatting", "cleanFormatting", "fontName", "fontSize", "foreColor", "backColor", "print", "pdf"],  
  24.         pdf: {  
  25.             fileName: "PDFDemoDocument.pdf",  
  26.             proxyURL: "https://demos.telerik.com/kendo-ui/service/export",  
  27.             paperSize: "a4",  
  28.             margin: {  
  29.                 bottom: 20,  
  30.                 left: 20,  
  31.                 right: 20,  
  32.                 top: 20  
  33.             }  
  34.         }  
  35.     });  
  36.     $("#btnSave").click(function() {  
  37.         var content = $("#editor").val();  
  38.         var editorContent = new Object();  
  39.         editorContent.HtmlContent = content;  
  40.         $.ajax({  
  41.             type: "POST",  
  42.             url: "/Editor/SaveHtmlToDatabase",  
  43.             data: editorContent,  
  44.             dataType: "json",  
  45.             success: function(response) {  
  46.                 Alert('Success');  
  47.             },  
  48.         });  
  49.         alert(content);  
  50.     });  
  51. });   
  52. < /script>  
Complete Controller 
  1. using KendoUI_Editor.Models;  
  2. using System.Web.Mvc;  
  3. using System.Linq;  
  4. namespace KendoUI_Editor.Controllers {  
  5.     public class EditorController: Controller {  
  6.         // GET: Editor  
  7.         public ActionResult Index() {  
  8.                 return View();  
  9.             }  
  10.             [HttpPost]  
  11.         public void SaveHtmlToDatabase(EditorContent editorContent) {  
  12.             CSharpCornerEntities cSharpCornerEntities = new CSharpCornerEntities();  
  13.             cSharpCornerEntities.EditorContents.Add(editorContent);  
  14.             cSharpCornerEntities.SaveChanges();  
  15.         }  
  16.     }  
  17. }  
Refer to the attached project for reference. I have attached the demonstrated project without a package due to the size limit.
 

Summary 

 
In this article, we saw how to work with Editors, how to store the HTML content into the database using Kendo UI in ASP.MVC5. I hope it helps you out. Your valuable feedback and comments about this article are always welcome.


Similar Articles