CKEditor 4 Documentation

Installing CKEditor with Package Managers

Support for Bower and Composer was introduced in CKEditor 4.3.3 and for npm in CKEditor 4.5.7. You can now use them to install CKEditor releases.

The package managers will install the standard-all CKEditor preset that includes all official CKSource plugins with only those from the Standard installation preset compiled into the ckeditor.js file and enabled. See here for a comparison of packages.

Additional plugins included in the standard-all preset can be enabled in your configuration by using the CKEDITOR.config.extraPlugins option.

For example, if you wanted to add the Text Color and Background Color buttons to your toolbar (the Standard preset does not include them by default), you should add the following to your custom editor configuration:

config.extraPlugins = 'colorbutton';

Custom CKEditor Configuration

If you want to use package managers to keep CKEditor up to date, your custom editor configuration should not be done in any of the core CKEditor files like config.js (otherwise you risk overwriting them during the update process).

It is thus recommended to use of the following strategies:

Both options are explained in more detail in the Setting CKEditor Configuration article.

npm

This article assumes that you have npm already installed and added to your PATH. If this is not the case, please follow the official npm installation guide.

Usage

In order to fetch the most recent build, execute the following command:

npm install ckeditor

By default CKEditor will be placed in the node_modules/ckeditor directory.

Adding CKEditor as a Dependency Using the package.json File

You may add CKEditor to the dependencies list by using the --save flag:

npm install ckeditor --save

or by manually editing your package.json file. Just make sure to create a reference to ckeditor in the dependencies property.

{
    "name": "my-project",
    "dependencies": {
        "ckeditor": "4.5.7"
    }
}

Then execute the following command:

npm update

Fetching a Particular Build Preset

Currently only the standard-all CKEditor installation preset can be fetched.

Bower

This article assumes that you have Bower already installed and added to your PATH. If this is not the case, please follow the official Bower installation guide.

Usage

In order to fetch the most recent build, execute the following command:

bower install ckeditor

By default CKEditor will be placed in the bower_components/ckeditor directory.

Adding CKEditor as a Dependency Using the bower.json File

You may add CKEditor to the dependencies list inside your bower.json file. Just make sure to create a reference to ckeditor in the dependencies property.

{
    "name": "my-project",
    "dependencies": {
        "ckeditor": "4"
    }
}

Then execute the following command:

bower update

Fetching a Particular Build Preset

By default only the standard-all CKEditor installation preset can be fetched. However, there is a workaround to install a diffrent package using the #<preset>/<version> syntax.

For example, if you would like to download the full preset of CKEditor 4.3.3, execute the following command:

bower install ckeditor#full/4.3.3

Composer

This article assumes that you have Composer already up and running. If this is not the case, please follow these instructions.

Usage

In order to fetch the most recent CKEditor 4 build, create a composer.json file in the directory where you want to install CKEditor. This file should include the following contents:

{
    "require": {
        "ckeditor/ckeditor": "4.*"
    }
}

Then execute the following command:

composer update

Fetching a Particular Build Preset

There is a way for Composer to fetch CKEditor built with a desired preset. For each preset you can subscribe to the following branches:

  1. Latest release
  2. Stable release
  3. Latest minor release for a given major version

The following table will explain the relation between a build and the JSON require value:

preset standard-all basic standard full
latest dev-latest dev-basic/latest dev-standard/latest dev-full/latest
stable dev-stable dev-basic/stable dev-standard/stable dev-full/stable
4.3.x dev-4.3.x dev-basic/4.3.x dev-standard/4.3.x dev-full/4.3.x

For example, let us consider that we want to include the full preset of the most up-to-date 4.3.x release. In this case the composer.json file should contain the following code:

{
    "require": {
        "ckeditor/ckeditor": "dev-full/4.3.x"
    }
}

Only branches starting from CKEditor version 4.3.x and higher are supported in this way.