CKEditor : jQuery로 사용자 정의 대화 상자

Question

CKEditor에 약간의 문제가 있습니다.

한 번의 클릭으로 일반적인 CKEditor 대화 상자 요소가 아닌 새로운 버튼을 만들고 싶습니다. jQuery로 새 창을 열고 싶습니다. jQuery를 사용자 정의 HTML로 채울 수 있습니다.

이것이 가능합니까? 어떻게해야합니까?

당신에게 대단히 감사합니다, 의 Torben

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

그런 다음 사용자 정의 CSS/JS

을 포함하여 iframe 내에서 원하는 HTML 만들 수 있습니다