Galactic Civilizations 3
CKEditor - Installation

CKEditor - Installation

Category: Javascript.
Posted by on the 04/07/2013.
Last update on the 04/07/2013.

   Next tutorial>>


This tutorial explains how to install the text editor « CKEditor » and how to use it in a form.


This tutorial can be realized with a simple text editor like « Notepad ». This tutorial requires some basic knowledge in HTML.

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.

CKEditor is a text editor that can be integrated inside a web page. It is a WYSIWYG editor, this means that the edited text closely corresponding to the appearance of the result when the text is published. it provide most of the functionalities of editors like Microsoft Word or Open Office. CKEditor facilitates the messages formatting of your users (for the comments or in forums) without using BBCode.

Install of CKEditor

First we need to download CKEditor (You can download it here) and then copy the files in the folder /CKEditor/ckeditor.

Now, open the file index.html with a text editor and create a form that contains the following lines:


<script type="text/javascript" src="CKEditor/ckeditor/ckeditor.js"></script>

<!-- This <div> holds alert messages to be display in the sample page. -->
<div id="alerts">
         <strong>CKEditor requires JavaScript to run</strong>. In a browser with no JavaScript support, like yours, you should still see the contents (HTML data) and you should be able to edit it normally, without a rich editor interface.

<!-- This <fieldset> holds the HTML that you will usually find in your pages. -->
<form method="POST" action="">
   <textarea cols="80" class="ckeditor" id="editor" name="editor" rows="10"></textarea>
   <input type="submit" value="send" />


When the file is modified, open it in a web browser. You will see a text editor with standard functionalities. You can now provide to your user an advanced text editor.

CKEditor basic

The next tutorial will explain how to customize your text editor.

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

   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