Here is what we will accomplish:

1. Create a custom toolbar utilizing already existing toolbar items provided by ckeditor.
2. Create a config object to assign the toolbar to.
3. Initiate the ckeditor.

Right now we are using $(‘#editor_area’).ckeditor(); to initiate the library and show the WYSIWIG.  So all we need to do is a create a toolbar layout and a config object and pass it in when we initiate.

FIRST: CREATE TOOLBAR

There are a couple different ways to create a toolbar in ckeditor. By this I mean, using an array of arrays or an array of objects with arrays inside them.  I will show you both ways and explain what CKEditor has to say about which one to use.

1. Simple Toolbar using Array of Arrays.

What your toolbar should look like from the code below.

Source code

$(function(){
        // 1. Create your own toolbar
        var myToolbar = [
            ['Bold'],
            ['Styles'],
            ['Save','-','SelectAll']
        ];                                    
 
        // 2. Create a config var to hold your toolbar
        var config =
        {
            toolbar_mySimpleToolbar: myToolbar,
            toolbar: 'mySimpleToolbar'        
        };
 
        // 3. change the textarea into an editor using your config and toolbar
        $('#editor_area').ckeditor(config);                
});

Let me explain what is going on here.

The variable myToolbar is an array, the name of the variable is totally arbitrary.  Inside the array are more arrays. Now each one of those individual arrays turns into a toolbar group. See how the toolbar item “Bold” is all by itself but the “Save” and “Select All” items are grouped, but with a nice vertical line in the middle. Can you guess how that was created? Ok, hard one….. “-”  Using that anywhere in your array will create a separator between your toolbar objects.  I’ll explain that config object and how we name the toolbar in a little bit.

Now let’s make that same toolbar using the Array of objects with Arrays.

2. Simple Toolbar using Array of Objects w/ Arrays.

Source code

 $(function(){
        // 1. Create your own toolbar
        var myToolbar = [
            { name: 'bold it', items : ['Bold'] },
            { name: 'styles it', items : [ 'Styles'] },
            { name: 'save and stuff', items : ['Save','-','SelectAll'] },
        ];                                    
 
        // 2. Create a config var to hold your toolbar
        var config =
        {
            toolbar_mySimpleToolbar: myToolbar,
            toolbar: 'mySimpleToolbar'        
        };
 
        // 3. change the textarea into an editor using your config and toolbar
        $('#editor_area').ckeditor(config);                
});

Your toolbar should look exactly the same as before. But notice that it is created with objects this time. This is the recommended way by CKEditor.  The objects have a name for that toolbar group and the items as an array.  The name allows screen readers and other software the ability to determine where they are at and assist for better usage.  This also is a much better JSON format.

 Let’s take a look at that config object:

The config object is what we pass into the intiator to set the options for the editor. Like height and width. Try it out for yourself.

Source code

 var config = { height: 250, width: 390 };

There are two default toolbars that are already created by CKEditor, Full and Basic.  And you choose which one you want to use by setting the “toolbar” property in the config.

Source code

var config = { toolbar: 'Basic'};

Now if you wanted to make your own toolbar and assign it you would have to create a new toolbar in the config.  CKEditor is smart. You create your own toolbar by setting the property “toolbar_{{Your Toolbar Name}}”.  Then you would assign your toolbar with “toolbar: Your Toolbar Name”.

Source code

var config ={
 toolbar_mySimpleToolbar: myToolbar,
 toolbar: 'mySimpleToolbar'
};

CKEditor File Structure w/ jQuery

CKEditor is the most popular open source WYSIWYG editor for web development. What makes it so great in my opinion is that you do NOT have to use server side script to manage it. But if that’s your thing, don’t worry, it has those options too.

To start off let’s just make a quick file structure by creating in index.html, a js folder that will contain your ckeditor files and jquery library file.

The js/ckeditor folder contains the, latest at the time of this post, library downloaded from the ckeditor website.  I have removed all of the unnecessary files in implementing ckeditor with jquery.

1.    Download latest jquery library to your file structure.
2.    Download latest ckeditor library to your file structure.
3.    Remove all unneeded ckeditor files.

Now that you have your file structure set up, we can start looking into the html file. Here is what we will be doing:

1.    Include all the javascript libraries and adapter script.
2.    Create a textarea html element inside a form tag. (Creating it in a form tag allows the save button to submit the form when you click it.)
3.    Write the code to initiate the ckeditor.

As you can see below you add all the <script> tags to include the jquery library, ckeditor library, and the ckeditor adapter for jquery.

Source code

<!DOCTYPE HTML>
<html>
    <head>
 
        <title>CKEditor with jQuery</title>
        <!-- JQUERY LIBRARY -->
        <script type="text/javascript" src="js/jquery/jquery.min.js"></script>
        <!-- CKEDITOR LIBRARY -->
        <script type="text/javascript" src="js/ckeditor/ckeditor.js"></script>
        <!-- CKEDITOR JQUERY ADAPTOR -->
        <script type="text/javascript" src="js/ckeditor/adapters/jquery.js"></script>
 
        <!-- CODE TO START YOUR EDITOR -->
        <script type="text/javascript">            
            // jquery document ready function
            $(function(){                    
                    // 1. change the textarea into an editor
                    $('#editor_area').ckeditor();                
            });    
        </script>
 
    </head>
    <body>
        <h1>CKEditor with jQuery</h1>
        <form id="editor_form" method="post" action="index.html">
            <textarea id="editor_area"></textarea>
        </form>
    </body>
</html>

 HERE IS WHAT YOU SHOULD HAVE WHEN YOU ARE DONE.

The extra javascript at the top of the page is the code you use to initiate the ckeditor.  The syntax looks familiar for you jquery people out there.

So there you have it, quick and simple way to initiate the ckeditor via jquery.

What’s next? How about using it. Removing things from the toolbar, overriding the save button, and maybe even creating your own custom drop down or select.

NEXT:  Learn how to customize the ckeditor toolbar with jquery.