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