Instancia de CKEditor en un cuadro de diálogo de jQuery

Question

Estoy utilizando jQuery para abrir una ventana de diálogo con un área de texto transformada en una instancia de CKEditor. Estoy usando el adaptador jQuery proporcionado por el equipo de CKEditor, pero cuando se abre la ventana de diálogo no puedo interactuar con el editor (se crea pero se escribe "nulo" en el espacio de contenido y no puedo hacer clic en nada ni modificar el contenido)

This bug report parece decir que mediante el uso de un parche siempre que el problema se soluciona, pero no parece estar funcionando para mí ...

Aquí está mi código (tal vez hice algo mal mediante programación):

HTML:

<div id="ad_div" title="Analyse documentaire"> 
<textarea id="ad_content" name="ad_content"></textarea> 
</div> 

Mi incluye (todo incluido correctamente, pero tal vez es un problema orden incluyendo?):

<script type="text/javascript" src="includes/ckeditor/ckeditor.js"></script> 
<link rel="stylesheet" type="text/css" href="includes/jquery/css/custom-theme/jquery-ui-1.7.2.custom.css" /> 
<script type="text/javascript" src="includes/jquery/js/jquery-1.3.2.min.js"></script> 
<script type="text/javascript" src="includes/jquery/js/jquery-ui-1.7.2.custom.min.js"></script> 
<script type="text/javascript" src="includes/jquery/plugins/dialog-patch.js"></script> 
<script type="text/javascript" src="includes/ckeditor/adapters/jquery.js"></script> 

Javascript:

$('#ad_content').ckeditor(); 

/* snip */ 

$('#ad_div').dialog(
{ 
    modal: true, 
    resizable: false, 
    draggable: false, 
    position: ['center','center'], 
    width: 600, 
    height: 500, 
    hide: 'slide', 
    show: 'slide', 
    closeOnEscape: true, 
    autoOpen: false 
}); 

$('.analyse_cell').click(function(){ 
    $('#ad_div').dialog('open'); 
}); 

Editar: Después de algunas pruebas más me di cuenta de que al pulsar en los botones de la barra me dio este error:

Error: this.document.getWindow().$ is undefined Source File: includes/ckeditor/ckeditor.js Line: 82

Answer 1

Bueno, por alguna razón no pude hacer que funcionara, pero logré obtener el mismo efecto implementando la misma funcionalidad a mano.

Answer 2

trate de poner el siguiente adaptador. La solución está anulando el adaptador.

Answer 3

$('.analyse_cell').click(function(){ 
    $('#ad_div').dialog({ 
     modal: true, 
     resizable: false, 
     draggable: false, 
     position: ['center','center'], 
     width: 600, 
     height: 500, 
     hide: 'slide', 
     show: 'slide', 
     closeOnEscape: true, 
     autoOpen: false, 
     open: function(event,ui) { 
      $('#ad_content').ckeditor(); 
     }, 
     close: function(event,ui) { 
      CKEDITOR.remove($("#ad_content").ckeditorGet()); 
     } 
    }); 
}); 

Answer 4

Me encontré con el mismo problema y, por alguna razón, encontré que poner texto en el área de texto antes de abrir el diálogo podría hacer el truco. No es una solución real, pero funciona para mí.

$('#ad_content').ckeditor(); 

/* snip */ 

$('#ad_div').dialog(
{ 
    modal: true, 
    /* Your options here. */ 
}); 

$('.analyse_cell').click(function(){ 
    // Add some content into textarea. 
    $('#ad_content').val("Enter content here."); 
    $('#ad_div').dialog('open'); 
}); 

Answer 5

Utilice la última versión de CKEditor. Lo resolvió para mí. Versión 3.4.2

Answer 6

Estoy usando jQuery para abrir una ventana de diálogo con un área de texto transformada en una instancia de CKEditor. Estoy usando el adaptador jQuery proporcionado por el equipo CKEditor, pero cuando se abre la ventana de diálogo no puedo interactuar con el editor (se creó pero null está escrito en el espacio de contenido y no puedo hacer clic en nada ni modificar el contenido).

Error: this.document.getWindow().$ is undefined Source File: includes/ckeditor/ckeditor.js
Line: 129

estoy usando la versión 3.6.2

Answer 7

He resuelto esto simplemente añadiendo zIndex = -1 en el constructor de diálogo jQuery UI al igual que

$('#modalWindow').dialog({ autoOpen: false, modal: true, zIndex : -1}); 

Answer 8

acabamos de resolver el mismo problema por desactivando el efecto jQuery UI en el cuadro de diálogo emergente (opción de mostrar).

Me tomó mucho tiempo para resolver esto. Ahora el editor se está comportando como se esperaba.

Answer 9

Utilicé una función de devolución de llamada con la opción "mostrar:" para retrasar la creación de instancias de CKEditor hasta que se completó la animación "mostrar". Descubrí que tan solo 50 milisegundos funcionarán.

modal: true, 
show: { 
    effect: "drop", 
    complete: function() { 
     setTimeout(function(){ 
      $("#selector").ckeditor(); 
     },50); 
    } 
}, 
hide: "drop", 

Espero que esto ayude.

Answer 10

Misticismo, pero me ayudó. Antes de diálogo Crear puedo configurar la fuerza de datos vacías

CKEDITOR.instances['email_text_of_message'].setData('') 

y ckeditor ("ckeditor", "~> 3.4") en el diálogo funciona bien.

$("#create_email").click(function(event){ 

CKEDITOR.instances['email_text_of_message'].setData('') 

$("#email_body").dialog({ modal: true, 
          minHeight: 720, 
          minWidth: 900, 
          buttons: [ 
          { 
          id: "button_create_email", 
          text: $('#inv_notice16').text(), 
          click: function() { 
            $("#email_body").dialog('close') 
          } 
          }]}); 
    return false;  
}) 

Answer 11

¡Simplemente agregue este fragmento al doc y el problema está solucionado!

$(document).on('focusin', function(e) { 
    e.stopImmediatePropagation(); 
});