Can't add custom plugin to CKEditor

Question

I am using version 4.7 of CKEditor, the last one on actual moment. My problem is that I try to add a new custom plugin but can't see it in the toolbar and can't find out what is wrong in my basic example of abbr(abbreviation). Here is my `config.js

  CKEDITOR.editorConfig = function( config ) {
            config.extraPlugins = 'abbr,insertpre,image',
            config.language = 'en';
            config.uiColor = '#9FCDFF';
            config.height = 300;
            allowedContent: true;
            config.toolbar = 'Custom',
            config.toolbar_Custom =  [
                { name: 'abbr', groups: [ 'abbrGroup' ], items: [ 'abbr'] },
                { name: 'editing', items: [ 'Find', 'Replace' ] },
                /*here go more options which are 
                by default and I can delete or display them with no problem*/
            ];
        };

in the plugin folder with name abbr I have file plugin.js with next configuration:

CKEDITOR.plugins.add( 'abbr', {
// Register the icons.
icons: 'abbr',
// The plugin initialization logic goes inside this method.
init: function( editor ) {
    // Define an editor command that opens our dialog window.
    editor.addCommand( 'abbr', new CKEDITOR.dialogCommand( 'abbrDialog' ) );
    // Create a toolbar button that executes the above command.
    editor.ui.addButton( 'Abbr', {
        // The text part of the button (if available) and the tooltip.
        label: 'Insert Abbreviation',
        // The command to execute on click.
        command: 'abbr',
        // The button placement in the toolbar (toolbar group name).
        toolbar: 'insert'
    });
    if ( editor.contextMenu ) {
        // Add a context menu group with the Edit Abbreviation item.
        editor.addMenuGroup( 'abbrGroup' );
        editor.addMenuItem( 'abbrItem', {
            label: 'Edit Abbreviation',
            icon: this.path + 'icons/abbr.png',
            command: 'abbr',
            group: 'abbrGroup'
        });
        editor.contextMenu.addListener( function( element ) {
            if ( element.getAscendant( 'abbr', true ) ) {
                return { abbrItem: CKEDITOR.TRISTATE_OFF };
            }
        });
    }
        // Register our dialog file -- this.path is the plugin folder path.
        CKEDITOR.dialog.add( 'abbrDialog', this.path + 'dialogs/abbr.js' );
    }
});

also I have the abbr.js where the dialog have to pop up

CKEDITOR.dialog.add( 'abbrDialog', function( editor ) {
    return {
        // Basic properties of the dialog window: title, minimum size.
        title: 'Abbreviation Properties',
        minWidth: 400,
        minHeight: 200,
        // Dialog window content definition.
        contents: [{
         /*here go the logic of pop up functions*/
        }];
});

and I call the editor in my view file in next way

<script src="<?= base_url('../ckeditor/ckeditor.js') ?>"></script>
<textarea id="editor1" class="ckeditor" name="editor"></textarea>

I really can't understand what I am doing wrong because I can't see the button. I have similar code for different plugins which I try to add the same think. I also clear the cache and after every change use Ctrl+F5. The structure of plugin folder is standard, in the main folder there is plugin.js and the rest is according to the standard structure. Also the image I use for testing I moved from other existing plugin because I found out it can be an issue too.
*Note the button of custom plugin is not visible in any form on the panel so is not image

*UPDATE

Based on @j.swiderski answer I made all correction, and the problem was in the way of calling> I was doing in config like

{ name: 'abbr', groups: [ 'abbrGroup' ], items: [ 'abbr'] },

But now I call it like this

 { name: 'abbr', items: [ 'Abbr'] },

Hope will help someone else.

j.swiderski · Accepted Answer · 2017-08-17 18:54:21Z

1

The main problem is the Button Name which should be written the same as defined in the plugin. Inside the plugin (actually all core editor plugins follow this convention) button name is uppercase so in your configuration toolbar item for Abbreviation plugin should be defined as

{ name: 'abbr', groups: [ 'abbrGroup' ], items: [ 'Abbr'] },//Notice the uppercase

and not as

{ name: 'abbr', groups: [ 'abbrGroup' ], items: [ 'abbr'] },

Apart from main problem there are few syntax problems in your config.js file:

a. Below should end with a semicolon and not with a comma

config.extraPlugins = 'abbr,insertpre,image';
config.toolbar = 'Custom';

b. Inside config.js you should use config.allowedContent = true; instead of allowedContent: true;. I must stress however that disabling ACF, especially if don't have the requirement that any content can be entered into editor, is not recommended and it is much better to configure it. Please see: https://docs.ckeditor.com/#!/guide/dev_acf as well as related links.

answered Aug 17, 2017 at 18:54

j.swiderski

2,4452 gold badges14 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Alexei Over a year ago

Your answer clear up my mind a bit, but still is not working, this is my first touch with core .js so is hard for me to understand the interconnection.

j.swiderski Over a year ago

Could you open browser developer-tools (F12 in Chrome) switch to Console and tell me what error you are getting? As a test, please also try commenting out two settings for toolbar custom. The abbr plugin inside the button definition has toolbar: 'insert' what means that if you add it in extraPlugins, it will automatically showup in the toolbar.

Alexei Over a year ago

I had the insert configuration done before in plugin.js, and all the time in console where no errors.

j.swiderski Over a year ago

I can see the answer being marked as accepted. Does this mean you have managed to solve your problem? If not, could you simply download CKEditor full package, download abbr plugin, put it in plugins folder and in config.js add config.extraPlugins = 'abbr'. This should be enough to run the plugin because toolbar configuration is already inside it.

Alexei Over a year ago

I did this before putting the question here, my problem was that I was not able to display button of abbr(or my plugin), I used now this example to finish my custom plugin function. Tx a lot for help.

|

Collectives™ on Stack Overflow

Can't add custom plugin to CKEditor

*UPDATE

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

*UPDATE

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related