CKEditor missing/incorrect basePath in Drupal 7

Question

In a custom module, I've included CKEditor

drupal_add_js( 'sites/all/libraries/ckeditor/ckeditor.js',array('weight'=>JS_LIBRARY+1));
drupal_add_js( 'sites/all/libraries/ckeditor/adapters/jquery.js',array('weight'=>JS_LIBRARY+2));

And in my JS I'm now creating an instance on a textarea using

jQuery('#myTextArea').ckeditor();

This was working, but now isn't. Looking in Firebug, I see that ckeditor is trying to access config.js , and that it's looking for this at the URL of the page. It should be looking to http://example.com/sites/all/libraries/ckeditor/ .

I can't think what's changed recently that might have broken it!

I've tried passing config { basePath: '/sites/all/libraries/ckeditor/' } into the ckeditor() call but this is ignored, probably can't set this at runtime?

Anyone know what I'm doing wrong, or if this is a bug, is there a work around?

Answer 1

As I commented, this seems to be to do with when the editor is loaded via Drupal's JS aggregation

Here is an ugly hack that it worked for me.

Edit the sites/all/libraries/ckeditor/ckeditor.js file and before the compressed js code add:

window.CKEDITOR_BASEPATH = 'http://example.com/sites/all/libraries/ckeditor/';

Then just remember to do that every time you upgrade.

PS. Credit on basepath hint .

Answer 2

CKEditor (tested 4.4.4) has a problem determining the correct base path, when you change the default ckeditor.js filename. For example, when you add a cachebreaker for live deployment or use an aggregated name.

You can easily reproduce that behavior, with the output of the property: CKEDITOR.basePath

Your are on a website (assume http://example.de ) with the path /a/b/c/d, using the original ckeditor filename /ext/ckeditor/ckeditor.js:

Website: http://example.de/a/b/c/d
CKeditor: http://example.de/ext/ckeditor/ckeditor.js

console.log(CKEDITOR.basePath); //output: http://example.de/ext/ckeditor/ 

You are on the same website, same path and ckeditor.js changed:

Website: http://example.de/a/b/c/d
CKeditor: http://example.de/ext/ckeditor/ckeditor-whatever.js

console.log(CKEDITOR.basePath); //output: http://example.de/a/b/c/ 

Typically the JavaScript Console shows errors like:

Line 1: Uncaught SyntaxError: Unexpected token <
Uncaught TypeError: Cannot set property 'dir' of undefined

Therefore it is always necessary to set the base path, if you change the default filename ckeditor.js.