Using CKEditor (Rich-Text Editor) in ASP.NET Core

In previous articles, I have mentioned using CKEditor for ASP.NET web-forms and How to use a Rich text editor (CKEditor) in MVC but now in this article, I have mentioned, how we can use CKEditor in ASP.NET Core MVC project and save HTML string from CkEditor in the database.

Step 1: Create a new ASP.NET Core MVC project in Visual Studio, by opening Visual Studio 2019 and select "Create new project", then select "ASP.NET Core MVC" template, name your project, and click "Next", select ".NET Core 5" or version as per your need and click "Create".

Step 2: Now, we will connect our project with database, so for that we will have to install NuGet Package, so navigate to Tools -> NuGet Package manager -> Manage Nuget package for solution -> Select "Browse" and Enter "Microsoft.EntityFrameworkCore.SqlServer" and then install the package according to your .NET Core version, I am using .NET 5 so install "Microsoft.EntityFrameworkCore.SqlServer" Version 5

Once you have installed the package, add the Connection string in "appsettings.json"

 "ConnectionStrings": {
    "MyConn": "Data Source=VKS-PC-NEW\\SQLEXPRESS;Initial Catalog=EmployeeDetails;Integrated security=true"
  }

Now, we will have to update "Startup.cs" -> "ConfigureServices" to get connection string from appsettings

    public void ConfigureServices(IServiceCollection services)
        {
            services.AddControllersWithViews();
            string conStr = this.Configuration.GetConnectionString("MyConn");
            services.AddDbContext<DBCtx>(options => options.UseSqlServer(conStr));
        }

Step 3: Add DBCtx.cs and Employee.cs in Models folder

using System.ComponentModel.DataAnnotations;

namespace CKEditorInASPNETCore.Models
{
    public class Employee
    {
        [Key]
        public int Id { get; set; }
        public string EmpName { get; set; }
        public string EmpDescription { get; set; }
    }
}

Employee.cs is Model, as we will have database named "EmployeeDetails" with table "Employee" which has column named "Id" as Primary key and EmpName and EmpDescription with varchar datatype in SQL Server.

So, DBCtx.cs will look like below

using Microsoft.EntityFrameworkCore;

namespace CKEditorInASPNETCore.Models
{
    public class DBCtx : DbContext
    {
        public DBCtx(DbContextOptions<DBCtx> options) : base(options)
        {
        }

        public DbSet<Employee> Employee { get; set; }
    }
}

Step 4: Now, we will add C# Code in HomeController.cs to get data from form and save it in database.

So, here is how our HomeController will looks like

using CKEditorInASPNETCore.Models;
using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;

namespace CKEditorInASPNETCore.Controllers
{
    public class HomeController : Controller
    {
        private DBCtx Context { get; }
        public HomeController(DBCtx _context)
        {
            this.Context = _context;
        }

        public IActionResult Index()
        {
            return View();
        }

        [HttpPost]
        public IActionResult SaveEmp(IFormCollection formValues)
        {
            Employee employee = new Employee();
            employee.EmpDescription = formValues["description"]; //get ckeditor value
            employee.EmpName = formValues["name"];
            this.Context.Employee.Add(employee);
            this.Context.SaveChanges();
            return RedirectToAction("Index");
        }
    }
}

In the above code, you can see we are using database context and using "SaveEmp" Post Method, we are saving Employee details in database.

Step 5: This is last step to use CkEditor in ASP.NET Core Razor View, so navigate to "Index.cshtml" in Views -> "Home" folder and use the code below

@{
    ViewData["Title"] = "Home Page";
}
<style>
   /* increase height of ckeditor*/
    .ck-editor__editable_inline {
        min-height: 200px;
    }
</style>

<form asp-controller="Home" asp-action="SaveEmp" method="post">
    <table>
        <tr>
            <td>Name :</td>
            <td><input name="name" type="text" /></td>
        </tr>
        <tr>
            <td>Description :</td>
            <td><textarea name="description" id="description"></textarea></td>
        </tr>
        <tr>
            <td colspan="2"><input id="Submit1" type="submit" value="submit" /></td>
        </tr>
    </table>
</form>

@section Scripts{
    <script src="https://cdn.ckeditor.com/ckeditor5/34.0.0/classic/ckeditor.js"></script>
    <script>
        $(document).ready(function () {
         // ckeditor 5 initialization
            ClassicEditor
                .create(document.getElementById('description'))
                .then(editor => {
                    console.log(editor);
                })
                .catch(error => {
                    console.error(error);
                });
        });
    </script>
}

In the above code, we have created 2 fields one is for EmpName and textarea for EmpDescription.

Also, we are using CDN link for CkEditor instead of downloading whole library locally.

If you will notice above JS code, we are initializing CkEditor 5 in different manner than CkEditor 4.

                ClassicEditor
                .create(document.getElementById('description'))
                .then(editor => {
                    console.log(editor);
                })
                .catch(error => {
                    console.error(error);
                });

Once, you will build the project and run it in browser it will have output like below

That's it, it should work as shown in above gif Image.

You may also like to read:

jQuery Datatable Server side processing in ASP.NET Core

Large file upload with Progress bar in ASP.NET Core (using Tus)

Implementing Payment Gateway in C# (ASP.NET Core MVC Razorpay Example)

Difference between AddTransient, AddScoped and AddSingleton in ASP.NET Core

File upload on AWS S3 using C# in ASP.NET Core