cdn.ckeditor.com
Open in
urlscan Pro
205.234.175.175
Public Scan
URL:
http://cdn.ckeditor.com/
Submission: On April 13 via manual from US — Scanned from DE
Submission: On April 13 via manual from US — Scanned from DE
Form analysis 0 forms found in the DOM
Text Content
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
To start using CKEditor 5 Builds on your website, add a single <script> tag to
your HTML page:
<script src="https://cdn.ckeditor.com/ckeditor5/37.0.1/classic/ckeditor.js"></script>
Quick example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CKEditor</title>
<script src="https://cdn.ckeditor.com/ckeditor5/37.0.1/classic/ckeditor.js"></script>
</head>
<body>
<div id="editor">This is some sample content.</div>
<script>
ClassicEditor
.create( document.querySelector( '#editor' ) )
.then( editor => {
console.log( editor );
} )
.catch( error => {
console.error( error );
} );
</script>
</body>
</html>
URL STRUCTURE
The URL structure for CKEditor 5 is as follows:
<script src="https://cdn.ckeditor.com/ckeditor5/[version.number]/[distribution]/ckeditor.js"></script>
The following distributions (see CKEditor 5 Builds overview) are available:
* classic - the Classic editor
* inline - the Inline editor
* balloon - the Balloon editor
* balloon-block - the Balloon block editor
* decoupled-document - the Document editor
* multi-root - the Multi-root editor
* superbuild - the Superbuild
When choosing a different build than Classic editor, make sure in the example
above to change not only the URL to a build but also the initialization code as
each build comes with a different editor class (ClassicEditor, InlineEditor,
BalloonEditor (used by Baloon editor and Balloon block editor), DecoupledEditor,
MultiRootEditor).
CKEDITOR 4
To start using CKEditor 4 on your website, add a single <script> tag to your
HTML page:
<script src="https://cdn.ckeditor.com/4.21.0/standard/ckeditor.js"></script>
Quick example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CKEditor</title>
<script src="https://cdn.ckeditor.com/4.21.0/standard/ckeditor.js"></script>
</head>
<body>
<textarea name="editor1"></textarea>
<script>
CKEDITOR.replace( 'editor1' );
</script>
</body>
</html>
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.
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:
* 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'
} );
© 2003-2023, CKSource Holding sp. z o.o. All rights reserved.