CKEditor 3.x - 动态添加UI元素到插件对话框 [英] CKEditor 3.x - Dynamically add UI elements to plugin dialog

问题描述

我正在构建一个CKEditor 3.x插件，允许HTML的某些部分由绑定到我们的后端系统的单独的查看器应用程序有条件地显示。我的CKEditor插件将用于定义这些条件，但我被困在如何动态添加UI元素到插件对话框。

I'm building a CKEditor 3.x plug-in that allows certain sections of HTML to be conditionally displayed by a separate viewer application that is tied in to our back-end systems. My CKEditor plug-in will be used to define these conditions, but I'm getting stuck on how to dynamically add UI elements to the plug-in dialog.

在上一次选择UI元素（参见截图）中选择AND选项后，我想动态添加另外3个选择UI元素，类似于前3个选择的元素。

After I select the 'AND' option in the last select UI element (see the screenshot), I want to dynamically add another 3 select UI elements, similiar to the first 3 select's.

我已经通过这个论坛和插件教程拖网，我还没有能够弄清楚。我看到的所有示例只有静态对话框定义。

I've trawled through this forum and the plug-in tutorials and I haven't been able to figure it out. All the examples I looked at only have static dialog definitions. Any help with this would be appreciated.

推荐答案

正如Denis Volovik所说，这可以通过使用具有外部页面的Iframe来实现。这正是我以前做的，以解决我的问题。抱歉，现在只发布它，但这里是一些框架代码如何实现这一点：

As Denis Volovik mentioned, this can be achieved using an Iframe with an external page. This is exactly what I did a while ago to resolve my issue. Apologies for only posting it now, but here is some skeleton code of how I accomplished this:

function iframeDialog(editor) {
    return {
         title : 'someTitle',
         minWidth : 820,
         minHeight : 100,
         maxHeight: 200,
         contents :
               [
                  {
                     id : 'someTab',
                     label : '',
                     expand : true,
                     elements :
                           [
                              {
                                 id : 'myIframe',
                                 type : 'iframe',
                                 src : 'my_dialog_contents.html',
                                 width : '100%',
                                 height : 200,
                                 onContentLoad : function() {
                                        //...

                                    var iframe = document.getElementById(this._.frameId);
                                    iframeWindow = iframe.contentWindow;
                                    // can now call methods in the iframe window
                                 }
                              }
                           ]
                  }
               ],
         onShow : function() {
            // check if should display dialog, do dialog.hide if not
         },    
         onOk : function()
         {          
            var myIframe = this.getContentElement('someTab', 'myIframe');
            var iframeWindow = document.getElementById(myIframe.domId).contentWindow;
            var iframeDocument = iframeWindow.document;         

                        // can now interrogate values in the iframe, call javascript methods

                        // can also call editor methods, e.g. editor.focus(), editor.getSelection(),
        }        
    };
}

CKEDITOR.dialog.add( 'mydialog', function( editor )
{
    return iframeDialog(iframeDialog);
} );

这篇关于CKEditor 3.x - 动态添加UI元素到插件对话框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！