je souhaite intégrer un éditeur de texte de type "wysiwyg" dans mon ArticleCrudController. J'ai déjà implémenté cet éditeur de texte sur d'autres projets sans utiliser EasyAdmin. Cependant, cette fois-ci, je dois le faire via EasyAdmin. Comment puis-je procéder pour mettre cela en place ?
Voici ce que j'utilisais afin de mettre en place TinyMCE sans passer par EasyAdmin 4 : J'avais aussi ça dans mon From
->add('contenu', HiddenType::class,
C'est assez classique mais comment le mettre en place dans EasyAdmin 4 ? J'ai fouillé jusqu'au Vendor et essayer plusieurs tentatives mais ce fut un échec auriez-vous une idée ? Le but est d'avoir un éditeur de texte ou je puisse y ajouter des images voilà...
D'accord, je vais faire cela : Le code que j'utilisais pour intégrer TinyMCE dans mes projets sans EasyAdmin.
{% block javascripts %}
<script src="/bundles/tinymce/ext/tinymce/tinymce.min.js"></script>
<script>
tinymce.init({
selector: '.tinymce',
plugins: 'image filemanager 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) {
// Insérez l'image dans l'éditeur lors de l'initialisation
editor.on('init', function () {
editor.insertContent('<img src="/img/gtitop.png" alt="Votre image" style="max-width: 100%;">');
});
// 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 %}
Et pour le Form c'était ça :
->add('contenu', HiddenType::class,
Mais j'ai du mal à l'implémenter dans EasyAdmin. Je vous en prie, je ne trouve pas de ressources concrètes sur internet pour le faire. Si vous connaissez un autre éditeur aussi sympa que TinyMCE (qui offre beaucoup de fonctionnalités gratuites), par exemple avec la possibilité d'exporter en PDF et d'ajouter des photos, je suis preneur. Si vous avez d'autres suggestions qui soient plus simples à configurer, je suis également intéressé. J'ai un ArticleCrudController (c'est le CRUD que j'ai mis en place avec EasyAdmin)...
<?php
namespace App\Controller\Admin;
use App\Entity\Article;
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 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),
];
}
}
<?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/article/contenu.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),
];
}
}
// admin/article/contenu.html.twig
{# @var ea \EasyCorp\Bundle\EasyAdminBundle\Context\AdminContext #}
{% block _Article_contenu_widget %}
{% dump(form) %}
{# ton code js ici, a adapter probablement #}
{% endblock _Article_contenu_widget %}
En faisant comme ceci tu peux surcharger ton form widget pour ton field "contenu"
{# @var ea \EasyCorp\Bundle\EasyAdminBundle\Context\AdminContext #}
{% block _Article_contenu_widget %}
{% dump(form) %}
{# ton code js ici, a adapter probablement #}
{% endblock _Article_contenu_widget %}
Tu as mis le code ci dessus dans quelle template ? templates/..?
Le chemin devrait être /admin/contenu.html.twig et dans ton controller ça devrait être
public function configureCrud(Crud $crud): Crud
{
return $crud
->setFormThemes(['@EasyAdmin/crud/form_theme.html.twig', 'admin/contenu.html.twig']); // On ajoute un thème pour le formulaire
}
- Edité par Warps73 27 février 2024 à 16:48:46
While(true)
TinyMCE dans EasyAdmin 4, Complexe...
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
While(true)
While(true)