JQuery

Customizing the CKEditor toolbar with jQuery

TAGs: 3 Comment

Posted By: eligeske on in JQuery

In this post we will go over editing the CKEditor toolbar through jQuery.  If you don’t have ckeditor setup and working using jQuery please read this post first: Starting CKEditor with jQuery. This will get you up to speed with where we are at.

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.

ckeditor customizing the toolbar

What your toolbar should look like from the code below.

 

$(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.

 $(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.

 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.

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”.

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

There ya have it.  Customizing the toolbar using jQuery.

 

 

3 Responses to "Customizing the CKEditor toolbar with jQuery"

"SHARING IS CARING"
  1. Pingback: Starting CKEditor with jQuery | eli geske

  2. Luke says:

    Thanks for the info – it was exactly what I needed and has saved me a load of time on a very hot afternoon.

  3. barry says:

    Hi eligeske,

    How would you set a path to custom templates in a jquery adapter config?

    i.e to my templates.js

Learning DHTMLX Suite UI

Learn the foundation of the DHTMLX Suite quickly while building a single page application with multiple components in harmony.

Popular post