CKEditor 4 - Dialog/Modale Position innerhalb von iframe

Question

Ich versuche das dialog/modale Fenster von CKEditor innerhalb meines iframe zu positionieren, aber es scheint, als würde ich in die Mitte meines Fensters gehen. Im Fall der Website, an der ich arbeite, hat der betreffende Iframe eine Höhe von mehr als 1000 px, also ist das Modal viel zu weit unten auf der Seite und verursacht Verwirrung.

Basierend auf diesen Beitrag (ckeditor dialog positioning) ich den folgenden Code in meine Config-Datei

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 
    }; 
}); 

Welche großartig Anfangslast funktioniert, aber im Falle eines Hyperlinks im Editor hinzugefügt haben, wenn Sie das ändern "Typ" (URL, E-Mail, usw.) Es scheint, dass die Aktualisierung des Dialoginhalts auch eine Neuberechnung der Dialogposition verursacht, die sie zurück in die mittlere Mitte des Fensters wirft.

Also unter dem Strich möchte ich alle Dialoge an die Spitze (vielleicht 20px Offset) und Mitte meines Fensters unabhängig von der Iframe Höhe bleiben und es durch eine Dialogaktualisierung bleiben, aber nicht viel unterstützende Dokumentation zu finden Hilf dabei.

Example of this in action here. Klicken Sie auf das Link-Symbol und der Dialog erscheint oben auf der Seite. Ändern Sie den „Typ“ von URL zu verknüpfen und die modale zur Mitte der 10000 px Höhe springt iframe die Seite innerhalb von

Weitere Edit ist

So ist die akzeptierte Antwort perfekt gearbeitet, aber es war immer noch ein Geben Sie an, dass der Hyperlink-Dialog jetzt alle Felder beim erstmaligen Laden anzeigen würde. Wenn Sie dann den Linktyp geändert haben, werden Felder entfernt, die nicht mit der aktuellen Auswahl zusammenhängen. So suchen weiter in die Dokumentation, es sieht aus wie die richtige Art und Weise einen Dialog zu nennen, ist wie folgt:

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

Es sieht aus wie der Dialog wird nicht versuchen, sich neu zu positionieren, wenn der Benutzer es bewegt hat. Es verfolgt dies mit einer Variablen namens moved. Sie können es Trick zu denken, es durch das Setzen Sie diese Variable auf 1 verschoben wurde:

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

Beachten Sie, dass nach this post gibt es negative Nebenwirkungen der onShow Methode zu überschreiben, die Sie betrachten wünschen können.

Answer 2

Eine weitere Option (neben dem einen der user1620220 gab), und eine Option, um die Position des Dialogs auch auf das Layout ändern neu eingestellt wird, um die layout Funktion des Dialogs außer Kraft zu setzen:

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 
    }; 
});