Replace the image plugin in CKeditor

Question

I want to override the image plugin in CKeditor. When I right click on an image I want to open my own dialog. Can anyone point me in the right direction. I've done a basic plugin which I copied from the CKeditor site - How do I swap this to replace the image editor.

CKEDITOR.plugins.add('myplugin',
{
    init: function (editor) {
        editor.addCommand('mydialog', new CKEDITOR.dialogCommand('mydialog'));

        if (editor.contextMenu) {
            editor.addMenuGroup('mygroup', 10);
            editor.addMenuItem('My Dialog',
            {
                label: 'Open dialog',
                command: 'mydialog',
                group: 'mygroup'
            });
            editor.contextMenu.addListener(function (element) {
                return { 'My Dialog': CKEDITOR.TRISTATE_OFF };
            });
        }

        CKEDITOR.dialog.add('mydialog', function (api) {
            // CKEDITOR.dialog.definition
            var dialogDefinition =
            {
                title: 'Sample dialog',
                minWidth: 390,
                minHeight: 130,
                contents: [
                    {
                        id: 'tab1',
                        label: 'Label',
                        title: 'Title',
                        expand: true,
                        padding: 0,
                        elements:
                        [
                            {
                                type: 'html',
                                html: '<p>This is some sample HTML content.</p>'
                            },
                            {
                                type: 'textarea',
                                id: 'textareaId',
                                rows: 4,
                                cols: 40
                            }
                        ]
                    }
                ],
                buttons: [CKEDITOR.dialog.okButton, CKEDITOR.dialog.cancelButton],
                onOk: function () {
                    // "this" is now a CKEDITOR.dialog object.
                    // Accessing dialog elements:
                    var textareaObj = this.getContentElement('tab1', 'textareaId');
                    alert("You have entered: " + textareaObj.getValue());
                }
            };

            return dialogDefinition;
        });
    }
});

Answer 1

Hi the reason I wanted to do this was that we have our image editor control which for "usability" reasons we need to carry on using. It gets used in different bits of the site and two dialogs would confuse people. In summary what I did was

1. Remove the image plugin CKEDITOR.config.removePlugins = 'image, forms, div,flash,iframe,table';
2. Add extra plugins extraPlugins: 'tinsertimage,teditimage,teditlink,tinsertlink,teditimagelink' on creating the CKEditor

In the plugin run some JS which intercept the right click on the image

CKEDITOR.plugins.add('teditimage',
{
init: function (editor) {
    editor.addCommand('tEditImage',
        {
            exec: function (editor) {
                                  //This opens the custom editor
                ZWSInlineEditor.openImageProperties(editor, false);
            }
        });

    if (editor.addMenuItem) {
        // A group menu is required
        // order, as second parameter, is not required
        editor.addMenuGroup('gImage');

        // Create a manu item
        editor.addMenuItem('gEditImageItem', {
            label: 'Edit Image Properties',
            command: 'tEditImage',
            group: 'gImage'
        });
    }

    if (editor.contextMenu) {
        editor.contextMenu.addListener(function (element, selection) {
            // Get elements parent, strong parent first
            var parents = element.getParents("img");
            // Check if it's strong
            if (parents[0].getName() != "img")
                return null; // No item

            return { gEditImageItem: CKEDITOR.TRISTATE_ON };
        });
    }
}
});

Answer 2

I don't understand what's the point in what you're doing (or please explain us). Maybe you should rather customize dialogs than do things from scratch?