Implementing CKEditor and CKFinder on EasyAdmin (Symfony5)

While we’re developing projects on Symfony framework sometimes we need rich text area fields. In these kind of cases, CKEditor is one of the best option for us.

In this article i will try to tell you how to implement CKEditor and CKFinder plugins to our project for EasyAdmin package.

First of all, i will count on you’ve already implemented EasyAdmin on your project.

First of all we integrate CKEditorBundle, which was originally developed by FriendsOfSymfony, into our project.

composer require friendsofsymfony/ckeditor-bundle

After running this command, it will ask if you would like to activate the bundle and create the configuration files automatically by using recipe on the screen that appears. We proceed by saying yes to this.

Then we run the following commands to install the bundle and load the assets:

php bin/console ckeditor:install
php bin/console assets:install — symlink

After performing these steps, we will have successfully installed the bundle. Next up is to activate the ckeditor plugin for a related field called.

With this config, we make it possible to create our form inputs with bootstrap 4 and add the ckeditor widget to our forms. Then we activate the ckeditor plugin for the content area for our Campaign entity:

After this process, CKEditor with basic level elements will be loaded when the page is opened. If you want it to be loaded with all its elements, we need to make a setting like this:

After all this, our CKEditor integration will be completed and we will get an view like this:

After this integration, if you want to add a picture or any kind of file in this content area and keep them on the server and use it in different contents, you have to do it in CKFinder integration. In the rest of our article, I will explain how we can make this integration.

First of all, we need to integrate ckfinder-symfony-bundle, which was developed by ckfinder.

composer require ckfinder/ckfinder-symfony-bundle

After pull this package, we should run the following commands in order:

php bin/console ckfinder:download
php bin/console assets:install

Then we need to keep the files we uploaded with CKFinder somewhere under the public directory. We run the following command in this.

mkdir -m 777 public/userfiles

NOTE: Assuming we are in the local development environment, we defined 777, but it will be important in terms of security to determine the authority and user appropriate for your server settings in production.

In order to use CKFinder in our project, “/ckfinder/connector” endpoint must be accessible within the project. To achieve this, it is necessary to add the following route into our routes.

This endpoint will go to an authentication class, authenticate and allow files to be uploaded. In this we need to write a custom authenticator class and add it to our config.

In this example, we returned directly to return true, but you can decide who can upload files and who can not upload by creating conditions in the authenticate method. Then we need to add this class to our config.

After making our config settings, we will ensure that our related assets are autoloaded in easy_admin. There is a very important point here. It is necessary to prepare a special js file for EasyAdmin to start CKFinder automatically. Thanks to this file, CKFinder will be activated directly on a page that is CKEditor. For this, for example, I will create a file named setup-ckfinder.js under the public / js directory and its contents will be as follows:

Now we have one last step to do. In this step, automatically import ckfinder’s own javascript file and setup-ckfinder.js we prepared in easy_admin.yaml:

After these settings, we can now use CKFinder.

I hope you can seamlessly integrate and you can easily use the CKEditor and CKFinder plugins in your projects.