Introduction To CKEditor

This blog shows how to Implement CKEditor (WYSIWYG Editor) in Web Applications.

Introduction

 
CKEditor is an open-source WYSIWYG (what you see is what you get) text editor, which is designed to bring common Word processor features directly to the Web pages, simplifying their content creation. It is a popular HTML Editor. It is open-source, so you are able to customize and add a number of plugins in your Editor.
 
Implement CKEditor
 
Here, we will learn how to implement CKEditor in a Web page. There is no need for any special back framework (Java ASP.NET, PHP) for CKEditor. It’s implemented in single text area input.
 
Visit here and choose your package. I recommend a standard package because advanced packages have more plugins, so more space is needed.
 
After download, the folder contains Ckeditor.js, Config.js files, and Plugins, lang.  Add the CKEditor.js file to your page.
 
Basic setup

 s
 
Add Ckeditor.js file to your Web page. 
  1. <textarea name="htmlcontent" id="myckeditor"> This my Text Area to replaced by CKEdior</textarea>  
  2. <script type="text/javascript" src="~/Assets/ckeditor/ckeditor.js"></script>  
  3. <script>     
CKEDITOR.replace('myckeditor' ); //put textarea element id and that is replaced by html editor,
 
</script>
 
The preview of the CKEditor screen is given below.
 
a
 
CKEditor is a powerful HTML Editor in JavaScript. It has lots of plugins for new options. In an upcoming post, we will learn file upload and plugin implementation in CKEditor.