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:

Następnie zainstaluj CKEditor:

oraz Assetic:

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.

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):

  • 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 ==>