CKFinder 3（不包含CKEditor）在選擇或上傳圖像時，如何強制用戶使用特定尺寸的圖像編輯區域

Question

我查看了所有Ckfinder標記的問題，似乎沒有任何幫助。 這是關於新的CKFinder 3。

我們有一個cms（PHP）。 在常規內容頁面上，ckeditor和ckfinder可以很好地協同工作。 我不在乎他們使用什么尺寸。

我們還為用戶提供了在單獨頁面上上傳滑塊圖像的功能。 這些圖像應該是特定的寬度和高度。 這就是我被困住的地方。 一旦用戶上傳或選擇了圖像，我想自動將圖像放在圖像編輯區域中並設置裁剪尺寸。

我正在使用彈出窗口示例。 我注意到提供的代碼只能使用表單標記之外的按鈕。 只要我在表單中移動它，它就不會輸出文件名。

<button id="ckfinder-popup-1" class="button-a button-a-background">Browse Server</button>    
<input id="ckfinder-input-1" type="text" name="file1" class="form-control">

<script type="text/javascript">
    var button1 = document.getElementById( 'ckfinder-popup-1' );
    button1.onclick = function() {
        selectFileWithCKFinder( 'ckfinder-input-1' );
    };
    function selectFileWithCKFinder( elementId ) {
        CKFinder.popup( {
            chooseFiles: true,
            width: 800,
            height: 600,
            dialogMinHeight: 400,
             resourceType: 'Images',
            plugins: ['StatusBarInfo'],
            onInit: function( finder ) {
                finder.on( 'files:choose', function( evt ) {
                    var file = evt.data.files.first();
                    var output = document.getElementById( elementId );
                    output.value = file.getUrl();
                } );

                finder.on( 'file:choose:resizedImage', function( evt ) {
                    var output = document.getElementById( elementId );
                    output.value = evt.data.resizedUrl;
                } );                
            }
        } );
    }


</script>

Answer 1

  <script src="editor/ckeditor/ckeditor.js"></script> <script type="text/javascript" src="editor/ckfinder/ckfinder.js"></script> <form action="" method="get"> <input id="ckfinder-input-1" name="resimyolu" type="text" style="width:60%"> <button id="ckfinder-popup-1" class="button-a button-a-background">Browse Server</button> </form> <script> var button1 = document.getElementById( 'ckfinder-popup-1' ); var button2 = document.getElementById( 'ckfinder-popup-2' ); button1.onclick = function() { selectFileWithCKFinder( 'ckfinder-input-1' ); }; button2.onclick = function() { selectFileWithCKFinder( 'ckfinder-input-2' ); }; function selectFileWithCKFinder( elementId ) { CKFinder.popup( { chooseFiles: true, width: 800, height: 600, onInit: function( finder ) { finder.on( 'files:choose', function( evt ) { var file = evt.data.files.first(); var output = document.getElementById( elementId ); output.value = file.getUrl(); } ); finder.on( 'file:choose:resizedImage', function( evt ) { var output = document.getElementById( elementId ); output.value = evt.data.resizedUrl; } ); } } ); } </script>