4

I have looked through all the Ckfinder tagged questions and nothing seems to help. This is about the new CKFinder 3.

We have a cms (PHP). On regular content pages ckeditor and ckfinder work well together. I don't care what dimensions they use.

We also give the user the ability to upload images for a slider on a separate page. These images should be a specific width and height. This is where I'm stuck. Once a user has uploaded or selected an image I would like to automatically bring the image up in the Image Edit Area with the crop dimensions set.

I'm using the popup example. I did notice that the code supplied only worked with the button outside the form tag. As soon as I move it in the form it doesn't output the file name. 

<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>
Michelle
  • 41
  • 2

1 Answers1

0

        <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>
Nevzat GÜRBÜZ
  • 1
  • 1