Installing CKEditor with npm

Question

I am trying to install CKEditor in my project. I am using Laravel.

I know I could download the files but I like making my life difficult and I decided that I want to install CKEditor as a npm dependency.

As stated in their documentation here, I added the package to package.json, like this:

"dependencies": {
    "jquery": "^1.11.1",
    "bootstrap-sass": "^3.0.0",
    "elixir-coffeeify": "^1.0.3",
    "laravel-elixir": "^4.0.0",
    "font-awesome": "^4.5.0",
    "ckeditor": "^4.5.7"
}

Now I guess I have to require it in my app.coffee, and so I tried:

window.$ = window.jQuery = require('jquery')
require('bootstrap-sass')
require('ckeditor')

This surely adds the ckeditor.js script to my app.js. However ckeditor seems to have its own dependencies such as config.js or editor.css, and of course the server responds with 404 for those requests.

How could I install CKeditor this way?

Thank you!

f1ames · Accepted Answer · 2016-07-28T05:50:23.980

There is probably a problem with paths to those CKEditor dependencies. I'm not sure if you are using browserify or something different but for example in browserify using require('ckeditor') will result in ckeditor.js (bundled probably with other js files) file loading from same dir as your app.coffee file while CKEditor dependencies are in node_modules/ckeditor/ dir.

To tell CKEditor from which directory it should load its dependency you may use CKEDITOR_BASEPATH:

window.CKEDITOR_BASEPATH = 'node_modules/ckeditor/'
require('ckeditor')

You may see if there is a problem with loading those files using Network tab in Dev console (e.g. F12 in Chrome).

Note that it's not ideal solution for production environment because then you need node_modules folder on your server. You should probably consider moving only those dependencies to other folder during building/releasing process (and use CKEDITOR_BASEPATH as before with path to this production folder).

score -1 · Answer 2 · edited Aug 22 '21 at 20:33

Open the resources/js/app.js file

Add the following line:

window.ClassicEditor = require('@ckeditor/ckeditor5-build-classic');

Then execute the Laravel Mix command

npm run dev

HTML JS:

<html lang="es">
<head>
    <meta charset="utf-8">
    <title>CKEditor 5 – Classic editor</title>
    <script src="[path]/public/app.js"></script>
</head>
<body>
    <h1>Classic editor</h1>
    <div id="editor">
        <p>This is some sample content.</p>
    </div>
    <script>
        ClassicEditor
            .create( document.querySelector( '#editor' ) )
            .catch( error => {
                console.error( error );
            } );
    </script>
</body>
</html>

Installing CKEditor with npm

2 Answers2

Linked