CKEditor 4 - Dialog/Modal 在 iframe 中的位置

Question

我正在尝试将 CKEditor 的 dialog/modal window 定位在我的 iframe 中，但它似乎想默认位于我的 window 的中间位置。就我正在处理的网站而言，有问题的 iframe 高度为 1000+ px，因此模式在页面下方太远，导致混乱。

基于此post (ckeditor dialog positioning) 我已将以下代码添加到我的配置文件

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

    dialogDefinition.onShow = function() {
        var x_pos = this.getPosition().x;
        var y_pos = 10;
        this.move(x_pos, y_pos); // Top center
    };
});

这在初始加载时效果很好，但在编辑器中的 hyperlink 的情况下，一旦您更改 "type"（URL、电子邮件等）似乎对话框内容刷新还会导致重新计算对话框位置，将其抛回 window.

的中间位置

所以最重要的是，我想让所有对话框都保持在 window 的顶部（可能偏移 20 像素）和中心，而不管 iframe 的高度如何，并通过对话框刷新让它保持在那里，但不是找到很多支持文档来帮助解决这个问题。

Example of this in action here。单击 link 图标，对话框将出现在页面顶部。将 "type" 从 URL 更改为 Link 模态框将跳转到页面位于

内的 10000 像素高度 iframe 的中间

进一步编辑

所以接受的答案很完美，但仍然存在一个问题，即 hyperlink 对话框现在会在初始加载时显示所有字段，然后一旦你更改了 link 类型，它就会删除与当前选择无关的字段。所以进一步查看文档，调用对话框的正确方法如下：

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

    dialog.on('show', function () {
        var x_pos = this.getPosition().x;
        var y_pos = 10;

        this.move(x_pos, y_pos); // Top center
        this._.moved = 1;
    });
});

Answer 1

如果用户移动了对话框，它似乎不会尝试重新定位。它使用一个名为 moved 的变量来跟踪这一点。您可以通过将此变量设置为 1 来欺骗它认为它已被移动：

dialogDefinition.onShow = function() {
        var x_pos = this.getPosition().x;
        var y_pos = 10;
        this.move(x_pos, y_pos); // Top center
        this._.moved = 1;
    };

请注意，根据 this post，您可能需要考虑覆盖 onShow 方法的负面影响。

Answer 2

另一个选项（除了 user1620220 提供的选项之外）和一个即使在布局更改时也能重新设置对话框位置的选项是覆盖对话框的 layout 函数：

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

    // Save the old layout function
    dialogDefinition.dialog.oldLayout = dialogDefinition.dialog.layout
    dialogDefinition.dialog.layout = function() {
        // first we need to call the layout function
        dialogDefinition.dialog.oldLayout();

        // Now we can reposition the way we want:
        var x_pos = this.getPosition().x;
        var y_pos = 10;
        this.move(x_pos, y_pos); // Top center
    }

    dialogDefinition.onShow = function() {
        var x_pos = this.getPosition().x;
        var y_pos = 10;
        this.move(x_pos, y_pos); // Top center
    };
});

CKEditor 4 - Dialog/Modal 在 iframe 中的位置

CKEditor 4 - Dialog/Modal position within iframe

javascript

ckeditor