ckeditor - Uncaught TypeError: Cannot read property 'icons' of null

Question

When trying to use ckeditor for the first time. ckeditor works, but when I try to add imageupload and uploadloadwidget plugins then I get the error: Uncaught TypeError: Cannot read property 'icons' of null

Does anyone have any ideas as to what might be causing it?

<script src="//cdn.ckeditor.com/4.5.6/basic/ckeditor.js"></script>

<script>
    $(document).ready(function () {
        CKEDITOR.plugins.addExternal('imageupload', '/ckeditor/plugins/imageupload/');
        CKEDITOR.plugins.addExternal('uploadwidget', '/ckeditor/plugins/uploadwidget/');
        CKEDITOR.replace('htmleditor', {
            htmlEncodeOutput: true,
            extraPlugins: 'imageupload,uploadwidget'

        });
    });
</script>

Answer 1

Too late for the original poster, but I had this same problem and it turned out that I hadn't included the UploadWidget pluging that UploadImage was dependent on.

Answer 2

Make sure your path has pointed to a valid icon file, is it .ico? or .png? if not set your path to the valid image/icon file. This should solve the problem.

Answer 3

Kindly take a look at this http://ckeditor.com/addon/uploadimage and this http://sdk.ckeditor.com/samples/fileupload.html#uploading-dropped-and-pasted-images for reference.

You'll have to setup the upload url and enable the uploadimage plugin in the configs like this:

config.extraPlugins = 'uploadimage';
config.imageUploadUrl = '/uploader/upload.php?type=Images';

editor.on( 'fileUploadRequest', function( evt ) {
    var fileLoader = evt.data.fileLoader,
        formData = new FormData(),
        xhr = fileLoader.xhr;

    xhr.open( 'PUT', fileLoader.uploadUrl, true );
    formData.append( 'upload', fileLoader.file, fileLoader.fileName );
    fileLoader.xhr.send( formData );

    // Prevented the default behavior.
    evt.stop();
}, null, null, 4 ); // Listener with a priority 4 will be executed before priority 5.

The docs has more info on this and how to handle different scenarios