Symfony projelerinde EasyAdmin’e CKEditor ve CKFinder Entegrasyonu

Merhaba arkadaşlar, Symfony ile proje geliştirirken bazı durumlarda zengin metin içeriği girmek için alanlar oluşturmamız gerekebiliyor. Bu tip durumlarda CKEditor en çok kullandığımız pluginlerden bir tanesidir.

Symfony ile proje geliştirirken hızlı admin panelleri oluşturmak için çokça kullandığımız paketlerden EasyAdmin’e CKEditor ve devamında CKFinder’ı nasıl entegre edebileceğimizi anlatmaya çalışacağım.

Öncelikle EasyAdmin’in projenizde kurulu olduğunu varsayarak devam edeceğimi belirtmek isterim.

İlk olarak FriendsOfSymfony tarafından geliştirilen CKEditorBundle ı projemize entegre ediyoruz:

composer require friendsofsymfony/ckeditor-bundle

Bu komutu çalıştırdıktan sonra karşımıza gelen ekranda recipe kullanarak otomatik olarak bundle’ı aktifleştirmek ve konfigürasyon dosyalarını oluşturmak ister misiniz diye soracak. Buna evet diyerek ilerliyoruz.

Sonrasında bundle’ın kurulumu ve asset’lerin yüklenmesi için aşağıdaki komutları çalıştırıyoruz:

php bin/console ckeditor:install
php bin/console assets:install --symlink

Bu adımları gerçekleştirdikten sonra bundle’ı başarıyla kurmuş olacağız. Sırada ise admindeki ilgili bir alan için ckeditor pluginini aktifleştirmek var.

Bu yaptığımız config ile form inputlarımızın daha güzel gözükmesi için bootstrap 4 ile oluşturulmasını ve formlarımıza ckeditor widget’ının eklenmesini sağlıyoruz. Devamında ise Campaign entity’imiz için content alanı için ckeditor pluginini aktif hale getiriyoruz:

Bu işlemin ardından temel seviyedeki elemanları ile CKEditor sayfa açıldığında yüklenecektir. Tüm elemanları ile yüklenmesini isterseniz onun içinde şöyle bir ayar yapmamız gerekiyor:

Tüm bunların ardından CKEditor entegrasyonumuz tamamlanmış olacak ve şöyle bir görüntü elde edeceğiz.

Evet arkadaşlar entegrasyonun ardından bu içerik alanı içerisinde resim veya herhangi bir dosya eklemek ve bunları server’da tutup farklı içeriklerde kullanmak isterseniz CKFinder entegrasyonuda yapmanız gerekiyor. Yazımızın devamında bu entegrasyonu nasıl yapabileceğimizi anlatacağım.

Öncelikle ckfinder tarafından geliştirilmiş olan ckfinder-symfony-bundle ı entegre etmemiz gerekiyor.

composer require ckfinder/ckfinder-symfony-bundle

Bu paketi çektikten sonra ise sırasıyla şu komutları çalıştırmalıyız:

php bin/console ckfinder:download
php bin/console assets:install

Sonrasında CKFinder ile yüklediğimiz dosyaları public dizini altında bir yerde tutmamız gerekiyor. Bunun içinde aşağıdaki komutu çalıştırıyoruz.

mkdir -m 777 public/userfiles

NOT: Local geliştirme ortamında olduğumuzu varsayarak 777 verdik ancak production’da buna server ayarlarınıza uygun yetki ve user belirlemeniz güvenlik açısından önemli olacaktır.

CKFinder’ı projemiz içerisinde kullanmak için /ckfinder/connector endpoint’inin proje içerisinde erişilebilir olması gerekiyor. Bunu sağlamak içinde route’larımız içerisine aşağıdaki route’u eklemek gerekiyor.

Bu endpoint bir authentication sınıfına gidip authenticate olacak ve dosyaların yüklenebilme iznini verecektir. Bunun içinde bir custom authenticator sınıfı yazmamız ve bunu config’lerimize eklememiz gerekiyor.

Bu örneğimizde direkt olarak return true döndük ama authenticate metodu içerisinde istediğiniz şekilde koşullar oluşturarak kimlerin dosya yükleyip kimlerin yükleyemeceğine siz karar verebilirsiniz. Sonrasında ise bu sınıfı config’imize eklememiz gerekiyor.

Config ayarlamızı da yaptıktan sonra ilgili assetlerimizin easy_admin içerisinde autoload olmasını sağlayacağız. Burada çok önemli bir nokta var. EasyAdmin’in CKFinder’ı otomatik olarak başlatması için özel bir js dosyası hazırlamak gerekiyor. Bu dosya sayesinde CKEditor olan bir sayfada CKFinder da direkt olarak aktif hale gelecek. Bunun için ben örnek olarak public/js dizini altında setup-ckfinder.js adında bir dosya oluşturacağım ve içeriği şu şekilde olacak:

Artık yapmamız gereken son bir adım kaldı. Bu adımda easy_admin.yaml içerisinde ckfinder’ın kendi js dosyası ve hazırladığımız setup js’i otomatik olarak içeri almak. Bunun içinde:

Bu ayarların ardından artık CKFinder’ı kullanabiliriz.

Burada Browse Server butonuna tıklamanız gerekiyor.

Umarım sorunsuz bir entegrasyon gerçekleştirir ve sizlerde projelerinizde CKEditor ve CKFinder pluginlerini rahatlıkla kullanabilir hale gelirsiniz.