CKEditor 4 build (minify and uglify)

Question

In our build process (using grunt), we concatenate, minify and uglify all our scripts into a single one (also meaning a single request only).

Now CKEditor 4 seems to be using a module style loading approach.

Can anybody tell me how to include CKEditor 4 into a project with all the sources necessary, so there will be no dynamic loading later?

Answer 1

CKEditor works in two modes:

1. In the development (source) mode:

   1. you include the ckeditor.js file,
   2. it loads all core files,
   3. it loads config.js (you can switch that off by setting config.customConfig to a falsy value),
   4. it loads styles set file unless you set config.stylesSet to false (since 4.1RC) or an array of styles (direct setting),
   5. it checks which plugins it should load,
   6. it loads plugins and dependencies of these plugins,
   7. it loads plugins' language files,
   8. it initialises all plugins,
   9. in the meantime a bunch of styleheet files (few for the editor UI and one for contents unless that's an inline editor) and icon files (one per button) are loaded,
   10. and it's ready!
   11. but if you open a dialog it will load the dialog's JS file; the same about e.g. the paste from word filter which is loaded on demand; the idea is that these things are not required at the beginning and they are pretty heavy, so it's better to load them later.

2. In release (build) mode, which you can create using the online builder, or the presets builder or the dev builder available directly in the dev repo, things are optimized:

   1. you include the ckeditor.js file,
   2. it contains all core files and all plugin files included in your build
   3. config.js and styles.js files are downloaded separately, but like in the development mode you can save these 2 HTTP requests,
   4. one language file is loaded with translations for all plugins included in the build,
   5. all plugins are initialised,
   6. one stylesheet file for the editor UI and one for contents (unless that's an inline editor) are loaded plus one icons strip,
   7. and it's ready!
   8. dialog files and paste from word filter file are loaded on demand.

Note: all JS and CSS files are minified in the release mode.

You can try to optimize few things.

1. You can try to concatenate ckeditor.js with language file, dialogs and PSW filter files - so all JS files may be concatenated together AFAIK.
2. Editor UI stylesheet file can be perhaps concatenated with your page's stylesheets, but you'll have to find a way to prevent editor from loading it by itself.
3. Contents stylesheet - you can remove it even if you use framed editor, but you'll need to style contents using the fullPage feature (not recommended).
4. You can't merge icons strip with your strip.

That's all, I guess. I think that by default a CKEditor build is optimized very well. You can improve some things but you will not save a lot of time and you'll lose some features like automatic language recognition.

Answer 2

I implemented suggestions 2 and 3 from Reinmar's answer - here's how I did it:

2. "Editor UI stylesheet file can be perhaps concatenated with your page's stylesheets, but you'll have to find a way to prevent editor from loading it by itself"

var swap = CKEDITOR.skin.loadPart; CKEDITOR.skin.loadPart = function(res, callback) {     if (res == 'editor') {         console.log('Ignoring editor.css load');         callback && callback();         return;     }     swap(res, callback); } 

I then bundled editor.css into my bundled file.

3. Contents stylesheet - you can remove it even if you use framed editor, but you'll need to style contents using the fullPage feature (not recommended).

// I copied the content.css from ckeditor-dev and loaded it into contentCss. var contentCss = 'put your css here';  var config = {     // Other things here     // ...      contentCss: contentCss };  ckeditor.replace(element, config); 

Both are done at initialization time (in my code they're in the function that calls ckeditor.replace, as shown in 3).

These are most certianly hacks, but for my current use the optimizations enabled by these hacks are worth it.

Also, in lieu of implementing suggestion 1., I prevent other js files from loading by setting customConfig: '' and stylesSet: false in the config.