Adding local plugins to CKEditor

Question

I'm using CKEditor4 full version using CDN:

<script src="//cdn.ckeditor.com/4.10.0/full/ckeditor.js"></script>

I want to add extra plugins to CKEditor, I downloaded the files and want to add them.

I tried:

CKEDITOR.plugins.addExternal( 'simplebutton', 'http://localhost/ckeditor/plugins/simplebutton', 'plugin.js' );
CKEDITOR.replace( 'editor', {
     extraPlugins: 'simplebutton',
     toolbar: [
         { name: 'simplebutton', items: [ 'simplebutton' ] }
     ]
});

But I get these errors:

Uncaught SyntaxError: Unexpected token <   ?t=I63Cplugin.js:1 

Uncaught TypeError: Cannot read property 'icons' of null  ckeditor.js:264
at CKEDITOR.resourceManager.<anonymous> (ckeditor.js:264)
at CKEDITOR.resourceManager.<anonymous> (ckeditor.js:263)
at e (ckeditor.js:258)
at Array.y (ckeditor.js:258)
at v (ckeditor.js:258)
at ckeditor.js:259

I will add other plugins.

Is that's because I have to enter the exiting toolbar options, Then add new buttons?

Answer 1

There might be multiple reasons for this.

First see addExternal API docs:

// Loads a plugin from '/myplugins/sample/plugin.js'.
CKEDITOR.plugins.addExternal( 'sample', '/myplugins/sample/' );

// Loads a plugin from '/myplugins/sample/my_plugin.js'.
CKEDITOR.plugins.addExternal( 'sample', '/myplugins/sample/', 'my_plugin.js' );

// Loads a plugin from '/myplugins/sample/my_plugin.js'.
CKEDITOR.plugins.addExternal( 'sample', '/myplugins/sample/my_plugin.js', '' );

Note that each example has a tailing / character, so try with CKEDITOR.plugins.addExternal( 'simplebutton', '//localhost/plugins/simplebutton/', 'plugin.js' ); instead.

If it still doesn't work, make sure that your web server actually returns a proper content, because SyntaxError: Unexpected token < looks like HTML was served instead of HTML. You can use your browser network inspector to check that.