<commit_before>Integrating FOSCKEditorBundle to Create a WYSIWYG Editor
========================================================

.. note::

    Starting from 2.2.1 version, EasyAdmin provides a built-in and ready to use
    text editor based on the `Trix editor`_. It doesn't require installing or
    configuring anything and it covers the needs of most applications.
    :ref:`Learn more about the built-in text editor <form-type-text-editor>`
    and if it doesn't fit your needs, keep reading this article.

EasyAdmin uses a ``<textarea>`` form field to render long text properties:

.. image:: ../images/wysiwyg/default-textarea.png
   :alt: Default textarea for text elements

However, sometimes you need to provide to your users a rich editor, commonly
named *WYSIWYG editor*. Although EasyAdmin doesn't provide any built-in rich text
editor, you can integrate one very easily.

Installing the Rich Text Editor
-------------------------------

The recommended WYSIWYG editor is called `CKEditor`_ and you can integrate it
thanks to the `FOSCKEditorBundle`_:

1) Install the bundle:

.. code-block:: terminal

    $ composer require friendsofsymfony/ckeditor-bundle

2) Install CKEditor:

.. code-block:: terminal

    $ php bin/console ckeditor:install

3) Install the JavaScript/CSS files used by the bundle:

.. code-block:: terminal

    $ php bin/console assets:install --symlink

Finally, add the ``ckeditor_widget.html.twig`` form theme to your Twig
configuration so the ``<textarea>`` elements used by the editor are properly
designed:

.. code-block:: yaml

    # config/packages/twig.yaml
    twig:
        form_themes:
            - '@FOSCKEditor/Form/ckeditor_widget.html.twig'

Using the Rich Text Editor
--------------------------

FOSCKEditorBundle provides a new form type called ``fos_ckeditor``. Set the
``type`` option of any property to this value to display its contents using a
rich text editor:

.. code-block:: yaml

    # config/packages/easy_admin.yaml
    easy_admin:
        entities:
            Product:
                # ...
                form:
                    fields:
                        # ...
                        - { property: 'description', type: 'fos_ckeditor' }

.. tip::

    Even if your application uses Symfony 3 there is no need to use the FQCN of
    the ``CKEditorType`` (``type: 'FOS\CKEditorBundle\Form\Type\CKEditorType'``)
    because EasyAdmin supports the short types for some popular third-party bundles.

Now, the ``description`` property will be rendered as a rich text editor and not as<commit_msg>minor #2962 form theme (versh23)<commit_after>Integrating FOSCKEditorBundle to Create a WYSIWYG Editor
========================================================

.. note::

    Starting from 2.2.1 version, EasyAdmin provides a built-in and ready to use
    text editor based on the `Trix editor`_. It doesn't require installing or
    configuring anything and it covers the needs of most applications.
    :ref:`Learn more about the built-in text editor <form-type-text-editor>`
    and if it doesn't fit your needs, keep reading this article.

EasyAdmin uses a ``<textarea>`` form field to render long text properties:

.. image:: ../images/wysiwyg/default-textarea.png
   :alt: Default textarea for text elements

However, sometimes you need to provide to your users a rich editor, commonly
named *WYSIWYG editor*. Although EasyAdmin doesn't provide any built-in rich text
editor, you can integrate one very easily.

Installing the Rich Text Editor
-------------------------------

The recommended WYSIWYG editor is called `CKEditor`_ and you can integrate it
thanks to the `FOSCKEditorBundle`_:

1) Install the bundle:

.. code-block:: terminal

    $ composer require friendsofsymfony/ckeditor-bundle

2) Install CKEditor:

.. code-block:: terminal

    $ php bin/console ckeditor:install

3) Install the JavaScript/CSS files used by the bundle:

.. code-block:: terminal

    $ php bin/console assets:install --symlink

Finally, add the ``ckeditor_widget.html.twig`` form theme to your Twig
configuration so the ``<textarea>`` elements used by the editor are properly
designed:

.. code-block:: yaml

    # config/packages/easy_admin.yaml
    easy_admin:
        design:
            form_theme:
                - '@EasyAdmin/form/bootstrap_4.html.twig'
                - '@FOSCKEditor/Form/ckeditor_widget.html.twig'

Using the Rich Text Editor
--------------------------

FOSCKEditorBundle provides a new form type called ``fos_ckeditor``. Set the
``type`` option of any property to this value to display its contents using a
rich text editor:

.. code-block:: yaml

    # config/packages/easy_admin.yaml
    easy_admin:
        entities:
            Product:
                # ...
                form:
                    fields:
                        # ...
                        - { property: 'description', type: 'fos_ckeditor' }

.. tip::

    Even if your application uses Symfony 3 there is no need to use the FQCN of
    the ``CKEditorType`` (``type: 'FOS\CKEditorBundle\Form\Type\CKEditorType'``)
    because EasyAdmin supports the short types for some popular third-party bundles.

Now, the ``description`` property will be rendered as a rich text editor and not as
{'fraction_non_alphanumeric': 0.12100456621004566, 'fraction_numerical': 0.003995433789954338, 'mean_word_length': 2.8177196804647786, 'pattern_counts': {'":': 0, '<': 9, '<?xml version=': 0, '>': 9, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '7044723', 'n_tokens_mistral': 1470, 'n_tokens_neox': 1383, 'n_words': 569}