CKEditor: пользовательские диалоги с jQuery

Question

У меня небольшая проблема с CKEditor.

Я хотел бы создать новую кнопку, которая в один клик опирается на обычные элементы диалога CKEditor. Я хочу открыть новое окно с jQuery, которое я могу заполнить его собственным HTML.

Возможно ли это? Как мне это сделать?

Большое спасибо, Торбена

(К сожалению, текст, к сожалению, пришлось перевести с помощью Google Translator)

Answer 1

Я сделал именно это. Мы вообще не используем встроенные диалоги. Мы используем iframedialog.

Вот шаблон файла, который я использую для создания плагинов, используя этот шаблон.

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 };
                });
        }
    }
} );

Затем вы можете создать любой HTML-код внутри iframe, включая пользовательский CSS / JS

.