Когда мы разрабатываем проекты на платформе Symfony, иногда нам нужны поля с расширенным текстом. В таких случаях CKEditor - один из лучших вариантов для нас.
В этой статье я постараюсь рассказать вам, как внедрить плагины CKEditor и CKFinder в наш проект для пакета EasyAdmin.
Прежде всего, я рассчитываю, что вы уже внедрили EasyAdmin в свой проект.
Прежде всего, мы интегрируем в наш проект CKEditorBundle, который изначально был разработан FriendsOfSymfony.
composer require friendsofsymfony/ckeditor-bundle
После выполнения этой команды он спросит, хотите ли вы активировать пакет и автоматически создавать файлы конфигурации, используя рецепт на появившемся экране. Мы продолжаем, говоря "да" на это.
Затем мы запускаем следующие команды, чтобы установить пакет и загрузить ресурсы:
php bin/console ckeditor:install php bin/console assets:install — symlink
После выполнения этих шагов мы успешно установим пакет. Затем нужно активировать плагин ckeditor для связанного поля с именем.
С помощью этой конфигурации мы делаем возможным создание входных данных формы с помощью bootstrap 4 и добавление виджета ckeditor в наши формы. Затем мы активируем плагин ckeditor для области содержимого нашей сущности Campaign:
После этого процесса CKEditor с элементами базового уровня будет загружен при открытии страницы. Если вы хотите, чтобы он был загружен со всеми его элементами, нам нужно сделать такую настройку:
После всего этого наша интеграция CKEditor будет завершена, и мы получим такое представление:
После этой интеграции, если вы хотите добавить изображение или какой-либо файл в эту область содержимого, сохранить их на сервере и использовать в другом содержимом, вы должны сделать это в интеграции с CKFinder. В оставшейся части нашей статьи я объясню, как мы можем сделать эту интеграцию.
Прежде всего, нам нужно интегрировать ckfinder-symfony-bundle, который был разработан ckfinder.
composer require ckfinder/ckfinder-symfony-bundle
После извлечения этого пакета мы должны выполнить следующие команды по порядку:
php bin/console ckfinder:download php bin/console assets:install
Затем нам нужно сохранить файлы, которые мы загрузили с помощью CKFinder, где-нибудь в общедоступном каталоге. Мы запускаем следующую команду в этом.
mkdir -m 777 public/userfiles
ПРИМЕЧАНИЕ. Предполагая, что мы находимся в локальной среде разработки, мы определили 777, но с точки зрения безопасности будет важно определить полномочия и пользователя, соответствующие настройкам вашего сервера в производственной среде.
Чтобы использовать CKFinder в нашем проекте, конечная точка «/ ckfinder / connector» должна быть доступна внутри проекта. Для этого необходимо добавить в наши маршруты следующий маршрут.
Эта конечная точка перейдет к классу аутентификации, аутентифицирует и разрешит загрузку файлов. Для этого нам нужно написать собственный класс аутентификатора и добавить его в нашу конфигурацию.
В этом примере мы вернулись напрямую, чтобы вернуть true, но вы можете решить, кто может загружать файлы, а кто нет, создав условия в методе проверки подлинности. Затем нам нужно добавить этот класс в нашу конфигурацию.
После настройки параметров конфигурации мы обеспечим автоматическую загрузку связанных ресурсов в easy_admin. Здесь есть очень важный момент. Необходимо подготовить специальный файл js, чтобы EasyAdmin запускал CKFinder автоматически. Благодаря этому файлу CKFinder будет активирован прямо на странице CKEditor. Для этого, например, я создам файл с именем setup-ckfinder.js в каталоге public / js, и его содержимое будет следующим:
Теперь нам нужно сделать последний шаг. На этом этапе автоматически импортируйте собственный javascript-файл ckfinder и setup-ckfinder.js, который мы подготовили в easy_admin.yaml:
После этих настроек мы теперь можем использовать CKFinder.
Я надеюсь, что вы сможете легко интегрироваться и легко сможете использовать плагины CKEditor и CKFinder в своих проектах.
