Verwenden von jQuery im CKFinder-Dialogfeld

Question

Gibt es eine Möglichkeit, jQuery- und jQuery-Plugins in CKFinder 2-Dialogen zu verwenden? Ich möchte nur mit Jcrop Bilder mit meinem Plugin zuschneiden. Zum Beispiel funktioniert der folgende Code nicht. jQuery(document).ready(...) Ereignis wird gut ausgelöst, aber im Inneren kann ich kein Element meines Dialogfelds auswählen. Also, ist es überhaupt möglich?

CKFinder.dialog.add("ImageCroppingDialog", function (api) { 
return { 
    title: "Test", 
    minWidth: 480, 
    minHeight: 750, 
    onShow: function() { 
     var file = api.getSelectedFile(); 
     var url = file.getUrl(); 
     var doc = this.getElement().getDocument(); 
     var img = doc.getById('cropbox'); 
     img.setAttribute('src', url); 
     jQuery(document).ready(function() { 
      jQuery('#cropbox').Jcrop(); 
     }); 
    }, 
    contents: [ 
      { 
       id: 'tab1', 
       label: '', 
       title: '', 
       expand: true, 
       padding: 0, 
       elements: [ 
         { 
          type: 'html', 
          html: '<h3>Select area to crop.</h3><img id="cropbox" src="" style="max-width: 480px; max-height: 580px;"></img>' 
            + '<script type="text/javascript" src="../Scripts/jquery-1.5.1.min.js"></script>' 
            + '<script type="text/javascript" src="../Scripts/crop/jquery.jcrop.min.js"></script>' 
         } 
       ] 
      } 
     ], 
    buttons: [CKFinder.dialog.cancelButton, CKFinder.dialog.okButton] 
}; 
}); 

CKFinder.addPlugin('ImageCropper', function (api) { 

api.addFileContextMenuOption({ label: 'Crop image', command: "ImageCropper" }, function (api, file) { 
    api.openDialog("ImageCroppingDialog"); 
    if (!file.isImage()) { 
     api.openMsgDialog("Image cropping", "This feature is only available for editing images."); 
     return; 
    } //end check if isImage() 
}); 

}); 

Answer 1

Es gibt eine plugin version von CKEditor die jQuery Integration hat. Wenn Sie nicht auf diese Version wechseln können, gibt es several ways das jQuery-Objekt in das CKFinder Objekt über die einfachste davon wäre:

CKFinder.prototype.J = jQuery; 

Answer 2

Ich bemerkte, dass CKFinder ein iFrame verwendet, verwirrend den jQuery-Selektor.

Sie sollten es versuchen, wie diese

$("#cropbox", $("iframe:first").contents());