Discussion :

[clickandgo]

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 :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

 ->add('description', HiddenType::class)

Dans le twig :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<div id="editor">
{{ form_row(form.description|raw) }}
</div>

Enfin dans le js :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
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épendants, 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

[Bisûnûrs]

As-tu essayé de mettre un TexteareaType au lieu d'un HiddenType ?

[Pytet]

Bonjour,

On ne sait pas comment tu as installé CKEditor.

L'éditeur peut être facilement installé en ajoutant une dépendance à friendsofsymfony/ckeditor-bundle via composer.
Il faut ensuite installer les assets pour que les ressources publiques (le css par exemple) fonctionne correctement, via npm ou yarn si tu utilises Webpack Encore ou via la commande php bin/console assets:install public si tu utilise le nouveau AssetMapper.
https://symfony.com/bundles/FOSCKEdi...tallation.html

Tu devrais alors pouvoir utiliser un CKEditorType dans ton formulaire pour afficher l'éditeur.
https://symfony.com/bundles/FOSCKEdi...ent/index.html

[clickandgo]

Bonjour à tous et merci d'avoir répondu

J'ai suivi un tuto et ai utilisé la version Zip en 5.43 ... et là ce fût la catastrophe... J'ai jamais eu de problèmes avec CKeditor 4 installé par composer...

Ils ont manifestement changé quelque chose dans leur zip car sur la version datant d'il y a 3 mois tout marchait nickel sur d'autres sites que j'ai mis en place...

A noter que j'ai fait référence au fichier css dans mon fichier styles.css en faisant un @import qui est bien pris en considération.

Je suppose qu'il va falloir que je bricole le css fournit ?

C'est d'autant plus bizarre que l'index.html fournit comme exemple lui marche aussi nickel et aucun défaut de formatage n'apparaît, c'est seulement quand je le mets dans un template que tout se barre ....

En attendant je vais essayer d'installer en bundle pour voir...

Sinon, pouvez vous m'indiquer comment fait on pour mettre en place sur un champ dépendant svp ?

Merci d'avance

[clickandgo]

As-tu essayé de mettre un TexteareaType au lieu d'un HiddenType ?

Merci d'avoir répondu

Oui, j'ai essayé les deux, aucune différence...

[Bisûnûrs]

Après je ne pense pas que ce soit lié à un souci de Symfony qui est un framework du côté langage serveur qui ne fait que générer du code HTML. Il faut voir le code HTML généré et en quoi il diffère de l'exemple donné par CKeditor, peut-être un id ou une classe HTML manquante, peut-être un code JS manquant.

[clickandgo]

Apparement et après test il n'y a pas moyen de l'installer en version 5 (43.0.0) depuis fosckbundle or il n'y a plus de support pour la version 4 depuis juin.

De toutes façons, en l'ayant installé sans bundle par l'intermédiaire d'un zip, j'ai bien compris le fonctionnement mais la partie css foire complètement et d'autre part je ne sais pas comment mettre en place l'enregistrement en bdd du contenu de champ formaté, il faut peut être spécifier une option dans le formType pour le relier à mon entité ?

Pour le css je devrais pouvoir y arriver avec de la persévérance car ce doit être mon css à moi qui interfère avec la feuille minifiée importée de ckeditor (pourtant ça devrait pas...)

[clickandgo]

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):

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
  .then((editor) => {
    editor.sourceElement.parentElement.addEventListener("submit", function (e) {
      e.preventDefault();
      editor.updateSourceElement();
      console.log(editor.getData());
      this.submit();
    });
  })
  .catch((error) => {
    console.error(error);
  });

[clickandgo]

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...

[clickandgo]

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 ...