Loading CKEditor Script

CKEditor 4 is a JavaScript application. To load it, you need to include a single file reference in your page. If you installed CKEditor 4 in the ckeditor directory in the root of your website, you need to insert the following code fragment into the <head> section of your page:

<head>
    ...
    <script src="/ckeditor/ckeditor.js"></script>
</head>

When this file is loaded, the CKEditor JavaScript API is ready to be used.

When adding CKEditor 4 to your web pages, use the original file name (ckeditor.js). If you want to use a different file name, or even merge the CKEditor 4 script into another JavaScript file, refer to the Specifying the Editor Path article first.

# Creating Editor Instances

Now that the CKEditor JavaScript API is available on the page, you can use it to create editor instances. There are two different options available in order to achieve this. In order to examine both usage scenarios, choose the preferred option below to get more information.

# Classic Editing

Classic editing is the most common way to use CKEditor 4, when the editor is usually represented by a toolbar and an editing area placed in a specific position on the page. Sometimes it is also called “framed editing”, because in this scenario the editor creates a temporary <iframe> element for itself.

See the demo here. Read all about this editor type in the Classic Editing article.

Classic editor example

# Inline Editing

Inline editing is an innovative feature that can be used for content which needs to look like the final page, giving you a true WYSIWYG experience. Editing is enabled directly on HTML elements through the HTML5 contenteditable attribute. The editor toolbar appears automatically for these elements, floating on the page.

See the demo here. Read all about this editor type in the Inline Editing article.

Inline editor example