Question

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

alt text

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

我已经浏览了这个论坛和插件教程，但我无法弄明白。我查看的所有示例都只有静态对话框定义。任何帮助都将不胜感激。

Answer 1

您可以使用外部页面添加iFrame，您可以使用一组常用且更简单的工具（如jQuery（javascript）和服务器端编程语言）自定义该页面。在某些情况下，您希望通过在查询字符串中附加一些随机文本来确保不会缓存iFrame的内容。然后，iframe页面可以通过调用parent。*

与对话框进行通信

Answer 2

目前我也在使用CKEditor。虽然我们的问题不完全相同，但我的方法是在插件对话框中使用包含div的组件。然后，在onShow中，我会将某个页面加载到div。

我发现它更容易，因为我可以更自由地操纵某个页面（比如动态添加UI元素）。

但这种方法存在问题。 CKEditor永远不会删除其对话框div。因此，如果在浏览其他页面然后返回编辑器页面后，单击插件按钮将复制对话框div（其中包含我操作的页面）。

我仍在寻找解决方案或者其他方式来做到这一点。如果我有东西，我会尝试更新我的答案。

Answer 3

正如Denis Volovik所说，这可以使用带有外部页面的Iframe来实现。这正是我前一段时间解决我的问题。抱歉只发布它，但这里是我完成这个的一些框架代码：

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元素到插件对话框

3 个答案: