Galactic Civilizations 3
CKEditor - Customization

CKEditor - Customization

Category: Javascript.
Posted by on the 27/06/2013.
Last update on the 27/06/2013.

<<Previous tutorial    Next tutorial>>

Description

This tutorial explains how to customize the text editor « CKEditor ».

Introduction

This tutorial can be realized with a simple text editor like « Notepad ». This tutorial requires some basic knowledge in HTML. It also requires that CKEditor is correctly installed.

We will consider that the file that contains the text editor (index.html) is in the root directory, that the CKEditor's configuration files are in /CKEditor/ckeditor and that the plugins are in /CKEditor/plugins.

Customization of the text editor

Customization of the functionalities

First of all, we will restrict the functionalities of the text editor. To do that, create a file in the folder /CKEditor/plugins/ and call it CKEDITOR_config.js.

CKEDITOR_config.js

var editor = CKEDITOR.replace( 'editor',
{
toolbar : [
{ name: 'document',   items: [ 'NewPage', '-', 'Source', 'ShowBlocks', 'Preview', '-', 'Templates' ] },
{ name: 'clipboard',   items: [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ] },
{ name: 'editing',   items: [ 'Find', 'Replace', '-', 'SelectAll', '-', 'SpellChecker',  'Scayt' ] },
'/',
{ name: 'basicstyles',   items: [ 'Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat' ] },
{ name: 'paragraph',   items: [ 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', 'CreateDiv', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', '-', 'BidiLtr', 'BidiRtl' ] },
{ name: 'links',   items: [ 'Link', 'Unlink', 'Anchor' ] },
'/',
{ name: 'styles',   items: [ 'Styles', 'Format', 'Font', 'FontSize'] },
{ name: 'colors',   items: [ 'TextColor', 'BGColor', 'Smiley', 'Image', 'SpecialChar'] },
{ name: 'insert',  items: ['Table','HorizontalRule' ] }
]
});

You can modify the above configuration as you like (add or remove functionalities). Now, we need to modify the file index.html in order to integrate the plugin to the web page:

index.html

...
</form>
<script
type="text/javascript" src="CKEditor/plugins/CKEDITOR_config.js"></script>
...

Apply a CSS style

We will create CSS style sheet and apply it to our editor. To do that, create the file style.css in the root directory.

style.css

h1{
  color:red;
  text-decoration:underline;
}
strong{
  color:blue;
}

Now we will modify the file /CKEditor/modules/CKEDITOR_config.js like that :

CKEDITOR_config.js

...
],
contentsCss : 'style.css'
});

CKEditor style

If this CSS style sheet is the same as the one used for the design of your web site, the text in CKEditor will have the same formatting as the text on the web page.

The next tutorial will explains how to customize the styles list of your text editor.

You like this tutorial ?
Like this website in order to promote it on facebook !

<<Previous tutorial    Next tutorial>>

You like this tutorial ? Share it with your friends !
Partager sur Facebook Partager sur Twitter Partager sur Myspace Partager sur Stumbleupon Soumettre sur Reddit Partager sur Digg Ajouter à vos favoris Technorati Ajouter à vos favoris Live Ajouter à vos favoris Google Ajouter sur vos favoris Yahoo