PHP code example of ehyiah / ux-quill
1. Go to this page and download the library: Download ehyiah/ux-quill library . Choose the download type require .
2. Extract the ZIP file and open the index.php.
3. Add this code to the index.php.
<?php
require_once('vendor/autoload.php');
/* Start to develop here. Best regards https://php-download.com/ */
ehyiah / ux-quill example snippets
use Ehyiah\QuillJsBundle\Form\QuillType;
public function buildForm(FormBuilderInterface $builder, array $options)
{
$builder
// ...
->add('myField', QuillType::class)
;
}
use Ehyiah\QuillJsBundle\Form\QuillType;
public function buildForm(FormBuilderInterface $builder, array $options)
{
$builder
// ...
->add('myField', QuillType::class, [
'quill_extra_options' => [
'height' => '780px',
'theme' => 'snow',
'placeholder' => 'Hello Quill WYSIWYG',
],
'quill_options' => [
// this is where you customize the WYSIWYG by creating one or many Groups
// if you create many groups, they will be separated by a space in the toolbar
// you can also build your groups using a classic array but many classes are covering every Quill available Fields (see below for detailed list)
QuillGroup::build(
new BoldField(),
new ItalicField(),
// and many more
),
QuillGroup::build(
new HeaderField(HeaderField::HEADER_OPTION_1),
new HeaderField(HeaderField::HEADER_OPTION_2),
// and many more
),
// Or add all available fields at once
QuillGroup::buildWithAllFields()
]
])
;
}
/** @var \Symfony\Component\HttpFoundation\Request $request */
/** @var \Symfony\Component\HttpFoundation\File\UploadedFile $file */
$file = $request->files->get('file'))
'quill_extra_options' => [
'upload_handler' => [
'type' => 'json',
'upload_endpoint' => '/my-custom-endpoint/upload',
'json_response_file_path' => 'file.url'
]
],
'quill_extra_options' => [
'upload_handler' => [
'type' => 'json',
'upload_endpoint' => '/my-custom-endpoint/upload',
'json_response_file_path' => 'file.url',
'security' => [
'type' => 'jwt',
'jwt_token' => 'my_jwt_token',
],
]
],
return new Response('https://my-website/public/assets/my-uploaded-image.jpg');
return new JsonResponse([
'file' => [
'url' => 'https://my-website/public/assets/my-uploaded-image.jpg',
]
]);
return new JsonResponse('https://my-website/public/assets/my-uploaded-image.jpg');
'modules' => [
new SyntaxModules(),
],
'quill_extra_options' => [
/// other extra options
'custom_icons' => [
'bold' => '<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512" xml:space="preserve" fill="#000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path style="fill:#2488FF;" d="M478.609,300.522v-33.39h-33.391v-66.784h33.391l0,0l0,0V66.783h-33.391v-33.39h-33.391V0H0v100.174 h33.39v311.652H0V512h445.217v-33.39h33.391v-0.001l0,0v-33.391l0,0l0,0H512V300.522H478.609z M345.043,378.435H166.957v-44.522 h178.087V378.435z M345.043,155.826H166.957v-33.391h178.087V155.826z"></path> <polygon style="fill:#005ECE;" points="478.609,300.522 478.609,267.132 445.217,267.132 445.217,200.348 478.609,200.348 478.609,200.348 478.609,200.348 478.609,66.783 445.217,66.783 445.217,33.392 411.826,33.392 411.826,0 256,0 256,122.435 345.043,122.435 345.043,155.826 256,155.826 256,333.913 345.043,333.913 345.043,378.435 256,378.435 256,512 445.217,512 445.217,478.61 478.609,478.61 478.609,478.609 478.609,478.609 478.609,445.217 478.609,445.217 478.609,445.217 512,445.217 512,300.522 "></polygon> <rect x="33.391" y="100.174" width="33.391" height="311.652"></rect> <polygon points="33.391,411.826 0,411.826 0,512 445.217,512 445.217,478.609 33.391,478.609 "></polygon> <polygon points="411.826,33.391 411.826,0 0,0 0,100.174 33.391,100.174 33.391,33.391 "></polygon> <rect x="411.826" y="33.391" width="33.391" height="33.391"></rect> <rect x="445.217" y="66.783" width="33.391" height="133.565"></rect> <rect x="478.609" y="300.522" width="33.391" height="144.696"></rect> <rect x="445.217" y="445.217" width="33.391" height="33.391"></rect> <polygon points="378.435,189.217 378.435,122.435 345.043,122.435 345.043,155.826 166.957,155.826 166.957,122.435 345.043,122.435 345.043,89.043 133.565,89.043 133.565,189.217 "></polygon> <polygon points="345.043,378.435 166.957,378.435 166.957,333.913 345.043,333.913 345.043,300.522 133.565,300.522 133.565,411.826 378.435,411.826 378.435,333.913 345.043,333.913 "></polygon> <polygon points="411.826,233.739 378.435,233.739 378.435,267.13 445.217,267.13 445.217,200.348 411.826,200.348 "></polygon> <rect x="445.217" y="267.13" width="33.391" height="33.391"></rect> </g></svg>',
'italic' => '<svg fill="#000000" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M256,0C114.609,0,0,114.609,0,256s114.609,256,256,256s256-114.609,256-256S397.391,0,256,0z M256,472 c-119.297,0-216-96.703-216-216S136.703,40,256,40s216,96.703,216,216S375.297,472,256,472z"></path> <path d="M272.562,361.891L271.016,368H192l1.984-6.109c7.922-0.219,13.172-1,15.719-2.312c4.141-1.875,7.219-4.469,9.203-7.766 c3.109-5.172,6.312-14.422,9.625-27.75l33.406-135.125c2.844-11.25,4.25-19.719,4.25-25.438c0-2.875-0.625-5.297-1.828-7.281 c-1.234-1.969-3.094-3.5-5.594-4.531c-2.516-1.062-7.391-1.578-14.672-1.578l1.719-6.109H320l-1.562,6.109 c-6.031-0.109-10.516,0.672-13.453,2.312c-4.234,2.203-7.484,5.344-9.688,9.422c-2.234,4.062-5.078,13.094-8.578,27.094 l-33.266,135.125c-3.016,12.438-4.531,20.375-4.531,23.781c0,2.75,0.578,5.094,1.766,7.031c1.188,1.922,3.078,3.406,5.656,4.453 C258.938,360.375,264.359,361.234,272.562,361.891z"></path> </g></svg>',
// OR use the class getName() method.
new (\Ehyiah\QuillJsBundle\DTO\Fields\InlineField\BoldField())->getName() => '<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512" xml:space="preserve" fill="#000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path style="fill:#2488FF;" d="M478.609,300.522v-33.39h-33.391v-66.784h33.391l0,0l0,0V66.783h-33.391v-33.39h-33.391V0H0v100.174 h33.39v311.652H0V512h445.217v-33.39h33.391v-0.001l0,0v-33.391l0,0l0,0H512V300.522H478.609z M345.043,378.435H166.957v-44.522 h178.087V378.435z M345.043,155.826H166.957v-33.391h178.087V155.826z"></path> <polygon style="fill:#005ECE;" points="478.609,300.522 478.609,267.132 445.217,267.132 445.217,200.348 478.609,200.348 478.609,200.348 478.609,200.348 478.609,66.783 445.217,66.783 445.217,33.392 411.826,33.392 411.826,0 256,0 256,122.435 345.043,122.435 345.043,155.826 256,155.826 256,333.913 345.043,333.913 345.043,378.435 256,378.435 256,512 445.217,512 445.217,478.61 478.609,478.61 478.609,478.609 478.609,478.609 478.609,445.217 478.609,445.217 478.609,445.217 512,445.217 512,300.522 "></polygon> <rect x="33.391" y="100.174" width="33.391" height="311.652"></rect> <polygon points="33.391,411.826 0,411.826 0,512 445.217,512 445.217,478.609 33.391,478.609 "></polygon> <polygon points="411.826,33.391 411.826,0 0,0 0,100.174 33.391,100.174 33.391,33.391 "></polygon> <rect x="411.826" y="33.391" width="33.391" height="33.391"></rect> <rect x="445.217" y="66.783" width="33.391" height="133.565"></rect> <rect x="478.609" y="300.522" width="33.391" height="144.696"></rect> <rect x="445.217" y="445.217" width="33.391" height="33.391"></rect> <polygon points="378.435,189.217 378.435,122.435 345.043,122.435 345.043,155.826 166.957,155.826 166.957,122.435 345.043,122.435 345.043,89.043 133.565,89.043 133.565,189.217 "></polygon> <polygon points="345.043,378.435 166.957,378.435 166.957,333.913 345.043,333.913 345.043,300.522 133.565,300.522 133.565,411.826 378.435,411.826 378.435,333.913 345.043,333.913 "></polygon> <polygon points="411.826,233.739 378.435,233.739 378.435,267.13 445.217,267.13 445.217,200.348 411.826,200.348 "></polygon> <rect x="445.217" y="267.13" width="33.391" height="33.391"></rect> </g></svg>',
new (\Ehyiah\QuillJsBundle\DTO\Fields\InlineField\ItalicField())->getName() => '<svg fill="#000000" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M256,0C114.609,0,0,114.609,0,256s114.609,256,256,256s256-114.609,256-256S397.391,0,256,0z M256,472 c-119.297,0-216-96.703-216-216S136.703,40,256,40s216,96.703,216,216S375.297,472,256,472z"></path> <path d="M272.562,361.891L271.016,368H192l1.984-6.109c7.922-0.219,13.172-1,15.719-2.312c4.141-1.875,7.219-4.469,9.203-7.766 c3.109-5.172,6.312-14.422,9.625-27.75l33.406-135.125c2.844-11.25,4.25-19.719,4.25-25.438c0-2.875-0.625-5.297-1.828-7.281 c-1.234-1.969-3.094-3.5-5.594-4.531c-2.516-1.062-7.391-1.578-14.672-1.578l1.719-6.109H320l-1.562,6.109 c-6.031-0.109-10.516,0.672-13.453,2.312c-4.234,2.203-7.484,5.344-9.688,9.422c-2.234,4.062-5.078,13.094-8.578,27.094 l-33.266,135.125c-3.016,12.438-4.531,20.375-4.531,23.781c0,2.75,0.578,5.094,1.766,7.031c1.188,1.922,3.078,3.406,5.656,4.453 C258.938,360.375,264.359,361.234,272.562,361.891z"></path> </g></svg>',
]
],
file php
use Ehyiah\QuillJsBundle\Form\QuillType;
public function buildForm(FormBuilderInterface $builder, array $options)
{
$builder
// ...
->add('myField', QuillType::class, [
'attr' => [
'data-controller' => 'quill-extended',
]
// ...
;
}