CKEditor：使用 jQuery 的自定义对话框

Question

我的 CKEditor 有一点问题。

我想创建一个新按钮，只需单击一下即可，而不是普通的 CKEditor 对话框元素。我想用 jQuery 打开一个新窗口，我可以用自定义 HTML 填充它。

这可能吗？我该怎么办？

非常感谢， Torben

（抱歉，不幸的是文本必须使用谷歌翻译器翻译）

Answer 1

我就做过这件事。我们根本不使用内置对话框。我们使用 iframemedialog。

这是我用来创建使用此模式的插件的文件模板。

CKEDITOR.plugins.add( '$PLUGINNAMEALLLOWERCASE
然后，您可以在 iframe 中创建您想要的任何 HTML，包括自定义 CSS/JS
,
{
    init : function( editor )
    {
        var pluginName = '$PLUGINNAMEALLLOWERCASE
然后，您可以在 iframe 中创建您想要的任何 HTML，包括自定义 CSS/JS
;

        // 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
然后，您可以在 iframe 中创建您想要的任何 HTML，包括自定义 CSS/JS
,
            {
                label: $BUTTONLABEL$,
                className: 'cke_button_' + pluginName,
                command: pluginName
            });


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

                if ( element.is( '$NODENAME
然后，您可以在 iframe 中创建您想要的任何 HTML，包括自定义 CSS/JS
 ) && !element.data( 'cke-realelement' ) ) {
                    evt.data.dialog = '$PLUGINNAMEALLLOWERCASE
然后，您可以在 iframe 中创建您想要的任何 HTML，包括自定义 CSS/JS
;
                    evt.cancel();
                }
            });

        // If the "menu" plugin is loaded, register the menu items.
        if ( editor.addMenuItems )
        {
            editor.addMenuItems(
                {
                    $PLUGINNAMEALLLOWERCASE$ :
                    {
                        label : $EDITLABEL$,
                        command : '$PLUGINNAMEALLLOWERCASE
然后，您可以在 iframe 中创建您想要的任何 HTML，包括自定义 CSS/JS
,
                        group : '$PLUGINNAMEALLLOWERCASE
然后，您可以在 iframe 中创建您想要的任何 HTML，包括自定义 CSS/JS

                    }
                });
        }

        // If the "contextmenu" plugin is loaded, register the listeners.
        if ( editor.contextMenu )
        {
            editor.contextMenu.addListener( function( element, selection )
                {
                    if ( !element || !element.is('$NODENAME
然后，您可以在 iframe 中创建您想要的任何 HTML，包括自定义 CSS/JS
) || element.data( 'cke-realelement' ) || element.isReadOnly() )
                        return null;

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

然后，您可以在 iframe 中创建您想要的任何 HTML，包括自定义 CSS/JS