CKEditor: custom dialogs with jQuery

Question

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 this possible? How do I go about it?

Thank you very much, Torben

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

Answer 1

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