ImageKit CKEditor 5 Plugin

This plugin integrates ImageKit into CKEditor 5, allowing you to access the embedded Media Library Widget through your CKEditor toolbar.

With this plugin, you can directly insert images from your ImageKit account into the editor, as well as upload new images to your Media Library.

Table of Contents

1. Installation and build
   1. Version support
   2. CKEditor quickstart
   3. Configuration
   4. Build the editor
2. Frontend installation
3. Usage

Installation and build

To install this plugin, you should make a custom build of CKEditor 5. Use the quickstart steps below, or follow the instructions here.

Version support

The following versions of CKEditor core packages are supported so far:

• v24.0.0

If you are making the custom build by following the instructions on CKEditor website, please ensure that all CKEditor-related packages you install belong to a single one of the supported versions. Otherwise, the build will throw "ckeditor-duplicated-modules" error in the browser and fail to work.

CKEditor quickstart

Clone the CKEditor 5 repository at the latest supported version:

git clone --depth 1 --branch v24.0.0 https://github.com/ckeditor/ckeditor5.git

Navigate to the build that will be customized and install dependencies. We will use the classic build:

cd ckeditor5/packages/ckeditor5-build-classic
npm install

Install the ImageKit CKEditor plugin in your custom build folder:

npm install --save-dev imagekit-ckeditor5-plugin

Configuration

To load the plugin, configure your editor by editing the src/ckeditor.js file that belongs to the chosen build. Import the Media Library Widget within it as follows:

1/* ckeditor5-build-classic/src/ckeditor.js */
2
3// ...imported modules
4// custom plugin import
5import { ImagekitMediaLibraryWidget } from 'imagekit-ckeditor5-plugin';
6
7export default class ClassicEditor extends ClassicEditorBase {}
8
9// Plugins to include in the build.
10ClassicEditor.builtinPlugins = [
11  // include custom plugin in build
12  ImagekitMediaLibraryWidget,
13  // ...other components
14];
15
16// COnfigure the `imagekitMediaLibraryWidget` plugin to display on the editor toolbar
17ClassicEditor.defaultConfig = {
18  toolbar: {
19    items: [
20      'imagekitMediaLibraryWidget',
21      // ...other ckeditor plugins
22    ]
23  },
24  // ...other settings
25  language: 'en'
26};
27

Build the editor

1npm run build

Copy the built files into the source of your webpage which will host the editor:

cp -r build/ <path_to_your_web_project>

Frontend installation

Import the generated build files in your frontend project:

1<script src="<path_to_web_project>/ckeditor.js"></script>

Provide HTML container elements for widget instance as well as editor instance:

1<div class="editor"></div>
2<div class="ml-container"></div>

Create a JavaScript object with configuration options for the plugin:

1var pluginOptions = {
2  container: '.ml-container',
3  className: 'media-library-widget',
4  dimensions: {
5    height: '100%',
6    width: '100%',
7  },
8};

Create an editor instance that includes the imagekitMediaLibraryWidget plugin on the toolbar, with its configuration options.

1// ckeditor
2var editor;
3
4// initialize ckeditor
5ClassicEditor
6  .create(document.querySelector('.editor'), {
7      imagekitMediaLibraryWidget: {
8        config: pluginOptions
9      }
10    })
11  .then(newEditor => {
12    editor = newEditor;
13    window.editor = newEditor;
14  }).catch(error => {
15    console.error(error);
16  });

Usage

Open a browser and navigate to your app with the CKEditor instance. It should look similar to the image below. To open ImageKit view, click on the highlighted icon:

If you are not logged in already, do so using your ImageKit username and password.

The Media Library view should open right up, letting you search and select existing images, as well as upload new ones directly.

To insert one or more images into the CKEditor panel, select them and click the "Insert" button in the top right hand area.

The modal dialog will close and selected images will be inserted into the editor automatically!

Note: Google Chrome (Incognito)

In order to use this plugin on Google Chrome in Incognito mode, you need to enable third-party cookies: