Speed up your website by loading CKEditor from CDN:
To start using CKEditor on your website, add a single <script> tag to your HTML page:
<script src="https://cdn.ckeditor.com/4.7.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.7.0/standard/ckeditor.js"></script> </head> <body> <textarea name="editor1"></textarea> <script> CKEDITOR.replace( 'editor1' ); </script> </body> </html>
The URL structure 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.
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 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/' } );
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' } );