Question

我正在尝试在我的iframe中定位CKEditor的对话框/模态窗口，但它似乎想要默认为我的窗口的中间位置。在我正在处理的网站的情况下，所讨论的iframe的高度是1000+ px，因此模式在页面上太远，导致混淆。

根据这篇文章（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
    };
});

在初始加载时效果很好，但在编辑器中有超链接的情况下，一旦更改了“类型”（URL，电子邮件等），对话框内容刷新似乎也会导致重新计算对话框位置，它把它扔回窗户的中间位置。

所以底线是我想让所有对话框都粘在顶部（可能是20px偏移）和窗口的中心，无论iframe高度如何，并通过对话框刷新保持在那里，但没有找到太多的支持文档来帮助接着就，随即。

Example of this in action here。单击链接图标，对话框将显示在页面顶部。将“类型”从URL更改为“链接”，模式将跳转到页面所在页面的10000像素高度iframe的中间

进一步编辑

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

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 - iframe

2 个答案: