Download the PHP package ehyiah/ux-quill without Composer

QuillJs Bundle for Symfony using Symfony UX

Symfony UX Bundle implementing the Quill JS Wysiwyg https://quilljs.com/

If you need a easy to use WYSIWYG (with no complex configuration) into a symfony project this is what you need.

It comes with some extra features out of the box like image uploading to custom endpoint instead of base64 only.

2.x.x tags cover the new Quill v2

1.x.x tags cover the Quill v1.3.7 (no maintained)

• Installation

• Basic Usage

• Display Result

• Customize quillJS with options and extra_options

• Handle images uploads

• Handle images uploads security

• Extend Quill stimulus controller

• EasyAdmin Integration
• EasyAdmin Usage

Installation

Step 1 Require bundle

If you are using the AssetMapper Component you're done !

step 2 next run (If you are using webpack encore, not needed with AssetMapper)

OR

It's done, you can use the QuillType to build a QuillJs WYSIWYG

You can add as many WYSIWYG fields inside same page like any normal fields.

Basic Usage

In a form, use QuillType. It works like a classic Type except it has more options : e.g:

Display result

in a twig template :

• if you use the default class styling option you may need to encapsulate the content so the quill stylesheet can be applied like this :

• if you use the inline styling option simply :

you can of course sanitize HTML if you need to for security reason, but don't forget to configure it to your needs as many html balise and style elements will be removed by default. Same goes in your Form configuration

For the most basic this is only what you have to do.

Customize Options

quill_options :

This is where you will choose what elements you want to display in your WYSIWYG. You can build an array like you would do following the QuillJs official documentation Or use a more convenient with Autocomplete using the many Fields Object in this bundle.

This example will display a h1 and h2 header options side by side

This example will display a h1 and h2 header options side by side and another Group containing a Bold and an Italic fields

You can add as many Groups as you like or just One if you don't need the WYSIWYG options to have spaces between them.

Available Fields

• Below is the list of available fields from QuillJS (https://v2.quilljs.com/docs/formats)

• Below is a list of fields not available in QuillJS but taken from community:

quill_extra_options

Image upload Handling

in ImageField : QuillJS transforms images in base64 encoded file by default to save your files. However, you can specify a custom endpoint to handle image uploading and pass in response the entire public URL to display the image.

currently handling 2 methods :

1 : data sending in base64 inside a application/json request

• in json mode data will look like this by calling $request->getContent() and in content-type headers

2 : sending in a multipart/form-data request

• in form mode you will find a in content-type headers and file will be present in $request->files named as a Symfony\Component\HttpFoundation\File\UploadedFile
• then you can handle it like you would do with a FileType and access the file like this :

upload mode configuration :

exemple of a json configuration to send request to the upload endpoint that returns a json response containing the URL to the uploaded image.

see below for a detail on these options values.

available options in upload handler:

upload endpoint security:

exemple of a json configuration with jwt security.

• If your response in a classic simple Symfony\Component\HttpFoundation\Response, you can simply return a response like this one for exemple and do not need to specify the json_response_file_path option.

• If your response is a Json response like a Symfony\Component\HttpFoundation\JsonResponse, the json_response_file_path option can be used to specify the url inside the json response. in the exemple below json_path_file_response must be 'file.url'.

• If your response is a Json response like a Symfony\Component\HttpFoundation\JsonResponse, and the json_response_file_path is null.

Modules

PHP configurable modules

For these modules, you can configure them directly in your PHP form : https://quilljs.com/docs/modules

You can add/customize quill modules in this option field. You can create your own modules classes, they need to implement the ModuleInterface and add the name and options properties. Some modules are automatically loaded when they are needed in fields.

Other modules

For other modules, you will need to extends Quill controller (see below) to use them.

icons

You can customize icons used in toolbar exemple :

Extend Quill stimulus controller

If you need to extend default behavior of built-in controller, this is possible. exemple : you need to modify modules registration and/or add custom javascript to modify quill behaviour.

Some modules like Keyboard and Clipboard need custom javascript to be written. The easiest way to do so is to create a custom stimulus controller to extend the default behavior.

Create a new stimulus controller inside your project

some events are dispatched : connect, options

Then in your form

Easyadmin Integration

• First create a quill-admin.js inside assets directory

When using AssetMapper

create a new entry in importmap.php (the key must be quill-admin as it is the name used in the built-in QuillAdminField)

and it should be done. but read below

WARNING => at the moment there seems to have an issue with easyadmin with the ->addAssetMapperEntries() function as I can not get it work as it should be. a quick fix is to add in your crudControllers

OR

in your dashboard

When using webpack

• Next create in webpack.config a new entry (the entry name must be quill-admin as it is the name used in the built-in QuillAdminField)

don't forget to recompile assets (yarn build/watch or npm equivalent).

EasyAdmin usage

Then you can use the QuillAdminField like this :

Or add custom options like you would do with the normal type