CKEditor (ckeditor.com) to wizualny edytor, który pozwala na formatowanie treści strony za pomocą interfejsu przypominającego programy typu Microsoft Word. Na obrazku powyżej widać przykład takiego edytora osadzonego w panelu EasyAdmin (dla Symfony 4).
Jeśli używasz nowszej wersji EasyAdmin 3 i Symfony Flex z Webpack Encore to przejdź tutaj.
Zadanie zaczniemy od pobrania bundla FOSCKEditorBundle:
1 |
$ composer require friendsofsymfony/ckeditor-bundle |
Następnie zainstaluj CKEditor:
1 |
$ php bin/console ckeditor:install |
oraz Assetic:
1 |
$ php bin/console assets:install public |
Dzięki Assetic można np: łączyć pliki CSS i JS, kompresować je, jak również optymalizować obrazy. Więcej o Assetic przeczytasz tutaj.
Utwórz plik fos_ck_editor.yaml (/config/packages/fos_ck_editor.yaml). W pliku tym możemy zdefiniować kolor edytora jak również określić, które przyciski mają być widoczne etc.
1 2 3 4 5 |
fos_ck_editor: configs: config: #toolbar: [ ["Source", "-", "Save"], "/", ["Anchor"], "/", ["Maximize"] ] uiColor: "#efefef" |
Atrybut „toolbar” zakomentowałem, przez co wczytane zostaną wszystkie przyciski i paski narzędziowe edytora. Jak widać, możesz tymi atrybutami manipulować dostosowując je do własnych potrzeb.
CKEditor podepniemy pod pole (textarea) o nazwie „content” – z przykładu przedstawionego w rozdziale: „Instalacja Symfony 4 + EasyAdmin”. Przy okazji rozszerzymy panel CMS (EasyAdmin) o jakże przydatną funkcjonalność 🙂
Wyedytuj plik easy_admin.yaml (/config/packages/easy_admin.yaml):
1 2 3 4 5 6 7 8 9 10 |
easy_admin: entities: Page: class: App\Entity\Page form: fields: - 'title' - { property: 'content', type: 'FOS\CKEditorBundle\Form\Type\CKEditorType' } - 'enabled' - 'createdAt' |
- class: App\Entity\Page – wskazuje adres do klasy, w której zdefiniowane mamy pola formularza (naszej aplikacji itp),
- form: fields – listuje pola formularza z klasy Page,
- { property: 'content’, type: 'FOS\CKEditorBundle\Form\Type\CKEditorType’ } – edytor WYSIWYG podpinamy do pola o nazwie „content” (textarea).
I to wszystko. Testuj!
Do następnego ==>