CODEWITHSUNDEEP
javascriptjqueryckeditor
Alexei
Alexei

Reputation: 119

Can't add custom plugin to CKEditor

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.

Upvotes: 1

Views: 2852

Answers (1)

j.swiderski
j.swiderski

Reputation: 2445

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.

Upvotes: 1

Related Questions