CKEditor (ckeditor.com) to wizualny edytor WYSIWYG UI, który służy do redagowania zawartości dokumentów HTML. W systemach CMS odgrywa kluczową rolę. Trudno wyobrazić sobie formatowanie treści strony bez takiego narzędzia.
W tym poście pokażę w jaki sposób dodać go do pakietu EasyAdmin 3. Nowy EasyAdmin posiada wbudowany edytor TRIX ale na dzień dzisiejszy ma pewne ograniczenia i nie daje takiej swobody jak CKEditor.
(Jeśli używasz starszej wersji EasyAdmin 2 i Symfony 4 to wbijaj tutaj)
Na początku przygotuj środowisko Symfony 5 (Flex) z Webpack Encore a następnie pobierz pakiet: FOSCKEditorBundle:
|
1 |
composer require friendsofsymfony/ckeditor-bundle |
Zainstaluj CKEditor:
|
1 |
yarn add ckeditor@^4.0.0 |
Edytuj plik bundles.php (/config/bundles.php) dodając wpis:
|
1 2 3 4 5 6 |
<?php return [ // ... FOS\CKEditorBundle\FOSCKEditorBundle::class => ['all' => true] ]; |
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.
|
1 2 3 4 5 6 |
fos_ck_editor: base_path: "build/ckeditor" js_path: "build/ckeditor/ckeditor.js" configs: config: #toolbar: [ ["Source", "-", "Save"], "/", ["Anchor"], "/", ["Maximize"] ] |
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):
|
1 2 3 4 5 6 7 |
.copyFiles([ {from: './node_modules/ckeditor/', to: 'ckeditor/[path][name].[ext]', pattern: /\.(js|css)$/, includeSubdirectories: false}, {from: './node_modules/ckeditor/adapters', to: 'ckeditor/adapters/[path][name].[ext]'}, {from: './node_modules/ckeditor/lang', to: 'ckeditor/lang/[path][name].[ext]'}, {from: './node_modules/ckeditor/plugins', to: 'ckeditor/plugins/[path][name].[ext]'}, {from: './node_modules/ckeditor/skins', to: 'ckeditor/skins/[path][name].[ext]'} ]) |
W tym momencie możemy już skompilować zasoby. Tak więc wykonaj polecenie:
|
1 |
yarn encore dev |
Teraz musimy przygotować niestandardowe pole dla edytora. Utwórz plik o nazwie: CKEditorField.php (/src/Controller/Admin/Field/CKEditorField.php):
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<?php namespace App\Controller\Admin\Field; use EasyCorp\Bundle\EasyAdminBundle\Contracts\Field\FieldInterface; use EasyCorp\Bundle\EasyAdminBundle\Field\FieldTrait; use FOS\CKEditorBundle\Form\Type\CKEditorType; final class CKEditorField implements FieldInterface { use FieldTrait; public static function new(string $propertyName, ?string $label = null): self { return (new self()) ->setProperty($propertyName) ->setLabel($label) ->setTemplatePath('@FOSCKEditor/Form/ckeditor_widget.html.twig') ->setFormType(CKEditorType::class) ; } } |
Na koniec zaktualizuj kontroler CRUD, dla którego będzie wyświetlany CKEditor:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<?php namespace App\Controller\Admin; // ... use App\Controller\Admin\Field\CKEditorField; class ExampleCrudController extends AbstractCrudController { // ... public function configureCrud(Crud $crud): Crud { return $crud // ... ->addFormTheme('@FOSCKEditor/Form/ckeditor_widget.html.twig') ; } public function configureFields(string $pageName): iterable { return [ // ... CKEditorField::new('content')->hideOnIndex(), ]; } } |
I to wszystko. Otwórz stronę i sprawdź czy wszystko gra. W razie pytań lub uwag zamieść komentarz.