easyadmin3-ckeditor-symfony-flex

Integracja CKEditor z EasyAdmin 3

CKEditor (ckeditor.com) to wizualny edytor WYSIWYG UI, który służy do redagowania zawartości dokumentów WWW. W systemach CMS odgrywa kluczową rolę. W tym poście pokażę w jaki sposób dodać taki edytor do pakietu EasyAdmin 3. Owszem, nowy EasyAdmin posiada wbudowany edytor TRIX ale ma pewne ograniczenia i nie daje takiej swobody jak CKEditor.

(Jeśli używasz starszej wersji EasyAdmin 2 i Symfony 4 to przejdź tutaj.)


Na początku przygotuj środowisko Symfony 5 (Flex) z Webpack Encore a następnie pobierz pakiet: FOSCKEditorBundle:

Zainstaluj CKEditor:

Edytuj plik bundles.php (/config/bundles.php) dodając wpis:

Utwórz plik konfiguracyjny fos_ck_editor.yaml (/config/packages/fos_ck_editor.yaml). W pliku tym możemy definiować wygląd interfejsu edytora, określić, które przyciski lub paski narzędziowe będą widoczne, a które nie.

Istotne są tutaj dwa parametry pase_path i js_path wskazujące adres do pliku wykonywalnego ckeditor.js.

Zaktualizuj zawartość pliku konfiguracyjnego webpack.config.js (w katalogu głównym projektu):

W tym momencie możemy już skompilować zasoby. Tak więc wykonaj polecenie:

Teraz musimy przygotować niestandardowe pole dla edytora. Utwórz plik o nazwie: CKEditorField.php (/src/Controller/Admin/Field/CKEditorField.php):

Na koniec zaktualizuj kontroler CRUD, dla którego będzie wyświetlany CKEditor:

I to wszystko. Otwórz stronę i sprawdź czy wszystko gra. W razie pytań lub uwag zamieść komentarz. Pozdrawiam.


Leave a Comment

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *