CKeditor5 et Symfony 7.1 incompatibles ?
Bonjour à tous,
J'ai tout le mal du monde à faire fonctionner CKEditor5 sous Symfony 7.1 :
Le contrôle s'affiche soit en mode colonne avec un champ de saisie quasi inexistant placé sur le côté (inexploitable) au lieu d'en dessous de la barre d'outils, soit on ne voit rien d'autre qu'un grand trait vertical comme une simple ligne au milieu de mon form ... (vraisemblablement des erreurs css dans le fichier ckeditor5 fournit)
D'autre part on dirait que ce n'est pas compatible avec un champ dépendant de la bdd :
Voici ce que j'ai fait :
J'ai mis mon champ textarea de cette façon dans mon formType :
->add('description', HiddenType::class)
Dans le Twig :
<div id="editor">
{{ form_row(form.description|raw) }}
</div> Enfin dans le JS :
import {
ClassicEditor,
Essentials,
Bold,
Italic,
Font,
Paragraph,
} from "../../ckeditor5/ckeditor5.js";
import '../../ckeditor5/ckeditor5.css';
ClassicEditor.create(document.querySelector("#editor"), {
plugins: [Essentials, Bold, Italic, Font, Paragraph],
toolbar: {
items: [
"undo",
"redo",
"|",
"bold",
"italic",
"|",
"fontSize",
"fontFamily",
"fontColor",
"fontBackgroundColor",
],
},
})
.then((editor) => {
editor.sourceElement.parentElement.addEventListener("submit", function (e) {
e.preventDefault();
this.querySelector("#editor + input").value = editor.getData();
this.submit();
});
})
.catch(/* ... */);
Je suppose qu'il faut s'y prendre autrement dans le js lorsqu'il s'agît d'un champ dépendant ? Je n'ai vu aucun tuto à ce sujet, seulement des tutos concernant des champs de saisie non dépendant, donc je ne connais pas la méthode pour récupérer et enregistrer tout le contenu du contrôle mise en forme dans la bdd...
Merci d'avance pour vos conseils avisés
4 réponses
Bon , j'ai avancé...
Plus de problèmes css, c'était un conflit entre mes styles css et ceux de CKeditor
J'arrive maintenant à voir mes données du champ"description" venant de la bdd dans la div ckeditor, le formatage marche aussi cependant :
Les données ne sont pas sauvegardées et remplacées systématiquement par "Description" si je vide le champ et "description" qui est le label du champ apparaît en première place si il y avait du texte provenant de la base... késako ?
J'ai essayé en rajoutant "initialData="" " dans le js, marche pas car cela efface tout le contenu que pourrait contenir la div...
Dans le formType j'ai rajouté "required"=>false et "mapped"=>true
J'ai modifié le js pour que le champ soit updaté avant sousmission mais cela n'enregistre pas le champ pour autant (le reste des champs lui est updaté en bdd donc ce n'est pas un problème de form):
.then((editor) => {
editor.sourceElement.parentElement.addEventListener("submit", function (e) {
e.preventDefault();
editor.updateSourceElement();
console.log(editor.getData());
this.submit();
});
})
.catch((error) => {
console.error(error);
});Bon , de ce que j'ai appris depuis la dernière fois en mode Classic.editor il n'y a pas besoin de créer de code js dans le .then contrairement à ce que j'avais fait dans mon dernier post.
D'après le manuel de référence de CKEditor5 il suffirait de mettre en "TextArea" (TextAreaType::class) pour que le champ se gère tout seul (affichage + enregistrement)
J'ai donc mis "{{form_row(form.description)}}" dans le twig et annulé le code JS dans le .then et j'ai toujours le même symptôme :
Dans le champ [description] qui contient du texte (longtext) venant de la base, celui-ci est systématiquement précédé ou remplacé par le mot "Description" qui est le label du champ, il est donc injecté de facto on ne sait pas pourquoi...
Si j'édite les données venant de la base, le champ se vide et au rafraîchissement de la page tout le texte a disparu excépté le mot "Description", vraiment bizarre...
J'ai trouvé la solution... (sous Symfony 7.1):
Pour les champs dépendants de la bdd il faut utiliser TextareaType et préciser une classe dans les attributs , on peut laisser form_row dans Twig et il faut ensuite changer le js en ajoutant la méthode "updateSourceElement()" dans le then avant le submit() final ...