Question

我对CKEditor有点问题。

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

这可能吗？我该怎么做呢？

非常感谢，托本

（很抱歉，文字不得不翻译成谷歌翻译）

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

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

CKEditor：使用jQuery自定义对话框

1 个答案: