CKFinder 3 (nicht mit CKEditor) Wie kann ich einen Benutzer in den Bildbearbeitungsbereich mit bestimmten Abmessungen zwingen, wenn ein Bild ausgewählt oder hochgeladen wird

Question

Ich habe alle mit Ckfinder markierten Fragen durchgesehen und nichts scheint zu helfen. Hier geht es um den neuen CKFinder 3.

Wir haben ein cms (PHP). Auf regulären Inhaltsseiten arbeiten ckeditor und ckfinder gut zusammen. Es ist mir egal, welche Dimensionen sie verwenden.

Wir geben dem Benutzer auch die Möglichkeit, Bilder für einen Schieberegler auf einer separaten Seite hochzuladen. Diese Bilder sollten eine bestimmte Breite und Höhe haben. Hier stecke ich fest. Sobald ein Benutzer ein Bild hochgeladen oder ausgewählt hat, möchte ich das Bild automatisch in den Bildbearbeitungsbereich mit den eingestellten Fruchtmaßen bringen.

Ich verwende das Popup-Beispiel. Ich habe bemerkt, dass der angegebene Code nur mit der Schaltfläche außerhalb des Formular-Tags funktioniert. Sobald ich es in das Formular verschiebe, gibt es den Dateinamen nicht aus.

<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"> 
 

 
\t \t <input id="ckfinder-input-1" name="resimyolu" type="text" style="width:60%"> 
 
\t \t <button id="ckfinder-popup-1" class="button-a button-a-background">Browse Server</button> 
 

 
</form> 
 
<script> 
 
\t var button1 = document.getElementById('ckfinder-popup-1'); 
 
\t var button2 = document.getElementById('ckfinder-popup-2'); 
 

 
\t button1.onclick = function() { 
 
\t \t selectFileWithCKFinder('ckfinder-input-1'); 
 
\t }; 
 
\t button2.onclick = function() { 
 
\t \t selectFileWithCKFinder('ckfinder-input-2'); 
 
\t }; 
 

 
\t function selectFileWithCKFinder(elementId) { 
 
\t \t CKFinder.popup({ 
 
\t \t \t chooseFiles: true, 
 
\t \t \t width: 800, 
 
\t \t \t height: 600, 
 
\t \t \t onInit: function(finder) { 
 
\t \t \t \t finder.on('files:choose', function(evt) { 
 
\t \t \t \t \t var file = evt.data.files.first(); 
 
\t \t \t \t \t var output = document.getElementById(elementId); 
 
\t \t \t \t \t output.value = file.getUrl(); 
 
\t \t \t \t }); 
 

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