CKEDITOR has incorrect basepath when using NPM & Laravel Mix

Question

When I attempt to include CKEDITOR into my new Laravel 5.5 project using NPM, I get the following error in Chrome Console (using laravel Valet for the local.dev):

app.js:16991 GET https://local.dev/chart/config.js?t=H7HG 
app.js:16991 GET https://local.dev/chart/skins/moono-lisa/editor.css?t=H7HG 
app.js:16991 GET https://local.dev/chart/lang/en.js?t=H7HG 

My Laravel Mix setup looks like this:

mix.js('resources/assets/js/app.js', 'public/js')
  .babel(['resources/assets/js/libraries/*.js'], 'public/js/vendor.js')
  .version();

My CKEDITOR installation is located in:

/vendor/ckeditor/ckeditor

I am able to access the CKEDITOR instance when the site has loaded. However, as displayed above, when I navigate to https://local.dev/chart, CKEDITOR now looks for the config, skin, and lang files with /chart appended to it's basepath.

I did some research, and found some related issues and was able to change the base_path using asset() successfully. The related stackOverflow questions can be found here and here.

What I would like to do is pull CKEDITOR in through NPM, use Laravel Mix to combine, version, and minify my scripts (one for vendor libraries, one for my app-specific JS), and then output those two.js files to these directories in the laravel app:

 /public/js/vendor.js
 /public/js/app.js

Laravel mix produces these two files, builds successfully, and all other libraries play nicely. However, CKEDITOR loses it's base path and throws errors looking for skins / langs / config.js -- any idea how I can adjust CKEDITOR's basePath to point to the vendor files so that it'll stop squaking these errors and work correctly?

Thanks you in advance for any assistance you can provide!

Answer 1

For those of you having the same issue as me, I found a work around that didn't involve modifying CKEDITOR at all:

Used Webpack to copy the needed CKEDITOR files:

.copy('node_modules/ckeditor/config.js', 'public/js/ckeditor/config.js')
.copy('node_modules/ckeditor/styles.js', 'public/js/ckeditor/styles.js')
.copy('node_modules/ckeditor/contents.css', 'public/js/ckeditor/contents.css')
.copyDirectory('node_modules/ckeditor/skins', 'public/js/ckeditor/skins')
.copyDirectory('node_modules/ckeditor/lang', 'public/js/ckeditor/lang')
.copyDirectory('node_modules/ckeditor/plugins', 'public/js/ckeditor/plugins')

Then, in the body of your page, add:

<script> var CKEDITOR_BASEPATH = '/js/ckeditor/'; </script>

This will allow CKEDITOR to find the desired files. This felt a little ugly to me, so maybe there is a better way to do this - if so, please let me know and downvote this answer.

Answer 2

That error had for me but i changed the code and problem is solving. After than write codes the webpack.mix.js, Just: In your app.js or bootstrap.js after than require or import, write this code:

CKEDITOR.basePath = '/admin/ckeditor/'

I hope problem is solved. Thank.

Answer 3

Since I can't add a comment, just wanted to provide an alternative way to

<script> var CKEDITOR_BASEPATH = '/js/ckeditor/'; </script>

In your app.js you could do the following instead of the above:

 window.CKEDITOR_BASEPATH = '/js/ckeditor/';