FOSCKEditor Setup - MiguelFieira/AMO-HANDBOEK GitHub Wiki

Symfony is a PHP framework for web applications and a set of reusable PHP components. Symfony is used by thousands of web applications (including BlaBlaCar.com and Spotify.com) and most of the popular PHP projects (including Drupal and Magento).

Notice! You must have a form builder in your project in order to include and apply this bundle on your form-field. This bundle cannot be applied on a plain html input.

Setup

1. After creating a project you can start adding FOS CKEditor Bundle

composer require friendsofsymfony/ckeditor-bundle

// This will install all dependencies required for the Bundle

// You should get this result and continue with the tutorial

2. Install ckeditor by the following command.

php bin/console ckeditor:install

// If you encounter an error after requiring the component which contains 'Unable to extract the file'. Do the following:

2.1 Navigate to App\public and create the following folders bundles/fosckeditor

2.2 After this step download the .rar file which got send in your terminator or download the of the bundle here.

// Open the zip file and make sure those files are included in the file.

2.3 Extract those files into the App\public\bundles\fosckeditor folder

// You should get this result.

// Those steps should lead to the same results as what the composer require friendsofsymfony/ckeditor-bundle offers.

3. Install assets by the following command.

php bin/console asset:install

4. After being done installing the bundle & assets navigate to your src\Form\WorkshopType.php and make sure you import the class and call the class CKEditorType::class in the input field where you want to have the CKEditor with the following lines.

use FOS\CKEditorBundle\Form\Type\CKEditorType;

$builder
  ->add('beschrijving', CKEditorType::class)

// Make sure it looks similar to this.

<?php

namespace App\Form;

use App\Entity\Workshop;
use Faker\Provider\DateTime;
use Symfony\Component\Form\AbstractType;
use Symfony\Component\Form\FormBuilderInterface;
use Symfony\Component\OptionsResolver\OptionsResolver;
use Symfony\Component\Form\Extension\Core\Type\FileType;
use FOS\CKEditorBundle\Form\Type\CKEditorType;

class WorkshopType extends AbstractType
{
    public function buildForm(FormBuilderInterface $builder, array $options)
    {
        $builder
            ->add('photo', FileType::class, array(
                "data_class" => null,
            ))
            ->add('naam')
            ->add('beschrijving', CKEditorType::class)
            ->add('prijs')
            ->add('min_deelnemers')
            ->add('max_deelnemers')
            ->add('begin')
            ->add('eind')
            ->add('coach')
            ->add('ruimte')
        ;
    }

    public function configureOptions(OptionsResolver $resolver)
    {
        $resolver->setDefaults([
            'data_class' => Workshop::class,
        ]);
    }
}

5. After the previous step make sure to check if it is working by navigating to the link and the form where you applied it, the result must look like this.

// And you're done!!