CKEditor: custom dialogs with jQuery

I have a little problem with the CKEditor.

I would like to create a new button, which relies, in one click, not the normal CKEditor dialog elements. I want to open a new window with jQuery, which I can fill it with custom HTML.

Is th开发者_开发问答is possible? How do I go about it?

Thank you very much, Torben

(Sorry, the text unfortunately had to translate with Google Translator)

I've done this very thing. We don't use the built in dialogs at all. We use an iframedialog.

Here's a file template I have that I use to create plugins using this pattern.

CKEDITOR.plugins.add( '$PLUGINNAMEALLLOWERCASE$',
{
    init : function( editor )
    {
        var pluginName = '$PLUGINNAMEALLLOWERCASE$';

        // Register the dialog.
        CKEDITOR.dialog.addIframe(pluginName, pluginName, '/path/to/load/the/html.html', 410, 508, function() {});

        // Register the command.
        var command = editor.addCommand(pluginName, {exec: function() { editor.openDialog(pluginName); }});
        command.modes = { wysiwyg:1, source:0 };
        command.canUndo = false;

        editor.ui.addButton('$PLUGINNAMEPASCALCASE$',
            {
                label: $BUTTONLABEL$,
                className: 'cke_button_' + pluginName,
                command: pluginName
            });


        editor.on( 'doubleclick', function( evt )
            {
                var element = evt.data.element;

                if ( element.is( '$NODENAME$' ) && !element.data( 'cke-realelement' ) ) {
                    evt.data.dialog = '$PLUGINNAMEALLLOWERCASE$';
                    evt.cancel();
                }
            });

        // If the "menu" plugin is loaded, register the menu items.
        if ( editor.addMenuItems )
        {
            editor.addMenuItems(
                {
                    $PLUGINNAMEALLLOWERCASE$ :
                    {
                        label : $EDITLABEL$,
                        command : '$PLUGINNAMEALLLOWERCASE$',
                        group : '$PLUGINNAMEALLLOWERCASE$'
                    }
                });
        }

        // If the "contextmenu" plugin is loaded, register the listeners.
        if ( editor.contextMenu )
        {
            editor.contextMenu.addListener( function( element, selection )
                {
                    if ( !element || !element.is('$NODENAME$') || element.data( 'cke-realelement' ) || element.isReadOnly() )
                        return null;

                    return { $PLUGINNAMEALLLOWERCASE$ : CKEDITOR.TRISTATE_OFF };
                });
        }
    }
} );

You can then create whatever HTML you want inside the iframe, including custom CSS/JS