CKEditor：用jQuery自定义对话框

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

然后，您可以创建任何你想要的HTML内嵌框架里面，包括自定义的CSS/JS