CKEditor CDN
Speed up your website by loading CKEditor from CDN:
- CKEditor is hosted on servers spread across the globe - scripts are loaded faster because they are served from the nearest locations to the end user.
- If the same version of CKEditor has already been downloaded (even on a different website), it is loaded from cache.
- CDN reduces the number of HTTP requests handled by your server so it speeds it up as well!
CKEditor 5
Get Started with CKEditor 5 Builder đ
With CKEditor 5âs interactive builder, select:
- The features you need.
- Your preferred framework (React, Angular, Vue, or Vanilla JS).
- Your preferred distribution method (CDN or npm).
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/43.3.1/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 type="importmap">
{
"imports": {
"ckeditor5": "https://cdn.ckeditor.com/ckeditor5/43.3.1/ckeditor5.js",
"ckeditor5/": "https://cdn.ckeditor.com/ckeditor5/43.3.1/"
}
}
</script>
<script type="module">
import {
ClassicEditor,
Essentials,
Paragraph,
Bold,
Italic,
Font
} from 'ckeditor5';
ClassicEditor
.create( document.querySelector( '#editor' ), {
plugins: [ Essentials, Paragraph, Bold, Italic, Font ],
toolbar: [
'undo', 'redo', '|', 'bold', 'italic', '|',
'fontSize', 'fontFamily', 'fontColor', 'fontBackgroundColor'
]
} )
.then( editor => {
window.editor = editor;
} )
.catch( error => {
console.error( error );
} );
</script>
<!-- A friendly reminder to run on a server, remove this during the integration. -->
<script>
window.onload = function() {
if ( window.location.protocol === "file:" ) {
alert( "This sample requires an HTTP server. Please serve this file with a web server." );
}
};
</script>
</body>
</html>
JavaScript URL Structure
The JavaScript URL structure for CKEditor 5 is as follows:
-
Open-source features:
https://cdn.ckeditor.com/ckeditor5/<VERSION>/ckeditor5.js
-
Premium features:
https://cdn.ckeditor.com/ckeditor5-premium-features/<VERSION>/ckeditor5-premium-features.js
CSS URL Structure
The CSS URL structure for CKEditor 5 is as follows:
-
Open-source features:
https://cdn.ckeditor.com/ckeditor5/<VERSION>/ckeditor5.css
-
Premium features:
https://cdn.ckeditor.com/ckeditor5-premium-features/<VERSION>/ckeditor5-premium-features.css
Translations URL Structure
-
Open-source features:
https://cdn.ckeditor.com/ckeditor5/<VERSION>/translations/<lang>.js
-
Premium features:
https://cdn.ckeditor.com/ckeditor5-premium-features/<VERSION>/translations/<lang>.js
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.0-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.0-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>
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:
- basic - the Basic preset
- standard - the Standard preset
- standard-all - the Standard preset together with all other plugins created by CKSource*
- full - the Full preset
- full-all - the Full preset together with all other plugins created by CKSource*
* Plugins not included in a preset need to be enabled with config.extraPlugins
.
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:
- The name of the plugin.
- The location of the plugin. Make sure that the path starts with a slash character ("/").
- File name (usually "plugin.js").
// 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:
config.customConfig
- The path to CKEditor configuration file. For more details, see Setting CKEditor Configuration.config.contentsCss
- The CSS file(s) to be used to apply style to the content.config.stylesSet
- The "styles definition set" to use in the styles dropdown list. For more details, see Setting Styles.config.templates_files
- The list of template files to use in the templates dialog window.
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'
} );