Bonjour,

J'ai mis en place TinyMCE sur mon projet via EasyAdmin et son CRUD. Tout fonctionne bien, mais lorsque j'ajoute des photos, elles sont enregistrées en base64/blob. Comment puis-je faire pour qu'elles soient enregistrées en tant qu'images (PNG ou JPEG) dans un dossier ? Existe-t-il un moyen de le faire ? J'ai vu FileManager sur internet, mais je ne sais pas si c'est une bonne idée. Voici mon code actuellement :

{% extends '@EasyAdmin/crud/form_theme.html.twig' %}

{% block ea_text_editor_widget %}

    <textarea id="{{ id }}" name="Article[contenu]"class="trix-content tinymce" role="textbox">{{ data }}</textarea>

    <script src="{{ asset('assets/bundles/tinymce/ext/tinymce/tinymce.min.js') }}"></script>

    <script src="{{ asset('bundles/tinymce/ext/tinymce-webcomponent.js') }}" type="module"></script>

    <script>
    tinymce.init({
        selector: '.tinymce',
        plugins: 'image file-manager link', // Ajoutez le plugin 'link' à la liste des plugins activés
        
        toolbar: 'undo redo | formatselect | bold italic underline | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | image | filemanager | link | exportpdf', // Ajoutez le bouton 'link' à la barre d'outils

        file_picker_callback: function(cb, value, meta) {
            const input = document.createElement('input');
            input.setAttribute('type', 'file');
            // Event listeners
            input.addEventListener('change', (e) => {
                const file = e.target.files[0];

                const reader = new FileReader();
                reader.addEventListener('load', () => {
                    // Handle data processing with a blob
                    const id = 'blobid' + (new Date()).getTime();
                    const blobCache = tinymce.activeEditor.editorUpload.blobCache;
                    const base64 = reader.result.split(',')[1];
                    const blobInfo = blobCache.create(id, file, base64);
                    blobCache.add(blobInfo);
                    cb(blobInfo.blobUri(), { title: file.name });
                });
                reader.readAsDataURL(file);
            });
            input.click();
        },
        images_reuse_filename: true,
        paste_data_images: true,

        // content_css: '/style.css',

        setup: function (editor) {

            // Ajoutez la fonction pour exporter en PDF avec html2pdf
            editor.ui.registry.addButton('exportpdf', {
                text: 'Exporter au format PDF',
                onAction: function () {
                    exportToPDF(editor.getContent());
                }
            });
        }
    });

    function exportToPDF(content) {
        var element = document.createElement('div');
        element.innerHTML = content;

        html2pdf(element, {
            margin: 10,
            filename: 'output.pdf',
            image: { type: 'jpeg', quality: 0.98 },
            html2canvas: { scale: 2 },
            jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' }
        });
    }
    </script>
{% endblock %}

<?php
 
namespace App\Controller\Admin;
 
use App\Entity\Article;
use EasyCorp\Bundle\EasyAdminBundle\Config\Crud;
use EasyCorp\Bundle\EasyAdminBundle\Controller\AbstractCrudController;
use EasyCorp\Bundle\EasyAdminBundle\Field\AssociationField;
use EasyCorp\Bundle\EasyAdminBundle\Field\TextEditorField;
use EasyCorp\Bundle\EasyAdminBundle\Field\TextField;
 
class ArticleCrudController extends AbstractCrudController
{
    public static function getEntityFqcn(): string
    {
        return Article::class;
    }

    public function configureCrud(Crud $crud): Crud
    {
        return $crud
            ->setFormThemes(['@EasyAdmin/crud/form_theme.html.twig', 'admin/articleForm.html.twig']); // On ajoute un thème pour le formulaire
    }
 
    public function configureFields(string $pageName): iterable
    {
        return [
            TextField::new('titre'),
            TextEditorField::new('contenu'),
            AssociationField::new('sousCategorie') // Champ pour sélectionner une sous-catégorie
                ->setLabel('Sous-catégorie')
                ->setRequired(true),
            // AssociationField::new('categorie') // Champ pour sélectionner une sous-catégorie
            //     ->setLabel('Catégorie')
            //     ->setRequired(true),
        ];
    }
}

Mon entité :

<?php

namespace App\Entity;

use App\Repository\ArticleRepository;
use Doctrine\DBAL\Types\Types;
use Doctrine\ORM\Mapping as ORM;

#[ORM\Entity(repositoryClass: ArticleRepository::class)]
class Article
{
    #[ORM\Id]
    #[ORM\GeneratedValue]
    #[ORM\Column]
    private ?int $id = null;

    #[ORM\Column(length: 255)]
    private ?string $titre = null;

    #[ORM\Column(type: Types::TEXT)]
    private ?string $contenu = null;

    #[ORM\ManyToOne(inversedBy: 'articles')]
    private ?SousCategorie $sousCategorie = null;

    #[ORM\ManyToOne(inversedBy: 'articles')]
    private ?Categorie $categorie = null;

    public function getId(): ?int
    {
        return $this->id;
    }

    public function getTitre(): ?string
    {
        return $this->titre;
    }

    public function setTitre(string $titre): static
    {
        $this->titre = $titre;

        return $this;
    }

    public function getContenu(): ?string
    {
        return $this->contenu;
    }

    public function setContenu(string $contenu): static
    {
        $this->contenu = $contenu;

        return $this;
    }

    public function getSousCategorie(): ?SousCategorie
    {
        return $this->sousCategorie;
    }

    public function setSousCategorie(?SousCategorie $sousCategorie): static
    {
        $this->sousCategorie = $sousCategorie;

        return $this;
    }

    public function getCategorie(): ?Categorie
    {
        return $this->categorie;
    }

    public function setCategorie(?Categorie $categorie): static
    {
        $this->categorie = $categorie;

        return $this;
    }
}

Merci d'avance, bon week-end !

-
Edité par Chacha52 3 mars 2024 à 12:45:37