Add CKEditor - Rich Text Editor to ASP.NET Web Application | WYSIWYG Editor in ASP.NET

in this video I will show you how to use a rich text editor called CK editor in asp.net web application so here we have a form that contains the title and the content so the title is an input field and the content is a text area and when we submit the form it will be submitted using the post method so the content of this input field will be displayed inside this div and the content of this text area will be displayed inside this div so in this video I will show you how to replace this text area with a rich text editor first let's take a look on the source code so here in the index page we can see that we have a row that has two columns so this is the first column and this is the second column so in the First Column we have a form and the data of the form will be submitted using the post method so in this form we have an input field called title and we will display the old content of this input field then we have a text area that is called content and also here we will display the value of the content variable that is defined in the module then we have the submit button so when we submitted the Forum we will also display the title inside this div so here we have a div that will display the content of the title and we have another div that will display the content of the text area so now I will show you how to use a rich text editor instead of this text area so let's go to the browser and let's type CK editor let's go to the first link then let's click on CK editor 5 then documentation then getting started then here we can click on this link start using CK editor from the CDN then let's click on quick start guide then we need to use this source code so first we need to provide the text area with an ID and the ID that we will provide to the text area should be the same ID that we will provide to this JavaScript function so first let's copy this code that allows us to import the Javascript file from the CDN then we need to add it to the layout file so the layout file is available under shared which is also available under pages so let's open this file and let's scroll down and just here we can paste the code then we need to copy this code and also we need to paste it inside the layout file so just here we can paste it so the idea that we have here should be the same ID that you have to provide to the text area let's change it and let's write my editor let's copy it then let's go to the index file then let's add the ID to this text area let's save the files and let's test the application and now we can see that we have a rich text editor so here let's provide a title and let's provide a content then let's edit this content so for example we can display these lines as list so we can click on this button and also we can display these lines as another list then we can display this text in bold then submit so here we have the title and here we have the content of the text area but we can see that this content is displayed as html text and we need to display it as HTML content so let's go to the source code let's delete this code and let's replace it with at HTML dot row and between parenthesis we have to provide the variable that contains the content of the text area now let's test the application again let's provide a title then let's fill the text area then submit and now we can see that the content of this text area is displayed as an HTML content

Channel: BoostMyTool

Views: 2,370

Keywords:

Id: CZN9D4UV3f4

Length: 5min 12sec (312 seconds)

Published: Sat Jun 24 2023