在 CKFinder 对话框中使用 jQuery答案

【问题标题】：Using jQuery in CKFinder dialog在 CKFinder 对话框中使用 jQuery
【发布时间】：2012-04-12 13:50:51
【问题描述】：

是否存在在 CKFinder 2 对话框中使用 jQuery 和 jQuery 插件的方法？我只想使用 Jcrop 用我的插件裁剪图像。例如下面的代码不起作用。 jQuery(document).ready(...) 事件触发良好，但在其中我无法选择对话框的任何元素。那么，有可能吗？

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

});

【问题讨论】：

标签： jquery jcrop ckfinder

【解决方案1】：

我注意到 CKFinder 使用的是 iFrame，从而混淆了 jquery 选择器。

你应该这样尝试

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

【讨论】：

【解决方案2】：

ckEditor 的plugin version 集成了 jQuery。如果您无法切换到该版本，则有several ways 将 jQuery 对象传递给 CKFinder 对象，其中最简单的是：

CKFinder.prototype.J = jQuery;

【讨论】：