CODEWITHSUNDEEP
windowsuser-interfacedialogckeditor
Yehonatan
Yehonatan

Reputation: 1172

ckeditor dialog positioning

Dialog windows for CKEditor by default appear in the middle of the page but if the page is an iframe with a big height the dialogs appear way down the page.

Is it possible to configure CKEditor to position the dialogs in a different quadrant of the page? For example top middle?

Upvotes: 12

Views: 5822

Answers (5)

Dmitry Shashurov
Dmitry Shashurov

Reputation: 1704

Correct syntax is:

CKEDITOR.on('dialogDefinition', function(ev) {
    var dialogName = ev.data.name;
    var dialogDefinition = ev.data.definition;
    var dialog = dialogDefinition.dialog;
    if (dialogName == 'image2') {
        dialogDefinition.onShow = CKEDITOR.tools.override(dialogDefinition.onShow, function(original) { 
            return function() {
                original.call(this);
                CKEDITOR.tools.setTimeout( function() {

                    /*do anything: this.move(this.getPosition().x, $(e.editor.container.$).position().top);*/

                }, 0);
            }
        });
    }
});

Upvotes: 0

Mike de Vrind
Mike de Vrind

Reputation: 183

I just had the same issue as Yehonatan and found this question really fast via Google. But after using the answer provided by zaf I still didn't get a dialog to appear in the proper position when the editor is loaded within an iframe.

In stead of the position() method I used the offset() method to place a dialog right under the toolbar. Together with the response of jonespm I came to this code that seems to work very good, also with existing dialogs.

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

 }  
});

Hopefully this code can help others with the same issue as me.

Upvotes: 1

jamix
jamix

Reputation: 5628

The solution by zaf works in that it helps to position the dialog, but I've found it to produce a bunch of side effects as to how the dialog functions (failing to display the URL of the image in the image dialog is one example).

It turned out that the original onShow() method that is being overridden returns a meaningful value that we should keep. This could be due to a plugin or something, but here's the code that ultimately worked for me:

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

Upvotes: 9

zaf
zaf

Reputation: 23244

Yes, the link MDaubs gives will guide you to do what you want.

I've had to do this in the past and the following snippet will demonstrate a solution for your problem:

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

You can place this in the config file or the ready function for jQuery.

Upvotes: 15

MDaubs
MDaubs

Reputation: 3004

This may be way you're looking for:

Programatically set the position of CKEditor's dialogs

Upvotes: 3

Related Questions