2011-02-13 68 views
11

CKEditor的对话框窗口默认显示在页面中间,但如果页面是高度较高的iframe,则对话框将显示在页面下方。ckeditor对话框定位

是否可以配置CKEditor将对话框放置在页面的不同象限中?例如顶部中间?

回答

11

是,链接MDaubs给出会引导你做你想做的。

我不得不这样做在过去和下面的代码片段将展示你的问题的解决方案:

CKEDITOR.on('dialogDefinition', function(e) { 
    var dialogName = e.data.name; 
    var dialogDefinition = e.data.definition; 
    dialogDefinition.onShow = function() { 
      this.move(this.getPosition().x,0); // Top center 
    } 
}) 

您可以在配置文件或jQuery的现成功能放置此。

+1

不得不修改0位,因为我们的编辑器实例可能在iFrame中的任何位置。用`jQuery(this.getParentEditor()。container。$)。position()。top`代替它。但至少你的解决方案给了我最多的答案! – Tarka 2012-01-09 20:59:45

7

zaf的解决方案的工作原理是,它有助于定位对话框,但我发现它会产生一堆副作用,关于对话框如何工作(无法在图像对话框中显示图像的URL就是一个例子)。

原来的onShow()被覆盖的方法返回了一个我们应该保留的有意义的值。这可能是由于插件什么的,但在这里,最终为我工作的代码:

CKEDITOR.on('dialogDefinition', function(e) { 
    var dialogName = e.data.name; 
    var dialogDefinition = e.data.definition; 
    var onShow = dialogDefinition.onShow; 
    dialogDefinition.onShow = function() { 
    var result = onShow.call(this); 
    this.move(this.getPosition().x, $(e.editor.container.$).position().top); 
    return result; 
    } 
}); 
+3

这个解决方案很好,除了我有一些旧的插件没有工作,并会抛出错误“Uncaught TypeError:无法读取未定义的属性”调用。我必须检查if(typeof onShow!=='undefined'&& typeof onShow.call ==='function'),而不是总是返回结果。之后,他们都表现得很好。 – jonespm 2014-08-05 17:29:03

1

我只是有相同的问题Yehonatan,发现这个问题真快通过谷歌。但是,在使用由zaf提供的答案后,我仍然没有得到一个对话框,以便在编辑器加载到iframe中时显示在适当的位置。

代替position()方法,我使用offset()方法在工具栏下面放置一个对话框。再加上jonespm的响应,我发现这个代码看起来很好,还有现有的对话框。

CKEDITOR.on('dialogDefinition', function(e) { 
var dialogName = e.data.name; 
var dialogDefinition = e.data.definition; 
var onShow = dialogDefinition.onShow; 

dialogDefinition.onShow = function() { 

    this.move(this.getPosition().x, jQuery(this.getParentEditor().container.$).offset().top); 

    if (typeof onShow !== 'undefined' && typeof onShow.call === 'function') 
    { 
     return onShow.call(this); 
    } 

} 
}); 

希望这段代码能帮助别人解决和我一样的问题。