CKEditor-Instanz in einem jQuery-Dialog

Question

Ich benutze jQuery, um ein Dialogfenster mit einem Textbereich zu öffnen, der in eine Instanz von CKEditor umgewandelt wurde. Ich verwende den jQuery-Adapter, der vom CKEditor-Team bereitgestellt wird, aber wenn das Dialogfenster geöffnet wird, kann ich nicht mit dem Editor interagieren (er wird erstellt, aber "null" wird in den Inhaltsbereich geschrieben und ich kann nichts anklicken oder den Inhalt ändern).

This bug report scheint durch Verwendung eines Pflasters, sofern das Problem behoben ist, aber es scheint nicht zu funktionieren für mich ...

Hier ist mein Code (vielleicht habe ich etwas falsch programmatisch) zu sagen, dass:

HTML:

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

Mein enthält (Alles korrekt enthalten ist, aber es ist vielleicht ein mit Bestell Problem?):

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

Edit: Nach einigen weiteren Tests bemerkte ich, dass Tasten auf der Werkzeugleiste drücken gab mir diesen Fehler:

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

Answer 1

Nun, aus irgendeinem Grund konnte ich es nicht zum Laufen bringen, schaffte es aber, denselben Effekt zu erzielen, indem ich dieselbe Funktionalität von Hand implementierte.

Answer 2

Versuchen Sie, die unter dem Adapter setzen. Der Fix überschreibt den Adapter.

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

Ich stieß auf das gleiche Problem und aus irgendeinem Grund fand ich, dass etwas Text in die TextArea vor dem Öffnen des Dialogs tun könnte, den Trick tun. Keine echte Lösung, aber funktioniert für mich.

$('#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

Verwenden Sie die neueste Version von CKEditor. Ich habe es für mich gelöst. Version 3.4.2

Answer 6

Ich benutze jQuery, um ein Dialogfenster mit einem Textbereich zu öffnen, der in eine Instanz von CKEditor umgewandelt wurde. Ich benutze den jQuery-Adapter von CKEditor Team, aber wenn das Dialogfenster öffnet, kann ich nicht mit dem Editor interagieren (es ist erstellt, aber null wird in den Inhaltsbereich geschrieben und ich kann nichts klicken oder den Inhalt ändern).

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

Ich bin mit Version 3.6.2

Answer 7

Ich löste dies durch einfaches Hinzufügen zIndex = -1 in dem jQuery UI Dialog Konstruktor wie so

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

Answer 8

Genau das exakt gleiche Problem gelöst, indem Deaktivieren des jQuery UI-Effekts im Popup-Dialogfeld (Option anzeigen)

Nahm mich für immer, um dies herauszufinden. Jetzt verhält sich der Editor wie erwartet.

Answer 9

Ich habe eine Callback-Funktion mit der Option "show:" verwendet, um den CKEditor zu verzögern, bis die "show" -Animation beendet war. Ich fand, dass so wenig wie 50 Millisekunden den Trick machen werden.

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

Hoffe, das hilft.

Answer 10

Mystik, aber es hat mir geholfen. Vor-Dialog i leere Daten zwangsweise

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

und ckeditor ("ckeditor", "~> 3.4") im Dialog funktioniert.

$("#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

Fügen Sie dieses Snippet einfach zu Ihrem Dokument hinzu und das Problem ist gelöst!

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