Creación de Custom Form Types en Symfony: Implementando un WysiwygType

En Symfony, extender los tipos de formulario nativos nos permite encapsular lógica, definir valores por defecto y reutilizar componentes sin repetir código en cada buildForm. Esto es especialmente útil para integrar librerías de terceros o editores de texto enriquecido (WYSIWYG).

Al crear un custom type, podemos forzar clases CSS específicas o configuraciones de atributos que el frontend necesita para inicializar scripts.

Definición del Custom Type

Para crear nuestro propio tipo, debemos extender de AbstractType. En este ejemplo, creamos un WysiwygType que hereda de TextareaType y añade automáticamente la clase CSS wysiwyg.

Este código es totalmente compatible con Symfony 5, 6 y 7.

namespace App\Form\Type;

use Symfony\Component\Form\AbstractType;
use Symfony\Component\Form\Extension\Core\Type\TextareaType;
use Symfony\Component\OptionsResolver\OptionsResolver;

class WysiwygType extends AbstractType
{
    /**
     * Definimos los valores por defecto del campo
     */
    public function configureOptions(OptionsResolver $resolver): void
    {
        $resolver->setDefaults([
            'empty_data' => '',
            'attr' => [
                'class' => 'wysiwyg' // Clase necesaria para el JS del editor
            ]
        ]);
    }

    /**
     * Indicamos el Form Type padre del que hereda
     */
    public function getParent(): string
    {
        return TextareaType::class;
    }
}

Uso en el Form Builder

Una vez definido el tipo, Symfony lo registra automáticamente (si tienes activado el autowiring). Ahora puedes usarlo en cualquier formulario igual que usarías un TextType o un EmailType.

namespace App\Form;

use App\Form\Type\WysiwygType;
use Symfony\Component\Form\AbstractType;
use Symfony\Component\Form\FormBuilderInterface;
use Symfony\Component\Form\Extension\Core\Type\TextType;

class UserType extends AbstractType
{
    public function buildForm(FormBuilderInterface $builder, array $options): void
    {
        $builder
            ->add('name', TextType::class, [
                'empty_data' => ''
            ])
            ->add('surname', TextType::class, [
                'empty_data' => ''
            ])
            ->add('description', WysiwygType::class) // Nuestro campo personalizado
            ->add('address', TextType::class)
        ;
    }
}

Beneficios de este enfoque

• DRY (Don't Repeat Yourself): No tienes que añadir la clase 'class' => 'wysiwyg' manualmente en cada formulario de la aplicación.

• Abstracción: Si mañana decides cambiar el editor (por ejemplo, de CKEditor a TinyMCE) y necesitas cambiar la clase CSS, solo lo haces en un archivo.

• Consistencia: Aseguras que todos los campos de descripción de la web se comporten y luzcan exactamente igual.

• Tip técnico: Recuerda que al heredar de TextareaType, puedes seguir sobrescribiendo cualquier opción (como el label o los constraints) al llamar a add() en el builder, ya que configureOptions establece solo los valores por defecto.