0

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

});
4

2 に答える 2

3

CKFinderがiFrameを使用していて、jqueryセレクターを混乱させていることに気づきました。

このように試してみてください

$("#cropbox", $("iframe:first").contents());
于 2012-12-07T10:29:14.357 に答える
0

jQuery が統合された ckEditorのプラグイン バージョンがあります。そのバージョンに切り替えることができない場合、jQuery オブジェクトを CKFinder オブジェクトに渡す方法がいくつかありますが、最も簡単な方法は次のとおりです。

CKFinder.prototype.J = jQuery;
于 2012-09-14T04:16:24.743 に答える