Using CKEditor with Javascript

CKEditor is an online rich text editor that can be embedded inside web pages. It is a WYSIWYG (What You See Is What You Get) editor which means that the text edited in it looks as similar as possible to the results end users will see after the document gets published. It brings to the Web popular editing features found in desktop word processors such as Microsoft Word and OpenOffice.org Writer. – Source: CKEditor Documentation

Before knowing about the CKEditor (previously FCKEditor), I was wondering if there is a tool in web that makes the document customizable. That means I was searching for web tool with which I can make sentences Bold, Italic or Numbered and Bulleted, or I can change Font size, font family, text color, or insert links, photos and many more without using HTML tags. Finally I came up with CKEditor which solves my problem. CKEditor is very easy to use and have very beautiful and user friendly interface like MS office and Open office.  In this tutorial I am going through all steps required to install and configure the CKEditor and show you a working example with Javascript.

Installation

  • Download the latest version of the editor from CKEditor official website: https://ckeditor.com/download
  • Extract (decompress) the downloaded archive to a directory called ckeditor in the root of your website.

After the installation of CKEditor, lets look at how it is integrated with HTML.

Step 1: Including CKEditor in page

CKEditor actually replaces the textarea in HTML page. To do this you must include the reference to javascript file ckeditor.js in the head section of the page.


   

Step 2: Creating instance of CKEditor

To create the CKEditor instance, first create a text area like this

After the textarea element is inserted, we can use the CKEditor JavaScript API to relace this HTML element with an editor instance. A single JavaScript replace call is needed for that

 

This is all about replacing textarea with CKEditor. You can save the content of CKEditor both by client side and server side data handling. In server side you can use the following PHP code

In client side you can use JavaScript to do this

 

An working example with JavaScript


    CKEditor with Javascript
    


    
                   

Output

Customizing the CKEditor

You may not need all the toolbar available in default settings. You can filter the toolbar by using following code snippet

CKEDITOR.replace('ck1',
            {
                toolbar :
                        [
                            { name: 'document', items : [ 'Preview' ] },
                            { name: 'clipboard', items : [ 'Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo' ] },
                            { name: 'editing', items : [ 'Find','Replace','-','SelectAll','-','Scayt' ] },
                            { name: 'insert', items : [ 'Image','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'] },
                                    '/',
                            { name: 'styles', items : [ 'Styles','Format','Font','FontSize' ] },
                            { name: 'basicstyles', items : [ 'Bold','Italic','Strike','-','RemoveFormat' ] },
                            { name: 'paragraph', items : [ 'NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote' ] },
                            { name: 'links', items : [ 'Link','Unlink','Anchor' ] },
                               { name: 'colors', items : [ 'TextColor','BGColor' ] }, 
                            { name: 'tools', items : [ 'Maximize','-','About' ] } 
                        ],
});

You can change the height and width of editor as follows