How to use CKEditor as an NPM module built with webpack or similar

Question

How can I use CKEditor from npm with webpack?

Ideally I want npm install ckeditor --save then var CK = require('ckeditor'); without any global namespace pollution.

Answer 1

The problem

As far as I can tell it isn't currently possible to load CKEDITOR directly into webpack as a chunck without getting some errors, especially when starting to load additional plugins. One of the reasons for this seems to be that ckeditor does it's own async requests at runtime causing various things to break in nearly all of the implementations I have tried.

The solution

Use scriptjs to load it as an external library.

npm install scriptjs --save

Now in your code you can call it like so:

var $s = require('scriptjs');
$s('./vendor/ckeditor/ckeditor.js', function(){
    CKEDITOR.replace('editor1');
});

Please Note.

This will not work on the uncompressed source because the ckeditor functions are not directly in the ckeditor.js file. This will cause the rest of your logic to run before the CKEDITOR object is fully constructed due to unfinished network requests.

If you wish to modify the source code of CKEDITOR clone https://github.com/ckeditor/ckeditor-dev and run it's build script to get a working customised version.

It looks like CKEditor is embracing ES6 in version 5 and I suspect they will have webpack support in this version but who knows how long it will be in development before it is released.

If there is a better way of doing this, please let me know.