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 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 CKEditor.js file to your page.
Basic setup
Add Ckeditor.js file to your Web page.
- <textarea name="htmlcontent" id="myckeditor"> This my Text Area to replaced by CKEdior</textarea>
- <script type="text/javascript" src="~/Assets/ckeditor/ckeditor.js"></script>
- <script>
CKEDITOR.replace('myckeditor' ); //put textarea element id and that is replaced by html editor,
</script>
Preview of CKEditor screen is given below.
![]()
CKEditor is a powerfull HTML Editor in JavaScript. It has lots of plugins for new options. In an upcoming post , we will learn fileupload and plugin implementation in CKEditor.