CODEWITHSUNDEEP
ckeditor
Roy Tang
Roy Tang

Reputation: 5771

CKEditor 4 - how to add font family and font size controls to the toolbar

I have a config.toolbarGroups setting in config.js but I don't know what name to use for the groups to add font family/font size controls. (It seems the documentation is lacking in this regard). I've found some suggestion that I should use CKBuilder to create a package that already includes it, but I can't redeploy the entire ckeditor just to add a couple of buttons.

Edit: My CKEditor is version 4

Any advise?

Thanks!

Upvotes: 13

Views: 52421

Answers (5)

Nayan Thakkar
Nayan Thakkar

Reputation: 132

Add directly using script :

CKEDITOR.replace('content', {
      extraPlugins: 'uicolor,colorbutton,colordialog,font',
});

To change default styles of text :

CKEDITOR.addCss(".cke_editable{cursor:text; font-size: 25px; color: #FFFFFF;background-color: #006991;}");

Upvotes: 0

Evan
Evan

Reputation: 96

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:

How to add an ajax save button with loading gif to CKeditor 4.2.1. [Working Sample Plugin]

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.

Upvotes: 7

m02ph3u5
m02ph3u5

Reputation: 3161

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.

Upvotes: 1

Harold
Harold

Reputation: 699

config.extraPlugins = 'font';

You have to add the plugin...

Upvotes: 14

Abi
Abi

Reputation: 1345

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';

Upvotes: 0

Related Questions