Roy Tang

This can be used to add font family and font size in the CkEditor.

This is to be done in config.js.

Also see docs

    config.font_names = 'Arial;Times New Roman;Verdana;' +  CKEDITOR.config.font_names;

config.toolbar_Full =
[
     { name: 'basicstyles', items : [ 'Bold','Italic','Underline','Strike','Subscript','Superscript','-','RemoveFormat' ] },
	
    { name: 'paragraph', items : [ 'Outdent','Indent','-','Blockquote','CreateDiv','-',
                'JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','-','BidiLtr','BidiRtl' ] }    
	
];

config.toolbar = 'Full';

There are two (mutually exclusive) ways to configure the toolbar. Check out the following:

http://ckeditor.com/latest/samples/plugins/toolbar/toolbar.html

I tried to use config.toolbarGroups first, but ended up using config.toolbar instead. Here’s what I ended up using:

config.toolbar = [
                { name: 'save', items: [ 'savebtn','Undo','Redo' ] },
                { name: 'clipboard', items: [ 'Cut','Copy','Paste','PasteText','PasteFromWord'] },
                { name: 'document', items: [ 'Find','Replace'] },
                '/',
                { name: 'lists', items: [ 'NumberedList','BulletedList','Outdent','Indent'] },
                { name: 'insert', items: [ 'Image','Table','Smiley','SpecialChar'] },
                { name: 'link', items: ['Link','Unlink'] },
                '/',
                { name: 'basicstyles', items: [ 'Font','FontSize','Bold','Italic','Underline','Strike','Subscript','Superscript'] },
                //'/',
                { name: 'align', items: [ 'JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'] }
        ];

Note that I am using a save plugin that was generously contributed by kasper Taeymans, which can be found at the following location:

https://stackoverflow.com/questions/18956257/how-to-add-an-ajax-save-button-with-loading-gif-to-ckeditor-4-2-1-sample-plugi

I also found the following document to be really useful, even though it related to version 3:

http://docs.cksource.com/CKEditor_3.x/Developers_Guide/Toolbar

I used the information in this article to produce my configuration (I’m using version 4.2.1), specifically the names of the items (e.g. Cut, Copy, Paste), as this was the missing link in my case.

Make sure you’ve got the Full Package version of ckeditor. I’d originally had the Standard Package and had similar problems.

config.extraPlugins = 'font';

You have to add the plugin…

Took me a long time to figure out that I explicitly had to add FontSize to the toolbar, too - doesn’t seem to work with Font only.