How to render a textarea in wysiwyg editor with symfony 6 and tinymce?

665 Views Asked by At

I want render a textarea to editor with symfony + tinymce. This will take image, texts,styles etc.I have already performed the configuration but i accross a problem to get the url and persist image to the db.

User can add many images.For instance after submitting the form. The result could be :

Title Image Paragraph Image Paragraph Image Paragraph

this my configuration :

This is my form type :

public function buildForm(FormBuilderInterface $builder, array $options): void
    {
        $builder->add('description', TextAreaType::class)
        ;
   }

and my form :

{{ form_start(formPortrait , {'attr':{'id':'articleForm'}}) }}
   <div class="form-group">

        {{ form_row(form.description)}}
    </div>

    <button href="#" type="submit" class="button red">
        Submit
    </button>
{{ form_end(formPortrait) }}

The tinymce configuration :

<script type="text/javascript" src="https://cdn.tiny.cloud/1/000e98r5ejnk39y3tkknc2y0b8qh895bn5qv1jrc6a5v3ceu/tinymce/5/tinymce.min.js"></script>
    <script>
        // Initialisation de TinyMCE
      
        tinymce.init({
            selector: '#portrait_form_description',
            language: 'fr',
            plugins: 'image',
            toolbar: 'undo redo | link image',
            /* enable title field in the Image dialog*/
            image_title: true,
            /* enable automatic uploads of images represented by blob or data URIs*/
            automatic_uploads: true,
            valid_elements : '+*[*]',

            images_upload_url: url ,
            
            file_picker_types: 'image',
            /* and here's our custom image picker*/
            file_picker_callback: function (cb, value, meta) {
                var input = document.createElement('input');
                input.setAttribute('type', 'file');
                input.setAttribute('accept', 'image/*');

                /*
                Note: In modern browsers input[type="file"] is functional without
                even adding it to the DOM, but that might not be the case in some older
                or quirky browsers like IE, so you might want to add it to the DOM
                just in case, and visually hide it. And do not forget do remove it
                once you do not need it anymore.
                */

                input.onchange = function () {
                var file = this.files[0];

                var reader = new FileReader();
                reader.onload = function () {
                    /*
                    Note: Now we need to register the blob in TinyMCEs image blob
                    registry. In the next release this part hopefully won't be
                    necessary, as we are looking to handle it internally.
                    */
                    var id = 'blobid' + (new Date()).getTime();
                    var blobCache =  tinymce.activeEditor.editorUpload.blobCache;
                    var base64 = reader.result.split(',')[1];
                    var blobInfo = blobCache.create(id, file, base64);
                    blobCache.add(blobInfo);

                    /* call the callback and populate the Title field with the file name */
                    cb(blobInfo.blobUri(), { title: file.name });
                };
                reader.readAsDataURL(file);
                };

                input.click();
            },
            content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'
            });

    </script>

my action:

    #[Route('/admin/portraits', name: 'app_admin_portraits')]
    public function portraits(Request $request): Response
    {
        $portrait = new Portrait();
        $form = $this->createForm(PortraitFormType::class, $portrait);
       if($request->isXmlHttpRequest()){
          
            $form->handleRequest($request);
            if ($form->isSubmitted() && $form->isValid()) {
                $imagePortrait = $form->get('imageportrait')->getData();
                if($imagePortrait){
                    $portrait->setLogoimage($imagePortrait);
                    $this->uploadHandler->upload($portrait, 'artilceimage');
                    $portrait->setLogo($portrait->getLogoimage()->getFileName());

                }
                $this->uploadImageAjax($request);
                $this->em->persist($portrait);
                $this->em->flush();
                $this->addFlash('success', "Portrait enregistré avec succéss");
                $message = "Portrait enregistré avec succès";
                return new JsonResponse(['success' => true, 'message' => $message]);
            } else {
                // If form validation fails, retrieve the form errors
                $errors = $this->getFormErrors($form);
                dd($errors);
                return new JsonResponse(['success' => false, 'errors' => $errors], 400);
            
            }
       }

        $portraits = $this->paginator->paginate($this->portraitRepository->findAll(), 1, 10);
        
        return $this->render('admin/portraits.html.twig', [
            'formPortrait' => $form->createView(),
            'portraits' => $portraits,
        ]);
    }
0

There are 0 best solutions below