Ben üstte CKeditor'ün Browse özelliğini gösteren bir kod yazmışım:
config.filebrowserBrowseUrl: '/filemanager',
config.filebrowserUploadUrl: '/filemanager/upload'
Bu şekilde config.js dosyasına bunu eklediğinizde resim kutusunu açtığınızda Sunucuya Gözat düğmesi çıkıyor ve ona basınca standart popup ile /filemanager rotasını açıyor. Bu rotanın da sizin filemanager.blade.php şablonunu yüklediğini varsayın. Bu rotayı da kontrol eden FileManagerController şeklinde bir controller olsun; FileManagerController::show() şablonu gösteriyor, içerisinde resimler var. FileManagerController::upload() yöntemi ise /filemanager/upload rotasına POST ile bağlı.
Şablonun içerisinde sizin resimler listeleniyor. Resimleri de <a> etiketi içine aldığınızı düşünün:
<a href="#" data-url="https://sitem.com/uploads/1.jpg"><img src="/uploads/1_thumb.jpg"><a/>
<a href="#" data-url="https://sitem.com/uploads/2.jpg"><img src="/uploads/2_thumb.jpg"><a/>
<a href="#" data-url="https://sitem.com/uploads/3.jpg"><img src="/uploads/3_thumb.jpg"><a/>
Yine filemanager.blade.php içerisinde şu şekilde yapıyorsunuz, örneğin jQuery ile:
$('[data-url]').click(function () {
var url = $(this).data('url');
window.opener.CKEDITOR.tools.callFunction(0, url); // Bu kısım popup açan resim kutusuna url'yi ekliyor
window.close();
});
Örneğin 1. resmi tıkladığınızda resim kutucuğundaki Url alanına https://sitem.com/uploads/1.jpg
yolunu yapıştırıyor ve açılan filemanager popup penceresini kapatıyor.
Bitti işte 🙂