позиционирование диалога ckeditor

Question

Диалоговые окна для CKEditor по умолчанию отображаются в середине страницы, но если страница представляет собой фрейм-фрейм с большой высотой, диалоги появляются вниз по странице.

Можно ли настроить CKEditor для размещения диалогов в другом квадранте страницы? Например верхний средний?

Answer 1

Да, ссылка, которую дает 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.

Answer 2

Решение от 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;
  }
});

Answer 3

Это может быть способ, которым вы ищете:

Программно установить положение диалогов CKEditor

Answer 4

У меня была такая же проблема, как у Yehonatan, и я нашел этот вопрос очень быстро через Google.Но после использования ответа, предоставленного 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);
    }

 }  
});

Надеюсь, этот код может помочь другим с той же проблемой, что и я.

Answer 5

Правильный синтаксис:

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