Bundle Wysiwyg FOSCKEditorBundle

Version imprimable

21/03/2024, 13h58
d3LTa7

Bundle Wysiwyg FOSCKEditorBundle
Salut !
J'essaye de mettre en place un buddle de WYSIWYG : FOSCKEditor
J'ai suivi la doc (https://symfony.com/bundles/FOSCKEdi...ent/index.html) mais il n'apparait pas 😦
Voici ce que j'ai fait
1 -

Code:

composer require friendsofsymfony/ckeditor-bundle

2 - Vérification dans le fichier bundles.php de la ligne

Code:

FOS\CKEditorBundle\FOSCKEditorBundle::class => ['all' => true],

3 -

Code:

php bin/console ckeditor:install

4 -

Code:

php bin/console assets:install

public car j'utilise une version flex de SF
5 - dans le fichier twig.yaml :
Code:

1 2 3 twig: form_themes: - '@FOSCKEditor/Form/ckeditor_widget.html.twig'
(Je crois que cette partie est optionnelle)

6 - j'ai ensuite mis dans un form ceci :
Code:

1 2 3 4 ->add('description', CKEditorType::class, [ //... ])
Mais j'ai pas d'outil de texte qui apparaissent 😦
Est ce que j'ai oublié quelques chose quelque part selon vous ?
Merci :)
21/03/2024, 16h00
merou19

Bonjour,
Quelle version de CKEditor installes tu ?
CKEditor est devenu payant à partir de v4.23.*, message "the license key is missing or invalid." dans la console de Firefox.
J'utilise donc la v4.22.1, et ça marche nickel !
Infos ici : https://ckeditor.com/docs/ckeditor4/...ts-license-key
21/03/2024, 16h17
d3LTa7

Merci pour ta réponse rapide :)
Alors par contre je ne sais pas comment voir la version du bundle ! J'ai juste suivi bêtement un tuto pour l'installer !
En faite je suis encore novice dans Symfony :)
J'ai trouvé sur le net une version 4.22.1 en zip mais là aussi je ne sais pas trop comment on l’inclus ds le projet :/
21/03/2024, 17h01
merou19

Ok, pour préciser la version, ajouter un paramètre à la ligne d'installation :

Code:

php bin/console ckeditor:install --tag=4.22.1

Par contre, pour voir la version installée, je ne sais plus, désolé, là je n'ai pas mon projet sous la main...

Bon code à toi !
22/03/2024, 09h05
d3LTa7
J'ai donc réinstaller comme tu m'as dit ! Alors après, vu qu'il était déjà installé, quand j'ai tapé la ligne de code il m'a fait une proposition dans le terminal :
Code:

1 2 3 [drop] Drop the directory & reinstall CKEditor [keep] Keep the directory & reinstall CKEditor by overriding files [skip]Skip the installation
J'ai choisi "drop"

J'ai aussi réinstallé les asset

Mais aucun changement :(
22/03/2024, 09h50
merou19

Ok pour le drop à la nouvelle install, ça devrait être ok.

Tu peux nous montrer le code complet de ton champ dans ton formtype stp ?

Tu utilises Firefox ? As tu un message dans la console ?

Est ce que tu utilises Webpack Encore ? Dans ce cas, il faudrait republier les assets, commande qui marche chez moi :

Code:

yarn encore dev

Ha oui, et aussi pour mes tests, je vide souvent le cache de Symfony et du navigateur, je me suis déjà fait avoir...

Alors effectivement j'ai un message d'erreur dans ma console de Firefox :

Code:

Uncaught ReferenceError: CKEDITOR is not defined

En ce qui concerne le FormType :

Code:

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
37
38
39
40
41
42
43
44
<?php
namespace App\Form;
use App\Entity\Recipe;
use FOS\CKEditorBundle\Form\Type\CKEditorType;
use Symfony\Component\Validator\Constraints as Assert;
use Symfony\Component\Form\FormBuilderInterface;
use Symfony\Component\Form\Extension\Core\Type\SubmitType;
use Symfony\Component\Form\AbstractType;
use Symfony\Component\OptionsResolver\OptionsResolver;
class RecipeType extends AbstractType
{
    public function buildForm(FormBuilderInterface $builder, array $options): void
    {
        $builder
           /...
            ->add('description', CKEditorType::class, [
                'config' => [
                    'uiColor' => '#ffffff'
                ],
                'attr' => [
                    'class' => 'form-control',                    
                ],
                'label' => 'Description',
                'label_attr' => [
                    'class' => 'form-label mt-4'
                ],
                'constraints' => [                    
                    new Assert\NotBlank()                    
                ]
            ])
            ->add('submit', SubmitType::class, 
            [
                'attr' => [
                    'class' => 'btn btn-primary mt-4',
                ]
            ]);
     }
    public function configureOptions(OptionsResolver $resolver): void
    {
        $resolver->setDefaults([
            'data_class' => Recipe::class,
        ]);
    }
}

Et sinon je n'utilise pas (encore) webpack

22/03/2024, 11h50
merou19

Ho ho, ton code ici me semble correct !

Sur ton site, est ce que tu charges bien Jquery ? As tu du code JS ailleurs qui s'exécute bien ?

Un test à faire, ajouter à ta page le lien direct du JS de CKEditor :

Code:

<script src="https://cdn.ckeditor.com/4.22.1/standard/ckeditor.js"></script>

Qu'est ce que ça donne ?
22/03/2024, 12h18
d3LTa7

Ha oui avec ce petit script ça marche beaucoup mieux !!!

merci pour ton aide magique :)
22/03/2024, 12h28
merou19

Super :-) un sujet résolu, content d'avoir pu aider !
22/03/2024, 12h37
Pytet

Après avoir installé une autre version de l'éditeur (4.22.1), tu peux relancer la commande php bin/console assets:install public pour déployer les assets du bundle au lieu d'ajouter une balise script.