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
Stocker mes image en BDD avec TinyMce
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.