W poście EASYADMIN I CKEDITOR pokazałem w jaki sposób dodać wizualny edytor treści do formularza. Teraz rozwinę ten wątek o dodatkową funkcjonalność – przycisk “przeglądaj”, który pozwala wybrać plik/i z dysku komputera i wgrać na zdalny serwer. Taką możliwość daje rozbudowany menedżer plików CKFinder.
Zakładam, że masz już zainstalowany i skonfigurowany EasyAdmin + CKEditor. Jeśli nie, to przeczytaj wpierw to.
INSTALACJA CKFINDER
1. Instalacja pakietu za pomocą composera:
|
1 |
$ composer require ckfinder/ckfinder-symfony-bundle |
2. Pobierz pakiet dystrybucyjny CKFinder (ze względu na różne licencje nie jest dostarczany w standardzie).
|
1 |
$ php bin/console ckfinder:download |
3. Zainstaluj zasoby w katalogu /public/:
|
1 |
$ php bin/console assets:install |
W katalogu /public utwórz podkatalog userfiles, do którego będą uploadowane pliki. Zmień prawa dostępu do tego katalogu na 0777. Możesz to zrobić manualnie lub z wiersza poleceń:
|
1 |
$ mkdir -m 777 public/userfiles |
Nazwa userfiles jest domyślna. Możesz ją oczywiście zmienić w konfiguracji pakietu.
4. Dodaj trasę pakietu (config/routes/ckfinder.yaml):
|
1 2 3 |
ckfinder_connector: resource: "@CKSourceCKFinderBundle/Resources/config/routing.yml" prefix: / |
KONFIGURACJA UWIERZYTELNIENIA
Uwierzytelnianie konektora CKFinder jest zarządzane przez usługę ckfinder.connector.auth, która jest zdefiniowana w klasie: CKSourceCKFinderBundle\Authentication\Authentication. Klasa zawiera metodę authenticate(), która zwraca wartość logiczną (true lub false), w zależności, czy użytkownik powinien mieć dostęp do komponentu CKFinder, czy też nie. Domyślna wartość to false.
1. Utwórz klasę uwierzytelnienia CustomCKFinderAuth.php (src/CustomCKFinderAuth/CustomCKFinderAuth.php).
Poniższa implementacja rozszerza bazową klasę Authentication i zwraca wartość true (co nie jest bezpieczne). Kod klasy nie jest skończony i należy traktować jako wstępne rozwiązanie.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<?php // src/CustomCKFinderAuth/CustomCKFinderAuth.php namespace App\CustomCKFinderAuth; use CKSource\Bundle\CKFinderBundle\Authentication\Authentication as AuthenticationBase; class CustomCKFinderAuth extends AuthenticationBase { public function authenticate() { return true; } } |
2. Dodaj plik konfiguracyjny ckfinder.yaml (config/packages/ckfinder.yaml):
|
1 2 3 |
ckfinder: connector: authenticationClass: App\CustomCKFinderAuth\CustomCKFinderAuth |
Wszystkie niezdefiniowane opcje zostaną pobrane z domyślnego pliku konfiguracyjnego.
Przykład rozszerzony o kilka dodatkowych opcji:
|
1 2 3 4 5 6 7 8 9 10 11 |
ckfinder: connector: licenseName: LICENSE-NAME licenseKey: LICENSE-KEY authenticationClass: App\CustomCKFinderAuth\CustomCKFinderAuth backends: default: baseUrl: /public/media/ root: '%kernel.project_dir%/public/media' images: quality: 100 |
Więcej znajdziesz w dokumentacji.
AKTYWACJA CKFINDER W PANELU EASYADMIN
1. Utwórz plik ładujący setup-ckfinder.js (public/js/setup-ckfinder.js):
|
1 2 |
CKFinder.config({ connectorPath: '/ckfinder/connector' }); CKFinder.setupCKEditor(); |
2. Zaimportuj pliki: ckfinder.js i setup-ckfinder.js do konfiguracji easy_admin.yaml (config/packages/easy_admin.yaml):
|
1 2 3 4 5 6 7 8 9 10 11 12 |
easy_admin: site_name: 'Admin' design: # ... form_theme: # ... - '@FOSCKEditor/Form/ckeditor_widget.html.twig' assets: # ... js: - '/bundles/cksourceckfinder/ckfinder/ckfinder.js' - '/js/setup-ckfinder.js' |
I to wszystko. Niech <kod/> będzie z Tobą ;==>
