CKEditor 3.x - 将UI元素动态添加到插件对话框

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

alt text

我选择在最后选择UI元素（见截图）的“AND”选项后，我要动态地添加另外3个选择UI元素，类同第3选择的。

我已经浏览了此论坛和插件教程，但我一直无法弄清楚。我看过的所有例子都只有静态对话框定义。任何帮助，这将不胜感激。

来源

2010-12-22 rudolfv

丹尼斯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); 
});

来源

2011-06-23 15:17:26 rudolfv

目前我正在与CKEditor合作。虽然我们的问题并不完全相同，但我的方法是在包含div的插件对话框中使用组件。然后，在onShow中，我将加载一个特定的页面到div。

我觉得更容易，因为我可以操纵某些网页更自如（如动态添加UI元素）。

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

我仍在寻找解决方案或可能另一种方式来做到这一点。如果我有什么，我会尽力更新我的答案。

来源

2011-02-08 05:46:20 Threl

您可以与您可以自定义使用如jQuery（JavaScript）的和你的服务器端编程语言的一组常用的和比较容易的工具外部页面添加iframe中。在某些情况下，你想确保iframe的内容将不会被附加在查询字符串一些随机文字被缓存。随后的iframe页面可以通过调用父与对话沟通。*

来源

2011-06-21 21:07:38 Denis

是的，这正是我最终做的。我会在这里发布一些框架代码。 – rudolfv 2011-06-23 15:15:06

CKEditor 3.x - 将UI元素动态添加到插件对话框

回答

相关问题