在CKFinder對話框中使用jQuery

在CKFinder 2對話框中是否存在使用jQuery和jQuery插件的方法？我只想使用Jcrop使用我的插件裁剪圖像。例如下面的代碼不起作用。 jQuery(document).ready(...)事件觸發得很好，但在它內部，我只是無法選擇我的對話框中的任何元素。那麼，它有可能嗎？在CKFinder對話框中使用jQuery

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

});

來源

2012-04-12 Artsiom Prudnikov

有一個ckEditor的plugin version它有jQuery集成。如果你不能切換到該版本，也有路過的jQuery對象到CKFinder對象several ways，在其最簡單的將是：

CKFinder.prototype.J = jQuery;

來源

2012-09-14 04:16:24

我注意到，CKFinder使用一個iFrame，混淆了jQuery選擇。

你應該嘗試一下這樣的

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

來源

2012-12-07 10:29:14 Cristian

在CKFinder對話框中使用jQuery

回答

相關問題