2011-02-13 129 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); 
    } 

} 
}); 

希望這段代碼能幫助別人解決和我一樣的問題。