Ckeditor Mvc 5 Example | Sử Dụng Ckeditor Vào Ứng Dụng Asp .Net Mvc

# Main components

CKEditor 5 Framework comes with its 3 main pillars:

The core editor architecture is implemented by the

@ckeditor/ckeditor5-core
package. It consists of some core classes and interfaces that glue everything together.

The main purpose of the core editor architecture is to lay the groundwork for implementing editor features. Therefore, it introduces concepts such as plugins and commands which simplify and standardize the way of implementing features.
The editing engine is implemented by the

@ckeditor/ckeditor5-engine
package. It is the biggest and by far the most complex piece of the framework, implementing the custom data model, the view layer, conversion mechanisms, the rendering engine responsible for taming
contentEditable
and a lot more.
The standard UI library is implemented by the

@ckeditor/ckeditor5-ui
package. It contains a simple MVC implementation whose main goal is to best fit the CKEditor 5 needs. Furthermore, it introduces basic UI components to be used by editor features.

Every day, we work hard to keep our documentation complete. Have you spotted outdated information? Is something missing? Please report it via our issue tracker.

Saw this post at CodeProject for FCKEditor. Can someone explain what about the new version?

# Trying Out

CKEditor 4 comes with a sample that you can check to verify if the installation was successful as well as a few “next steps” ideas and references to further resources.

Open the following page in the browser to see the sample:
http:// /ckeditor4/samples/index.html

When using the npm package open the following:
http:// /node_modules/ckeditor4/samples/index.html

Additionally, you can click the Toolbar Configurator button on the editor sample page to open a handy tool that will let you adjust the toolbar to your needs.

#CKEditor with #ASP.NET #MVC and #SQL Server

2 Answers

It’s pretty easy to do actually. First download the latest code from the website and extract it to a directory in your project (I choose /Scripts/ckeditor). Then in your view, use the same code as in the “complete sample” in this link and it should work.

Basically, the important steps are:

Make sure you include the ckeditor.js file in the head from your view or in your master page, however you want to do it. This needs to be the exact location within your project (I would use the find file dialog that you can popup when editing a src attribute in visual studio so that it automatically links to the file).
Place the:

RIGHT AFTER your textarea and make sure the id of the textarea is the same in the CKEDITOR.replace() statement.

In MVC, you can not use CKEDITOR.DLL and its tags to, So you need to use ckeditor.js file.

Steps to use CKeditor in MVC3.

Include the ckeditor.js file to the razor page.
And then put CKEDITOR.replace( ‘textAreaId’ );

You can create a feature in your MVC site where a user can enter HTML contents for a certain field. This can be achieved using CKEditor which you can download from CKEditor’s Website.

Let us now create a View that uses CKEditor.

I will create a fully functional View, in ASP.NET MVC Website, which will have CKEditor for inserting & editing HTML contents in the database. I will also perform both server side and client side validation on the View.

First create a Model and add 2 string properties in it. Provide them the [Required] attribute.

public class CKEditor { [Required] public string name { get; set; } [Required] public string description { get; set; } }

Note: In the ‘description’ field the HTML contents will be entered.

Create a Controller and add the following code to it:

public ActionResult Index(string edit) { if (edit != null) { Models.CKEditor ckEditor = new Models.CKEditor(); ckEditor.name = ((MyStruct)Session[“MySession”]).name; ckEditor.description = ((MyStruct)Session[“MySession”]).description; return View(ckEditor); } return View(); } [HttpPost] [ValidateInput(false)] public ActionResult Index(Models.CKEditor ckEditor) { if (ModelState.IsValid) { MyStruct myStruct; myStruct.name = ckEditor.name; myStruct.description = ckEditor.description; Session[“MySession”] = myStruct; ViewBag.StudentData = BindDataTable(); ViewBag.Result = “Form Submitted Successfully”; } else ViewBag.Result = “Invalid Entries, Kindly Recheck.”; return View(); } struct MyStruct { public string name; public string description; } string BindDataTable() { string table = ”
“; table += ”
“; table += ”
“; table += ”

Name:

” + ((MyStruct)Session[“MySession”]).name + ”

Description:

” + ((MyStruct)Session[“MySession”]).description + ”

“; return table; } [HttpPost] public ActionResult Edit() { return RedirectToAction(“Index”, “CKEditor”, new { edit = “edit” }); }

Explanation:

Also make sure to add the below edit rule to the RouteConfig.cs file.

routes.MapRoute( name: “Edit”, url: “CKEditor/Index/{edit}”, defaults: new { controller = “CKEditor”, action = “Index”, edit = “” }, constraints: new { edit = “edit” } );

Next go to your view and enable ClientValidationEnabled and UnobtrusiveJavaScriptEnabled by adding the below code on top of it:

@{ HtmlHelper.ClientValidationEnabled = true; HtmlHelper.UnobtrusiveJavaScriptEnabled = true; }

Next give the reference of the ckeditor.js on the View:

Next add these code lines to the View:

@model demo.MVC.Models.CKEditor

@ViewBag.Result

@if (ViewBag.StudentData == null) { using (Html.BeginForm(null, null, FormMethod.Post, new { id = “CKEditorForm” })) {

@Html.LabelFor(model => model.name) @Html.EditorFor(model => model.name) @Html.ValidationMessageFor(model => model.name)

@Html.LabelFor(model => model.description) @Html.TextAreaFor(model => model.description) @Html.ValidationMessageFor(model => model.description)

} } else {

@(new HtmlString(ViewBag.StudentData))

using (Html.BeginForm(“Edit”, “CKEditor”)) {

} }

Inside the div called viewContent the main work is happening. I am checking if the ViewBag.StudentData is null or not. If it is null I will show the form else show what the Session contains (i.e. inside the studentDataDiv div).

I have added a script below the description field. This will show the CKEditor for the description field.

At the last, edit button is created which will call the Edit Action, so that user can edit the name and description values.

@Scripts.Render(“~/jQuery”) @Scripts.Render(“~/jQueryValidate”) @Scripts.Render(“~/Unobtrusive”)

Here I have given the reference of jQuery, jQuery Validation and jQuery Unobtrusive files. These references are need for client side validation to take place.

I have also added a submitButton’s client side event, to call the CKEditor’s updateElement() method, and showing the description field in the view.

This will make sure the client side validations work perfection on the view. Download the full source codes:

Strongly-Typed HTML Helper

28 Feb 20224 minutes to read

The Syncfusion editor controls supports the strongly typed HTML helpers represented by lambda expressions that have the model or template passed into the view. The Extension method is used to get a value from the model.

The Strongly-Typed HTML helper (i.e., NumericTextBox) takes lambda as a parameter that tells the helper, which element of the model to be used in the typed view.

The Strongly typed views are used for rendering specific types of model objects, instead of using the general ViewData structure.

The following list of controls supports the Strongly-Typed HTML Helper

Autocomplete
Checkbox and Radio Button
DatePicker
DateTimePicker
DropDownList
Numeric, Currency and Percentage Textbox
RichText Editor
TimePicker

The following steps explain how to use the strongly typed helpers to create a Numeric Textbox.

The NumericTextBox control supports strongly typed HTML helpers that uses lambda expression to refer to the models or view models passed to a view template. These helpers allows you to define the value of the NumericTextBoxFor from the model.

Add a class name “EditorValue” in the Models folder and replace the code with the following code:

public class EditorValue { public int number { set; get; } public EditorValue(int value) { number = value; } public EditorValue() { } }

Create an action method that renders the NumericTextBox on the view page, and passes the model to be bound to the view page.

using Syncfusion.EJ2.Inputs; public ActionResult Index() { //Editor For NumericTextBox editor = new NumericTextBox(); editor.Enabled = false; ViewData["editmodel"] = editor; return View(new EditorValue(66)); }

In View, invoke the strongly typed NumericTextBoxFor helper with the lambda expression to set the default value.

@using (Html.BeginForm()) { @Html.EJS().NumericTextBoxFor(model => model.number, (Syncfusion.EJ2.Inputs.NumericTextBox)ViewData["editmodel"]).Render(); @Html.EJS().Button("btn").Content("Post").Render() }

The following steps explain how to get the values by using the Scaffolding methods in Post back.

Create an action method, FormPost that handles the Post request and processes the data. In the action method, you can pass the model as the parameter and that model has the NumericTexBox’s value.

[HttpPost] public ActionResult Index(EditorValue model) { //Editor For NumericTextBox editor = new NumericTextBox(); editor.Enabled = true; ViewData["editmodel"] = editor; return View(model); }

On clicking the button, the Post method will be triggered. In that, the selected value will be obtained as follows.

Server Side Validation

In the server-side validation, the page must be submitted via a postback to validate on the server and if the model data is not valid, the server sends a response back to the client.

The best way to validate a model is by using the Data Annotations that has a set of attributes and classes defined in the System.ComponentModel.DataAnnotations assembly.

Step 1: Add the following namespace to the “EditorValue” model.

using System.ComponentModel.DataAnnotations;

The Data Annotations allows to decorate model classes with the metadata. This metadata describes a set of rules that are used to validate a property.

The following Data Annotation attributes are used for the Numeric Textbox.Required: Indicates that the property is a required field.

Step 2: Next, Update the number property of the “EditorValue” class as “Required Field” by adding the following line.

public class EditorValue { [Required(ErrorMessage = "Numeric Textbox is Required")] public int number { set; get; } }

Step 3: Modify the view page as follows:

@using (Html.BeginForm()) { @Html.ValidationSummary(true) @Html.EJS().NumericTextBoxFor(model => model.number, (Syncfusion.EJ2.Inputs.NumericTextBox)ViewData["editmodel"]).Render() @Html.ValidationMessageFor(model => model.number) @Html.EJS().Button("btn").Content("Post").Render() }

When you press the “POST” button on this page then it will post the data to the server and the code written with in EditorFor action will validate the NumericTextBox value by checking the ModelState.IsValid property. If the NumericTextBox value is not selected, the ModelState.IsValid will return false and display error message.

CKEditor 4 Quick Start Guide

The aim of this article is to get you up and running with CKEditor 4 in two minutes.

Asp.net MVC nâng cao - Bài 1: Sử dụng Ckeditor - Cấu hình nhanh — Asp.net MVC nâng cao – Bài 1: Sử dụng Ckeditor – Cấu hình nhanh

# Setting up the project

For the purpose of this guide, we will use a basic ASP.NET Core project created with
dotnet new webapp
. You can refer to the ASP.NET Core documentation to learn how to set up a project in the framework.

Once the project has been prepared, create an
assets/vendor
directory in the existing
wwwroot
directory in your app. Your folder structure should resemble this one:

├── bin ├── obj ├── Pages ├── Properties ├── wwwroot │ ├── assets | └── vendor │ ├── css │ ├── js │ ├── lib │ └── favicon.ico ├── appsettings.Development.json ├── appsettings.json └── ...

Creating a MVC Project

Step 1
Open Visual Studio.

Step 2
Go to File => New Project.

Select Visual C# => Web => ASP.NET Web Application.
Name your solution (eg. EasyCRM) and Project (EasyCRM.UI) and then click OK.
Select MVC.
Change the authentication to the individual accounts.

Now, you will see the screen given below.

Creating Blank Database

Step 1
Open SQL Server.

Step 2
Connect to the database Server.

Step 3
Right click on the database to “Create New Database”.

Now, let’s just create a sample table named blog with the columns given below.

CREATE TABLE [dbo].[Blogs](
[Id] [int] IDENTITY(1,1) NOT NULL,
[Title] [nvarchar](200) NULL,
[Description] [nvarchar](max) NULL,
[Image] [nvarchar](128) NULL,
[IsActive] [bit] NULL,
[PostedBy] [nvarchar](256) NULL,
[PostedOn] [datetime] NULL,
CONSTRAINT [PK_Blogs] PRIMARY KEY CLUSTERED
[Id] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY] TEXTIMAGE_ON [PRIMARY]

The table looks, as shown below.

Creating DAL (Data Access Layer)

Step 1
Right click on Solution Explorer to add new project.

Step 2
Select Visual C# => Windows => Class Library.

Adding Entity Framework on DAL Project

Step 1
Right click on EsyCRM.DAL Project.

Step 2
Select Add New Item.

Step 3
Select ADO.NET Entity Model, as shown below.

Step 4
Now, select EF Designer from the database.

Step 5
Connect to the database server.

Step 6
Provide correct credentials to connect to the database, as shown below.

Step 7
Select Yes, include the sensitive data in the connection string and click NEXT.

Step 8
Select Blog Table and click Finish.

Now, Visual Studio will create a new class called Blog.cs, using Entity Framework, as shown below.

Now, rebuild the application

Referencing DAL Project to UI Project

Step 1
Right click on References of UI project to add the references.

Now, let’s create CRUD operation for Blog table, using Scaffolding.

After Scaffolding you will see as in fig

Adding Ckeditor in UI Project

Step 1
Download CkEDITOR from http://ckeditor.com/download

Step 2
Extract CkEDITOR.

Step 3
Add the new folder named “Themes” in UI project.

Step 4
Copy the extracted CkEDITOR to Themes folder, as shown below.

Step 5
Open View => Blogs => Create.cshml

Step 6
Add the reference to ckeditor.js file, as shown below.

Step 7
Now, modify the code, as shown below.

@Html.LabelFor(model => model.Description, htmlAttributes: new { @class = “control-label col-md-2” })
@Html.TextAreaFor(model => model.Description,n ew { @id = “FullDescription”, @class = “form-control”, @rows = “200” }) @Html.ValidationMessageFor(model => model.Description, “”, new { @class = “text-danger” })
@*@Html.EditorFor(model => model.Description, new { htmlAttributes = new { @class = “form-control” } }) @Html.ValidationMessageFor(model => model.Description, “”, new { @class = “text-danger” })*@

Step 8
Run the Application and navigate to the Create method of the Blog controller

Summary
We have successfully added CKEDITOR in MVC Application. You can also use CKEDITOR in other Web applications in the same manner.

# Integrating the build in your .NET project

Once you have your custom editor build ready and the .NET project has been set up, extract the
.zip
folder obtained from the online builder and place it in the
assets/vendor
directory created in the previous step. Your folder structure should now look like this:

├── bin ├── obj ├── Pages ├── Properties ├── wwwroot │ ├── assets | ├── vendor | └── ckeditor5 │ ├── css │ ├── js │ ├── lib │ └── favicon.ico ├── appsettings.Development.json ├── appsettings.json └── ...

Note that the name of the original
.zip
folder from the online builder has been shortened here to
ckeditor5
.

Then, modify the
Index.cshtml
file contained in the
Pages
directory to include the CKEditor 5 script. You can use this HTML boilerplate as a starting point:

@page @model IndexModel @{ ViewData["Title"] = "Home page"; }
Welcome to CKEditor 5 in .NET

In the snippet above,
ClassicEditor
is referenced, since that is the editor type that was chosen during the build process. If you are using a different editor type, you will have to alter the snippet accordingly.

Finally, in the root directory of your .NET project, run
dotnet watch run
to see the app in action.

Every day, we work hard to keep our documentation complete. Have you spotted outdated information? Is something missing? Please report it via our issue tracker.

IntroductionWhat is CKEditor?CkEditor is a ready-for-use HTML text editor, which is designed to simplify Web content creation.The best Browser-based rich text editors are usually called WYSIWYG editors. It is very easy to use in any type of project.

In this article, we are going to learn how to implement CKEditor in ASP.NET MVC. In this example, we will cover how to use it, how to post a simple blog or article & how to retrive the data from the database.

Here, I am going to use just three tables as Technology (used to retrive Id of technology), Users (used to retrive the users information), and UserPost (used to retrive the article details).Step 1First, I am going to create tables by using the script given below.

SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
CREATE TABLE [dbo].[Technology](
[Id] [bigint] IDENTITY(1,1) NOT NULL,
[Technology] [nvarchar](500) NULL,
CONSTRAINT [PK_Technology] PRIMARY KEY CLUSTERED
[Id] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY]
GO
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
CREATE TABLE [dbo].[Users](
[Id] [bigint] IDENTITY(1,1) NOT NULL,
[FirstName] [nvarchar](100) NOT NULL,
[LastName] [nvarchar](100) NOT NULL,
[Email] [nvarchar](50) NOT NULL,
[Mobile] [nvarchar](50) NULL,
CONSTRAINT [PK_Users] PRIMARY KEY CLUSTERED
[Id] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY]
GO
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
CREATE TABLE [dbo].[UserPost](
[Id] [bigint] IDENTITY(1,1) NOT NULL,
[UserId] [bigint] NOT NULL,
[TechnologyId] [bigint] NOT NULL,
[Title] [nvarchar](200) NOT NULL,
[Description] [nvarchar](500) NULL,
[Contents] [nvarchar](max) NOT NULL,
[CreationDate] [datetime] NULL,
CONSTRAINT [PK_UserPost] PRIMARY KEY CLUSTERED
[Id] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY]
GO

Step 2

Create an empty MVC project by using Visual Studio. Download the latest version CKEditor from

here

& add the folder into the Application.

Step 3

I am going to use font-awesome css, bootstrap css, bootstrap js & ckeditor.js. Add all the references into a BundleConfig file, as given below.

public static void RegisterBundles(BundleCollection bundles)
bundles.Add(new ScriptBundle(“~/bundles/headerJS”).Include(
“~/Scripts/External/jquery.min.js”,
“~/Scripts/External/bootstrap.min.js”,
“~/Scripts/ckeditor/ckeditor.js”,
“~/Scripts/ckeditor/samples/js/sample.js”
));
bundles.Add(new StyleBundle(“~/Content/css”).Include(
“~/Content/css/bootstrap.min.css”,
“~/Content/css/custom.css”,
“~/Content/css/font-awesome.css”,
“~/images/favico.ico”,
“~/Content/css/bootstrap-datetimepicker.min.css”
));
bundles.Add(new ScriptBundle(“~/bundles/footer”).Include(
“~/Scripts/External/jquery.min.js”,
“~/Scripts/External/bootstrap.min.js”,
“~/Scripts/External/bootstrap-datepicker.js”,
“~/Scripts/External/bootstrap-datetimepicker.min.js”,
“~/Scripts/Custom/Shared/Layout.js”
));

Now, add the reference of above headerJS, CSS, footer into a _Layout.cstml.

Step 4

Create a view model ContributeViewModel, which conatins some properties, as given below.

public class ContributeViewModel
public long UserId { get; set; }
public string TechnologyId { get; set; }
public string Title { get; set; }
public DateTime Date { get; set; }
public string Description { get; set; }
public string Contents { get; set; }

Step 5

Now, create controller Contribute, where action method Contribute() will return a View, which will take user inputs like article title, article description, technology name, and Content by using an editor. For technology names, we are using checkboxes.

On submit button we are going to save these data into a database by using repository pattern. Read my article for reference of

CRUD operation using repository pattern unit of work

@model CoderFunda.ViewModel.Contribute.ContributeViewModel
Contribute your

Blog
@Html.LabelFor(x => x.Title) :
@Html.TextBoxFor(x => x.Title, new { @class = “form-control”, @placeholder = “Enter Title” })
@Html.LabelFor(x => x.TechnologyId,”Techonlogy”) :
ASP.NET
C#
MVC
SQL
Other

@Html.LabelFor(x => x.Description) :

@Html.TextAreaFor(x => x.Description, new { @class = “form-control”, @placeholder = “Description” })

@Html.LabelFor(x => x.Contents) :

BACK

Now, write the code on submit button, click event, which will execute an action method using AJAX call in JavaScript, as given below.

$(‘.btnSubmit’).click(function () {
if (ValidateContribute()) {
var Title = $(“#Title”).val();
var TechnologyId = “”;
$(‘input[name=”blankCheckbox”]:checked’).each(function () {
if (this.value != ”)
TechnologyId = this.value;
});
var Description = $(“#Description”).val();
var Content = CKEDITOR.instances[‘editor’].getData();
var ContributeModel = {
Title: Title,
TechnologyId: TechnologyId,
Description: Description,
Contents: Content,
$.ajax({
url: ‘Contribute/Contribute’,
type: ‘POST’,
data: JSON.stringify(ContributeModel),
contentType: ‘application/json;charset=utf-8’,
success: function (data) {
if (data.success == true) {
window.location.href = “../Account/Home”;
else if (data.success == false) {
alert(“Error occured..!!”)
},
error: function () {
alert(“Error occured..!!”);
},
});
});

Step 6

Create an action method in contribute controller, which will insert the data into a databse, if the data is inserted successfully, it will return JSON result as true, else it returns false. In this action method from GetLoggedInUserId() method, we get the current user id who is logged into an Application.

[HttpPost]
public ActionResult Contribute(ContributeViewModel ContributeViewModel)
try
var technologyId = UnitoffWork.TechnologyRepository.GetSingle(x => x.Technology1 == ContributeViewModel.TechnologyId).Id;
int userId = Helper.UserHelper.GetLoggedInUserId();
UserPost userPost = new UserPost();
userPost.UserId = userId;
userPost.TechnologyId = technologyId;
userPost.Title = ContributeViewModel.Title;
userPost.Description = ContributeViewModel.Description;
userPost.Contents = ContributeViewModel.Contents;
userPost.CreationDate = DateTime.UtcNow;
UnitoffWork.UserPostRepository.Insert(userPost);
UnitoffWork.Save();
return Json(new { success = true }, JsonRequestBehavior.AllowGet);
catch
return Json(new { success = false }, JsonRequestBehavior.AllowGet);

Step 7Create a View Model named as ArticleViewModel, as given below.

public class ArticleViewModel
public ArticleViewModel(UserPost userPost, IEnumerable postLikes, List

userComment)
Image = userPost.User.UserDetails.Count == 0 ? string.Empty : userPost.User.UserDetails.FirstOrDefault().Image == null ? string.Empty : userPost.User.UserDetails.FirstOrDefault().Image;
FirstName = userPost.User.FirstName;
LastName = userPost.User.LastName;
Title = userPost.Title;
Description = userPost.Description;
PostId = userPost.Id;
UserId = userPost.UserId;
CreationDate = userPost.CreationDate.Value;
Contents = userPost.Contents;
Technology = userPost.Technology.Technology1;
public string Image { get; set; }
public long PostId { get; set; }
public long UserId { get; set; }
public string Title { get; set; }
public string Description { get; set; }
public string Contents { get; set; }
public string Technology { get; set; }
public string FirstName { get; set; }
public string LastName { get; set; }
public DateTime CreationDate { get; set; }

In an Index method of controller, I am going to show a list of all the articles with Title, Description, Author Nam and Date etc. If we click on any record (the user would like to read any article from this list), then it will redirect to another action, which will show an article in the detail. For this, I have created an action method, as shown below.

public ActionResult Article(long Id)
int userId = Helper.UserHelper.GetLoggedInUserId();
Expression

> parames1 = v => v.User;
Expression

> parames2 = v => v.User.UserDetails;
Expression

> parames3 = v => v.PostLikes;
Expression

> parames4 = v => v.UserComments;
Expression

>[] paramesArray = new Expression

>[] { parames1, parames2, parames3, parames4 };
var userPost = UnitoffWork.UserPostRepository.GetAllSingleTracking(x => x.Id == Id, navigationProperties: paramesArray).Select(u => new ArticleViewModel(u, u.PostLikes.Where(x => x.UserId == userId && x.PostId == Id), u.UserComments.ToList()));
ViewBag.Techonology = userPost.FirstOrDefault().Technology;
return View(userPost);

Note

Here, I have used two more tables PostLikes & UserComments, which are used to get the count of likes & comment details. In the above action method, I used LINQ expression, using parameter array to get the record from the database on the basis of PostId.

Step 8Now, create a View to show an article details for the above action, as given.

Step 9

Now, run the Application.

Access Contribute action method from the URL & you will see the view given below in which the user can enter the details, as given below.

Click Submit button. Now, open Index method on which you will get the article list, as given below.

If a user would like to read any article from this list, click on any article and the result is given below

Summary

In this article, you learned the basics of how to implement CKEditor in ASP.NET MVC.

Introduction to CKEditor 5 architecture

This guide introduces the main pillars of the CKEditor 5 architecture. It is assumed that you have read the Framework’s overview and saw some code in the Quick start guide. This should help you go through the next steps.

Asp.net MVC5 mới nhất - Bài 20 : Hướng dẫn sử dụng CkFinder và CkEditor - Đầy đủ các bước — Asp.net MVC5 mới nhất – Bài 20 : Hướng dẫn sử dụng CkFinder và CkEditor – Đầy đủ các bước

# Preparing a build

In this guide, we will use the online builder. It is a web interface that lets you create a custom build of CKEditor 5 and download the code as a zip package.

The online builder is a powerful tool that lets you effortlessly create a rich text editor that is custom-tailored to your needs. With the online builder, you can choose the desired editor type, and plugins, configure the toolbar, and choose the UI language for your editor.

You can learn more about creating custom CKEditor 5 builds with the online builder in our Customized installation guide.

# Adding CKEditor 4 to Your Page

If the sample works correctly, you are ready to build your own site with CKEditor 4 included.

To start, create a simple HTML page with a element in it. You will then need to do two things:

Include the
This is my textarea to be replaced with CKEditor 4.

When you are done, open your test page in the browser.

Congratulations! You have just installed and used CKEditor 4 on your own page in virtually no time!

Bài 28. Thêm CkEditor biên soạn bài viết - Asp.net MVC5

SỬ DỤNG CKEDITOR VÀO ỨNG DỤNG ASP .NET MVC

Giới thiệu và cài đặt

CKEditor là một text editor sử dụng trong các trang web.Thực chất hiển thị được những định dạng văn bản thế này đều là nhờ vào việc lưu dưới dạng HTML.Download Gói CKEditor (~7MB) : http://download.cksource.com/CKEditor/CKEditor/CKEditor%203.6.3/ckeditor_3.6.3.zipGiải nén ra để vào kho tài liệu của mình. (Coi như bản gốc)Giờ chúng ta cần sử dụng CKEditor trong web của chúng ta, chỉ việc copy nguyên folder đó vào projectSau đó, để project nhẹ bớt thì xóa đi 1 số file không cần thiết. Ở đây tôi chỉ muốn sử dụng javascript đơn giản nên tôi sẽ loại bỏ những file sau:- CHANGES.html- INSTALL.html- ckeditor.pack- ckeditor_basic.js- ckeditor_basic_source.js- Các file có đuôi .asp và .php- Cả thư mục _sourceChưa hết đâu, còn 1 thứ để loại bỏ nữa, mà khoan bỏ nha, đó là folder _samples. Folder này chứa các ví dụ về CKEditor, chúng ta sẽ dùng những trang này để test xem là có thể chạy chưa. Bằng cách chạy project và truy cập đường dẫn đến đường dẫn sau (port và folder chứa nó là tùy thuộc vào bạn).Nếu chạy ra được ckeditor như thế:Gõ gõ và Edit vài chữ trên đó thử. Nếu được thì coi như chúng ta đã thành công.Cụ thể cách sử dụng CKEditor trong lập trình web thì chúng ta sẽ cùng làm một ví dụ nho nhỏ ở mục sau.

Sử dụng

Tôi sẽ demo cách sử dụng CKEditor khi lập trình web qua 1 ví dụ ngắn gọn. Vì mục tiêu của bài viết này là hướng đến sử dụng CKEditor nên tôi sẽ lướt nhanh những phần không quan trọng.Tôi sẽ tạo một project ASP.NET MVC 3 với tên là DemoCKEditor. Tôi sử dụng ngôn ngữ C# và cú pháp Razor. Nội dung của web này là dùng để quản lý các bài viết trên blog cá nhân.Đầu tiên tôi sẽ tạo 1 cơ sở dữ liệu trong Sql Server, cơ sở dữ liệu MyBlog chỉ có 1 bảng duy nhất như sau:

create table Post ( PostId int primary key identity, Title text, Content ntext )

Rồi từ đó tôi tạo ADO.NET Entity Data Model được thế này:

Chạy thử sẽ thấy với view Create sẽ có giao diện như sau:Chúng ta biết rằng một bài post trên blog thì nội dung đâu thể gói gọn trong 1 dòng text đơn giản. Để có thể nhập vào nội dung có thể định dạng thì chúng ta sẽ sử dụng CKEditor.Đến đây, chúng ta thực hiện copy gói ckeditor vào project như mục 1 của bài viết đã hướng dẫn.(Thư mục Plugin là thư mục tôi tự tạo)Sau khi đã cài đặt, chúng ta vào _layout.cshtml add reference đến file ckeditor.js

Chúng ta sẽ mở View Create. Chúng ta tìm đến đoạn:

@Html.EditorFor(model => model.Content) @Html.ValidationMessageFor(model => model.Content)

Thay bằng:

@Html.TextAreaFor(model => model.Content, new { @id = “ckeContent” })

Thật dễ hiểu đúng không, trước tiên cho hiển thị lên như một textarea, đặt lại id cho nó. Hàm replace trong đoạn script sẽ thay textarea hoặc div trong tham số truyền vào bằng 1 CKEditor.Thế là ta dễ dàng có được:Thử tạo mới một Post xem thế nào. Nhập 1 tí rồi bấm nút Create thử. Nhưng kết quả sẽ ra:Vấn đề nằm ở chỗ khi ta tạo mới một Post như thế, dữ liệu content của nó không còn là text thuần túy mà đây là HTML, .NET nhận ra và báo đây là điều nguy hiểm đối với chúng ta trong vấn đề bảo mật. Để tắt cơ chế bảo mật này đi. Chúng ta vào trong lớp Controller, đến ngay phương thức Create mà có HttpPost. Thêm vào [ValidateInput(false)]. Đây là phương thức Create sau khi thêm:

[HttpPost] [ValidateInput(false)] public ActionResult Create(Post post) { if (ModelState.IsValid) { db.Posts.AddObject(post); db.SaveChanges(); return RedirectToAction(“Index”); } return View(post); }

Rồi bây giờ chạy lại thì có thể thêm được thành công:Nhìn vào những thẻ HTML thế này thì chắc các bạn cũng đã hình dung được ban nãy khi tạo tôi định dạng nội dung Content như thế nào rồi đúng không!Tương tự như thế làm cho View Edit. Thực hiện xong, chúng ta chạy lại lên và Edit bài Post ban nãy vừa tạo:Chúng ta thấy rõ là lúc này CKEditor đã thể hiện lại các HTML .Còn 1 vấn đề nữa. Ban nãy chúng ta thấy trang Index hiển thị chuỗi HTML. Những HTML này đã được encode bởi MVC. Mặc định khi xuất ra chuỗi thì MVC sẽ encode trước khi hiển thị.Vậy bây giờ, ngược lại ta muốn xuất ra nội dung chưa được encode thì thế nào?Lớp HttpHelper cung cấp cho chúng ta phương thức Raw để làm việc đó.Và bây giờ chúng ta có thể áp dụng vào View Details.Trước đây, Details là thế này:Để được thế này:Thì chỉ việc thay

@Html.DisplayFor(model => model.Content)

Bằng

@Html.Raw(Model.Content)

Tóm tắt

Khi làm viêc với CKEditor cần chú ý những điều sau:- Test bằng các trang web sample trước khi sử dụng- Sử dụng textarea hoặc div để tạo ra CKEditor- Xử lý bỏ qua phần kiểm tra thông tin tại các Action nhận thông tin từ người dùng.- Bản chất định dạng bằng HTML và mặc định MVC sẽ xuất ra dạng chuỗi đã được encode

Bạn đang muốn tìm kiếm 1 công việc với mức thu nhập cao.✅ Hoặc là bạn đang muốn chuyển đổi công việc mà chưa biết theo học ngành nghề gì cho tốt.✅ Giới thiệu với bạn Chương trình đào tạo nhân sự dài hạn trong 12 tháng với những điều đặc biệt mà chỉ có tại IMIC và đây cũng chính là sự lựa chọn phù hợp nhất dành cho bạn:👉 Thứ nhất: Học viên được đào tạo bài bản kỹ năng, kiến thức chuyên môn lý thuyết, thực hành, thực chiến nhiều dự án và chia sẻ những kinh nghiệm thực tế từ Chuyên gia có nhiều năm kinh nghiệm dự án cũng như tâm huyết truyền nghề.👉 Thứ hai: Được ký hợp đồng cam kết chất lượng đào tạo cũng như mức lương sau tốt nghiệp và đi làm tại các đối tác tuyển dụng của IMIC. Trả lại học phí nếu không đúng những gì đã ký kết.👉 Thứ ba: Cam kết hỗ trợ giới thiệu công việc sang đối tác tuyển dụng trong vòng 10 năm liên tục.👉 Thứ tư: Được hỗ trợ tài chính với mức lãi suất 0 đồng qua ngân hàng VIB Bank.👉 Có 4 Chương trình đào tạo nhân sự dài hạn dành cho bạn lựa chọn theo học. Gồm có:1) Data Scientist full-stack2) Embedded System & IoT development full-stack3) Game development full-stack4) Web development full-stack✅ Cảm ơn bạn đã dành thời gian lắng nghe những chia sẻ của mình. Và tuyệt vời hơn nữa nếu IMIC được góp phần vào sự thành công của bạn.✅ Hãy liên hệ ngay với Phòng tư vấn tuyển sinh để được hỗ trợ về thủ tục nhập học.✅ Chúc bạn luôn có nhiều sức khỏe và thành công!

Compatibility with .NET

As a pure JavaScript/TypeScript application, CKEditor 5 will work inside any environment that supports such components. While we do not offer official integrations for any non-JavaScript frameworks, you can include a custom build of CKEditor 5 in a non-JS framework of your choice, for example, Microsoft’s .NET.

To integrate CKEditor 5 with .NET, we will create a custom CKEditor 5 build using the online builder, and then import it into the .NET project.

# Integrate with Popular Frameworks

# CKEditor 4 Angular Integration

To install the official CKEditor 4 Angular component, run:

npm install ckeditor4-angular

By default it will automatically fetch the latest CKEditor 4 standard-all preset via CDN. Check the Angular Integration guide on how it can be changed and how to configure the component to fit you needs.

# CKEditor 4 React Integration

To install the official CKEditor 4 React component, run:

npm install ckeditor4-react

By default it will automatically fetch the latest CKEditor 4 standard-all preset via CDN. Check the React Integration guide on how it can be changed and how to configure the component to fit you needs.

# CKEditor 4 Vue Integration

To install the official CKEditor 4 Vue component, run:

npm install ckeditor4-vue

By default it will automatically fetch the latest CKEditor 4 standard-all preset via CDN. Check the Vue Integration guide on how it can be changed and how to configure the component to fit you needs.

Hướng dẫn lập trình Website từ a-z với Asp .Net MVC5 part4a - chèn ckeditor ckfinder

# Next Steps

Go ahead and play a bit more with the sample; try to change your configuration as suggested to customize it. And when you are ready to dive a bit deeper into CKEditor 4, you can try the following:

Check the Setting Configuration article to see how to adjust the editor to your needs.
Get familiar with Advanced Content Filter. This is a useful tool that adjusts the content inserted into CKEditor 4 to the features that are enabled and filters out disallowed content.
Modify your toolbar to only include the features that you need. You can find the useful visual toolbar configurator directly in your editor sample.
Learn about CKEditor 4 features in the Features Overview section.
Visit the CKEditor 4 Examples to see the huge collection of working editor samples showcasing its features, with source code readily available to see and download.
Browse the Add-ons Repository for some additional plugins or skins.
Use online builder to create your custom CKEditor 4 build.
Browse the Developer’s Guide for some further ideas on what to do with CKEditor 4 and join the CKEditor community at Stack Overflow to discuss all CKEditor things with fellow developers!

I am new to CKeditor, and am finding it difficult to implement CKeditor on an ASP.NET MVC5 site. I added the standard version of CKeditor to the development site in VS2013 using Nuget. I added the js files in a script bundle, and a view with a textarea. I have added jQuery and the jQuery adadptor, but putting a script of $("#mytextarea").ckeditor() does not work. I can get CKeditor working in VS2013 by adding the class ckeditor to the textarea. But when I uploaded the files to the production server, the textarea is not recognized as CKeditor.

I assume that I have not copied something important, but not sure what. I have uploaded the script files, views, applicaction binary and web.config files. I have tried explicitly adding a script for initiating CKeditor as per the Basic setup with CKEDITOR.replace('FollowUp'); but this makes no difference

Any help is apprciated

David Lane-Joynt

# Download from Official Site

# Download

Visit the official CKEditor 4 Download site. For a production site we recommend you choose the default Standard Package and click the Download button to get the
.zip
installation file. If you want to try out more editor features, you can download the Full Package instead.