How to overwrite a file required by a javascript library hosted in a CDN (elsewhere)?

Question

I've wanted to add CKEditor in a web page I'm designing by adding its Javascript library hosted in a content delivery network ( jsdelivr ). The problem is: two files contents.css and config.js that ckeditor.js depends upon must be customized (which I did and included in same folder my HTML file is in) gives 404 error; ckeditor.js looks for those files in CDN's folder and ignores ones I've added in local folder.

This is how I added js files:

I plan to use libraries from CDNs in future and expect to get similar errors. What am I doing wrong? Any suggestions?

Thanks

Answer 1

That's right. When you upload a js file or css file on a CDN and inside there is a relative path, then the browser tries to figure out the resource relative to the css or js file. That is why you get this error. If you upload everything in the CDN there shouldn't be any problem.

If you want to keep some files on CDN and others locally you should specify absolute paths in your resources.

Answer 2

CKEditor offers an option for that: http://docs.cksource.com/CKEditor_3.x/Developers_Guide/Specifying_the_Editor_Path

Try adding

var CKEDITOR_BASEPATH = '//mylocalserver/ckeditor/';

before loading the ckeditor.js

Maybe this does the trick for you.

Answer 3

config.js and content.css are missing from jsdelivr.net all together which they shouldn't be because CKEditor does work only when it loads all required files and it lets you change configuration after initial load. If you define CKEDITOR_BASEPATH to your local before ckeditor.js loads, you have to put any other CKEditor subfolder in your local because from now on CKEditor looks your local and then it doesn't make sense to use a CDN.

However this one works: http://cdnjs.com/

CDNJS has all default files and is configured for full editor. If you don't want full editor you can define a custom configuration just after first load as defined here:

http://docs.ckeditor.com/#!/guide/dev_configuration

Note: You have to use full path of your custom config file as seen below:

<script type="text/javascript">
CKEDITOR.replace( 'editor1',
{customConfig: '//www.yourdomain.com/yourfolder/config.js'});
</script>

I've put this code just before body end tag of my html file.

Answer 4

Those two files aren't really required.

You can specify a different custom config file and in that file specify that it doesn't have to try to load any other config file, and the contents.css is also a default, but you can specify in your config file the path to the file that you want to use to style the contents of the editor.