CKEditor Cloud CDN

Speed up your website by loading CKEditor from CDN:

CKEditor 5

Create an account for CKEditor 5 Cloud CDN usage

To use the CKEditor 5 Cloud CDN, start by creating an account to obtain a license key. A free account is available, which includes a 14-day trial, and allows up to 1,000 editor loads per month.

If you need additional editor loads or advanced features, you can explore other subscription plans to find the one that best fits your needs.

Get Started with CKEditor 5 Builder 🚀

With CKEditor 5’s interactive builder, select:

You’ll get ready-to-use code snippets, tailored to your needs.

Quick Example

Use a local HTTP server to load the full example below: 

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>CKEditor 5 - Quick start CDN</title>
		<link rel="stylesheet" href="https://cdn.ckeditor.com/ckeditor5/45.1.0/ckeditor5.css">
		<style>
			.main-container {
				width: 795px;
				margin-left: auto;
				margin-right: auto;
			}
		</style>
	</head>
	<body>
		<div class="main-container">
			<div id="editor">
				<p>Hello from CKEditor 5!</p>
			</div>
		</div>
		<script src="https://cdn.ckeditor.com/ckeditor5/45.1.0/ckeditor5.umd.js"></script>
		<script>
		const {
			ClassicEditor,
			Essentials,
			Bold,
			Italic,
			Font,
			Paragraph
		} = CKEDITOR;

		ClassicEditor
			.create( document.querySelector( '#editor' ), {
				licenseKey: '<YOUR_LICENSE_KEY>', // Create a free account on https://portal.ckeditor.com/checkout?plan=free
				plugins: [ Essentials, Bold, Italic, Font, Paragraph ],
				toolbar: [
					'undo', 'redo', '|', 'bold', 'italic', '|',
					'fontSize', 'fontFamily', 'fontColor', 'fontBackgroundColor'
				]
			} )
				.then( editor => {
					window.editor = editor;
				} )
				.catch( error => {
					console.error( error );
				} );
		</script>
	</body>
</html>

JavaScript URL Structure

The JavaScript URL structure for CKEditor 5 is as follows:

CSS URL Structure

The CSS URL structure for CKEditor 5 is as follows:

Translations URL Structure

Don’t Know How To Start?

Try the CKEditor 5 Builder 😊

CKEditor 4

Long Term Support

A special edition, CKEditor 4 LTS (“Long Term Support”), is available under commercial terms ("Extended Support Model") for anyone looking to extend the coverage of security updates and critical bug fixes.

To start using CKEditor 4 LTS on your website, add a single <script> tag to your HTML page:

<script src="https://cdn.ckeditor.com/4.25.1-lts/standard/ckeditor.js"></script>

Quick example:

<!DOCTYPE html>
<html>
		<head>
				<meta charset="utf-8">
				<title>CKEditor</title>
				<script src="https://cdn.ckeditor.com/4.25.1-lts/standard/ckeditor.js"></script>
		</head>
		<body>
				<textarea name="editor1"></textarea>
				<script>
						CKEDITOR.replace( 'editor1' );
				</script>
		</body>
</html>

Open Source

To start using CKEditor 4 OS on your website, add a single <script> tag to your HTML page:

<script src="https://cdn.ckeditor.com/4.22.1/standard/ckeditor.js"></script>
Note: You may continue using CKEditor 4.22.1 and below under the open source license terms. Please note, however, that the open source version no longer comes with any security updates, so your application will be at risk.

URL Structure

The URL structure for CKEditor 4 is as follows:

<script src="https://cdn.ckeditor.com/[version.number]/[distribution]/ckeditor.js"></script>

The following distributions (see comparison table) are available:

* Plugins not included in a preset need to be enabled with config.extraPlugins.

Note: Due to a human error to use CKEditor 4.4.5, you should specify 4.4.5.1. The path that points to 4.4.5 actually points to an older version of CKEditor (4.3.5). To avoid issues on existing installations, we decided to keep the (invalid) old version under that path.

Enabling Local Plugins

To enable an extra plugin from a local folder while using CKEditor CDN, CKEDITOR.plugins.addExternal() must be called first so that CKEditor knew from where to load the plugin.

The CKEDITOR.plugins.addExternal() method accepts three parameters:

// Enable local "abbr" plugin from /myplugins/abbr/ folder.
CKEDITOR.plugins.addExternal( 'abbr', '/myplugins/abbr/', 'plugin.js' );

// extraPlugins needs to be set too.
CKEDITOR.replace( 'editor1', {
		extraPlugins: 'abbr'
} );

Enabling Local Skins

Enabling skins from a local folder is even easier than enabling plugins. To use a custom CKEditor skin while using CKEditor CDN, use config.skin and provide both, the skin name and the full URL after a comma:

// Enable "moonocolor" skin from the /myskins/moonocolor/ folder.
CKEDITOR.replace( 'editor1', {
		skin: 'moonocolor,/myskins/moonocolor/'
} );

Local Configuration Files

Some features in CKEditor are configured through JavaScript files by default. Since all files are loaded from remote CDN, there is no way to modify them directly. You can however instruct CKEditor to load local files instead, if you need to:

In case of setting any of the options above, it is highly recommended to download locally the same CKEditor package that is loaded from CDN in order to copy included configuration files and use them as base files for adding additional changes.

// Always provide paths that start with a slash character ("/").
CKEDITOR.replace( 'editor1', {
		customConfig: '/ckeditor_settings/config.js'
} );

© 2003-2025, CKSource Holding sp. z o.o. All rights reserved.