Search code examples
pluginsckeditorckeditor4.xdjango-ckeditor

CKeditor: how to load custom plugin?

I am trying to create a custom plugin for CKeditor following this guide. I created the files as indicated (myplugin.png, myplugin.js, plugin.js) and added

CKEDITOR_CONFIGS = { 'default': { 'extraPlugins': ','.join( [ 'myplugin' ] ), } }

to the settings.

However, when I try to load the page, the editor doesn't appear and I get the following error in the console:

GET http://127.0.0.1:8000/static/ckeditor/ckeditor/plugins/myplugin/plugin.js?t=GB8C 404 (NOT FOUND)

and in Firebug:

Error: [CKEDITOR.resourceManager.load] Resource name "myplugin" was not found at "http://127.0.0.1:8000/static/ckeditor/ckeditor/plugins/myplugin/plugin.js?t=GB8C".

All the files are exactly at the path shown here. I probably did something wrong but I can't find what. I'd appreciate a bit of help thank you. This is the content of my plugin.js file:

CKEDITOR.plugins.add( 'myplugin', {
    icons: 'myplugin',
    init: function( editor ) {
        // Plugin logic goes here...
        editor.addCommand( 'myplugin', new CKEDITOR.dialogCommand( 'mypluginDialog' ) );

        editor.ui.addButton( 'myplugin', {
            label: 'My Plugin',
            command: 'myplugin',
            toolbar: 'insert'
        });
    }
});

Cheers

Solution

  • I actually found the issue. It is not related to CKeditor but to the way Django handles static files. I have put my custom plugin into the ckeditor folder located in the static folder. This s wrong. The static folder designated by the STATIC_ROOT is to be filled only by running collectstatic. Any file added in other ways will be ignored. By putting the files related to the custom plugin into another folder, listed in STATICFILES_DIRS, then running collectstatic, it gets added to the STATIC_ROOT folder and can then be served. I still have errors, but not related to finding the resource.