FCK (CK) Editor Installation Guide

Many examples and installation guides have already been written.

Here are some good links:

1. Native installation guide - Where to get and where to put the sources of the CKEditor.

2. Further integration guide - How to turn it on.

First, this is not enough to reach all the abilities of a WYSIWYG editor. Right now, the CKEditor is not a WYSIWYG editor because your site’s CSS was not assigned to the editor area. Second, the CKEditor is not configured yet to show exactly what is needed.

Here are tasks we will solve in this CKEditor Installation guide:

• Make the editable HTML look exactly like it looks where it is displayed.
• Configure the editor toolbar to fit our needs.

For a person who knows HTML , creating HTML without a complex editor is easier... Using a simple text editor is the fastest way to do things. That is why this article describes how to tune the CKEditor for people who do not know HTML, JavaScript, etc. From the other side, tuning the CKEditor completely without knowledge of HTML, CSS, and JavaScript is impossible.

This article is for Webmasters.

Here is an example where the CSS of the editor does not match CSS of the page. Please take a look at it before we continue:

First Problem Example

Please do not continue before seeing the example.

OK, now that we know what the first problem is, we know that how good the CKEditor works as a WYSIWYG editor depends on two things: the size of the editor area and its CSS.

Size is an easy thing, involving a one-line set up in the configuration or even in CSS if it is fixed.

CSS is a little bit harder. Please take a look at the following.

First Problem Solved Example

Now the CKEditor really works like a WYSIWYG editor. The HTML we create in the editor area looks exactly as it is displayed on the page.

Look how I did this:

CKEDITOR.replace( 'txt1',{
        customConfig : 'js/config.js',
        contentsCss : 'css/style-fck.css'
    });

This line "contentsCss : 'css/style-fck.css'" is added to the CKEditor implementation JavaScript

From where do we take this style-fck.css? It is generated from the main Web site’s CSS file (let us call itmain.css).

Here is a simple example:

The main.css file holds simple definitions for HTML elements, such as h1, p, and a.

So our style-fck.css will be exactly the same as main.css

The only thing we would need to set is the width of the editor area to the width of the content block where the HTML will be placed later. We need to set body { width:XXXpx }  in style-fck.css for that.

 Here is a more complex example:

Our content block is placed inside div or table with class "fck-div" for example.

In the main.css we have some styles for "fck-div". We also have styles for fck-div.h1, fck-div.p etc.

In this case, we can also use the same CSS as main.css but we need to set the BodyId field in the config.js file

CKEDITOR.editorConfig = function( config )
{
   config.BodyId = "fck-div";
}

The most complex example is as follows:

Our content block is placed inside div "fck-div", but this div is inside the div class "content"

and we have CSS like this

.content {
backgorund-color: #EEE;
}


.content p {
color:#FFF;
}


.fck-div{
background-color:#CCC;
}

So if we set BodyId to "fck-div", we will lose .content css. On the other hand, if we take "content" as a BodyId, we will lose .fck-div css. In this situation, we would need to merge CSS for fck-div and for main div.

As a result, we will have this CSS

.fck-divp {
color:#FFF;
}
.fck-div{
background-color:#CCC;
}

For BodyId, we should take "fck-div"

I hope it is clear now that you can easily assign any CSS to your CKEditor.

Let us now talk about toolbar customization

Comming soon!

Please contact us if you would like this article to be completed.