2011-02-13 8 views
11

Las ventanas de diálogo para CKEditor aparecen de forma predeterminada en el medio de la página, pero si la página es un marco flotante de gran altura, los cuadros de diálogo aparecen muy abajo en la página.ckeditor diálogo posicionamiento

¿Es posible configurar CKEditor para colocar los cuadros de diálogo en un cuadrante diferente de la página? Por ejemplo, arriba medio?

Respuesta

11

Sí, los MDaubs enlace da le guiará para hacer lo que quiera.

que he tenido que hacer esto en el pasado y el siguiente fragmento a demostrar una solución para su problema:

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

Puede colocar esto en el archivo de configuración o la función listos para jQuery.

+1

Tuvimos que modificar el 0 un poco, ya que nuestra instancia de editor podría estar en cualquier parte del iFrame. Se reemplazó con 'jQuery (this.getParentEditor(). Container. $). Position(). Top'. ¡Pero al menos tu solución me dio la mayor parte de la respuesta! – Tarka

7

La solución de zaf funciona porque ayuda a colocar el cuadro de diálogo, pero he encontrado que produce un montón de efectos secundarios sobre cómo funciona el diálogo (al no mostrar la URL de la imagen en el cuadro de diálogo de la imagen) es un ejemplo).

Resultó que el método original onShow() que se está reemplazando devuelve un valor significativo que debemos mantener. Esto podría ser debido a un plugin o algo, pero aquí está el código que finalmente funcionó para mí:

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

Esta solución era buena, salvo que tenía algunos plugins anteriores que no funcionaban y lanzaba el error "UnEdge TypeError: no se puede leer la propiedad 'call' de undefined". Tuve que verificar si (typeof onShow! == 'undefined' && typeof onShow.call === 'function') en lugar de devolver siempre el resultado. Después de eso, todos parecían funcionar bien. – jonespm

1

yo sólo tenía el mismo problema que Yehonatán y encontraron esta pregunta muy rápido a través de Google. Pero después de usar la respuesta proporcionada por zaf, aún no recibí un diálogo para que aparezca en la posición correcta cuando el editor se carga dentro de un iframe.

En lugar del método de posición() utilicé el método de desplazamiento() para colocar un cuadro de diálogo justo debajo de la barra de herramientas. Junto con la respuesta de jonespm, llegué a este código que parece funcionar muy bien, también con los diálogos existentes.

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

} 
}); 

Esperemos que este código pueda ayudar a otros con el mismo problema que yo.