CKEditor integration
Sample application to embed ImageKit Media Library in the CKEditor.
ImageKit can be integrated into CKEditor 5 using the
imagekit-ckeditor5-plugin available on npm. This plugin allows you to access the Media Library Widget through your CKEditor toolbar.Using it, you can directly embed images from your ImageKit Media Library into the editor and upload new photos to your Media Library.
To install this plugin, you should make a custom build of CKEditor 5. Use the quickstart guide further below, or follow the instructions here.
You can also integrate the plugin into an existing CKEditor build.
Install the
imagekit-ckeditor5-plugin into your existing CKEditor 5 build:npm install --save-dev imagekit-ckeditor5-plugin
Check the version support list to find out which versions of CKEditor core packages will work with this plugin. Mostly, versions upwards of v24.0.0 are supported.
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.
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
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:/* ckeditor5-build-classic/src/ckeditor.js */
// ...imported modules
// custom plugin import
import { ImagekitMediaLibraryWidget } from 'imagekit-ckeditor5-plugin';
export default class ClassicEditor extends ClassicEditorBase {}
// Plugins to include in the build.
ClassicEditor.builtinPlugins = [
// include custom plugin in build
ImagekitMediaLibraryWidget,
// ...other components
];
// COnfigure the `imagekitMediaLibraryWidget` plugin to display on the editor toolbar
ClassicEditor.defaultConfig = {
toolbar: {
items: [
'imagekitMediaLibraryWidget',
// ...other ckeditor plugins
]
},
// ...other settings
language: 'en'
};
Build the editor as follows:
npm 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>
Import the generated build files in your web project:
<script src="<path_to_web_project>/ckeditor.js"></script>
Provide HTML container elements for widget instance as well as editor instance:
<div class="editor"></div>
<div class="ml-container"></div>
Create a JavaScript object with configuration options for the plugin:
var pluginOptions = {
container: '.ml-container',
className: 'media-library-widget',
dimensions: {
height: '100%',
width: '100%',
},
};
Create an editor instance that includes the
imagekitMediaLibraryWidget plugin on the toolbar, with its configuration options.// ckeditor
var editor;
// initialize ckeditor
ClassicEditor
.create(document.querySelector('.editor'), {
imagekitMediaLibraryWidget: {
config: pluginOptions
}
})
.then(newEditor => {
editor = newEditor;
window.editor = newEditor;
}).catch(error => {
console.error(error);
});
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, let you search and select existing images, and 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.
To use this plugin on Google Chrome in Incognito mode, you need to enable third-party cookies:
Last modified 2yr ago