Free and Opensource software review, Operating system review, Tips and Tricks, System tweaks, troubleshooting, Tools and Techniques, Hacks

CKEditor – rich text editor for the web

CkeditorHave you been looking for a rich text editor for your web site. Your search ends with CKEditor, the complete rich text editor for the web. CKEditor is an easy to install package, highly customizable with plugins and themes and a highly configurable text editor for the web. Another major advantage of this tool is that it is free and opensource. CKEditor provides many advanced features for a Rich text editor including a function to copy content from Microsoft word. CKEditor also supports multiple languages and a configurable spelling checker feature. It also has a language auto detect feature which enables its users to configure your text area or input field based on the language used in that region and can localize the user interface accordingly.


Once you have downloaded and extracted the CKEditor contents your website, you have completed almost 50% of the installation process.

Now to load the CKEditor, first you will have to include the following line in the <head> section of your html code.

<script src=”<path to extracted drectory>/ckeditor.js”></script>

The above line of code basically imports the javascript ckeditor.js and we will have to do this because ckeditor is a javascript application.

Now it is time for you to choose which type of editing you will follow in your website. You can follow either Inline editing or Framed editing.

Inline editing is used when you want to edit content of a section so that it looks like the page in which you will be editing the text. i.e in inline editing the custom css rules, which you have defined in your stylesheet will be followed. Inline editing can be enabled directly on HTML elements through contenteditable (html5) attribute.

<div id=”editablecontent” contenteditable=”true”>
<p>Editable Content in the div</p>

In Framed Editing, ckeditor works like a text area whose elements are invisible to the user. You can convert a smple text area into advanced rich text editor using the codes below.

<script> CKEDITOR.replace( ‘edittext’ ); </script>
<textarea name=”edittext”>Editable Content</textarea>


Additional features can be added to the CKEditor by adding plugins to it. The plugins can be downloaded from the CKEditor add-ons repository which is an online service which have been designed to share plugins.

The plugins can be manually installed by downloading it from the repository and then extracting it into the plugins folder. After extracting it into the plugins folder you can start the plugin by using the extraplugin configuration option.

config.extraPlugins = ‘<plugin name >’;

In fact CKEditor provides a great way to customize your web design. This application provides easy configuration options and customization’s you can have a simple but advanced Rich Text Editor in your web pages

, , ,

Leave a Reply

Your email address will not be published. Required fields are marked *