Managing CKEditor plugins using composer

Check packagist.org for the CKEditor plugin you need

The Drupal community has provided composer packages for many CKEditor plugins via packagist.org. Check for your plugin there first.

Since CKEditor plugins don't have composer packages of their own, if you don't find the one you need on packagist.org, you will have to define packages manually.

If needed, define CKEditor packages manually

For each CKEditor plugin, add an entry to the repositories section of your composer.json file. This will tell composer about the package and tell it where to get it from.

For example:

"repositories": [
    {
        "type": "package",
        "package": {
            "name": "ckeditor-plugin/div",
            "version": "4.11.0",
            "type": "drupal-library",
            "dist": {
                "url": "https://download.ckeditor.com/div/releases/div_4.11.0.zip",
                "type": "zip"
            }
        }
    },
    {
        "type": "package",
        "package": {
            "name": "ckeditor-plugin/templates",
            "version": "4.11.0",
            "type": "drupal-library",
            "dist": {
                "url": "https://download.ckeditor.com/templates/releases/templates_4.11.0.zip",
                "type": "zip"
            }
        }
    },
]

In the above, the URL is just the link to the zip file you would normally download from the CKEditor plugins library.

In the package name, the first part before the slash is the vendor and the second part is the package name. You have free control to put anything you want here since you are defining custom packages, however it is preferable to keep things descriptive and consistent. This example uses ckeditor-plugin as the vendor and the name of the plugin as the package name.

By using a consistent vendor you can also easily tell composer where to put the plugins. You do this by adding another entry under installer paths, like this:

"extra": {
  "installer-paths": {
    "web/libraries/ckeditor/plugins/{$name}": ["vendor:ckeditor-plugin"],
    "web/libraries/{$name}": ["type:drupal-library"]
  }
}

You can see that it is using the package vendor, which we defined previously, to distinguish between ckeditor plugin packages and other packages and put them in the appropriate place.

Notes

• This installer-paths section requires the composer/installers package to be included in your project.
• The composer/installers plugin will use the first matching entry for a given package. This means that because we are using the type drupal-library, if type:drupal-library comes before vendor:ckeditor-plugin, then it will get to type:drupal-library first and install them in that path. So make sure to put vendor:ckeditor-plugin before type:drupal-library.

Then you just need to require the packages to install them, as you would with any other packages. For example:

"require": {
    "ckeditor-plugin/div": "4.11.0",
    "ckeditor-plugin/templates": "4.11.0"
}

Using a custom package type

The above example uses drupal-library as the package type instead of something CKEditor-specific like ckeditor-plugin.

This is because the composer/installers package only supports a hard-coded list of package types and the most relevant of their supported types in this case is drupal-library.

If you want to use a custom type, then you could use the oomphinc/composer-installers-extender package and then implement like the below example. One reason you might want to go this way is so that you avoid the issue of accidentally putting the type:drupal-library installer path first in the list of installer-paths.

Package definitions

"repositories": [
    {
        "type": "package",
        "package": {
            "name": "ckeditor-plugin/div",
            "version": "4.11.0",
            "type": "ckeditor-plugin",
            "dist": {
                "url": "https://download.ckeditor.com/div/releases/div_4.11.0.zip",
                "type": "zip"
            }
        }
    },
    {
        "type": "package",
        "package": {
            "name": "ckeditor-plugin/templates",
            "version": "4.11.0",
            "type": "ckeditor-plugin",
            "dist": {
                "url": "https://download.ckeditor.com/templates/releases/templates_4.11.0.zip",
                "type": "zip"
            }
        }
    },
]

Install paths

"extra": {
  "installer-types": ["ckeditor-plugin"],
  "installer-paths": {
    "web/libraries/ckeditor/plugins/{$name}": ["type:ckeditor-plugin"],
  }
}

Finally you have to execute the command: composer update --lock so that the CKEditor plugins are installed.

Further reading

For more information see:

• Composer + Drupal: Using Composer to manage Drupal site dependencies
• Configuration information for install-paths: github.com/composer/installers
• Composer repositories configuration: getcomposer.org/doc/05-repositories.md