Partage
  • Partager sur Facebook
  • Partager sur Twitter

[Bundle Symfony 3] Editeur de texte WYSIWYG Froala

    Staff 8 novembre 2014 à 22:35:05

    Hello, je vous présente mon bundle pour Symfony 2/3, à savoir l'intégration d'un éditeur de texte : Froala.

    En savoir plus sur le projet

    Genèse

    J'ai d'abord utilisé des intégrations de TinyMCE et CKEditor, mais je n'ai jamais réussi à faire parfaitement ce que je voulais, notamment pour l'intégration d'un browser de fichiers pour intégrer des images (ou il fallait utiliser un autre bundle par exemple ElFinder). Je suis tombé par hasard sur Froala, et je l'ai trouvé parfait donc j'ai décidé d'en profiter pour créer un bundle dispo pour la communauté.

    Généralités et avancement

    Toutes les fonctionnalités de Froala sont supportées dans sa dernière version, ainsi que l'upload d'images et de fichiers. Le bundle est compatible Symfony 2 et 3.

    Le projet et son originalité

    Rien d'original, juste une alternative à CKEditor et TinyMCE, avec un éditeur qui est, je trouve, plus simple d'utilisation.

    Liens

    Github : https://github.com/froala/KMSFroalaEditorBundle

    KNP Bundle : http://knpbundles.com/froala/KMSFroalaEditorBundle

    Packagist : https://packagist.org/packages/kms/froala-editor-bundle

    -
    Edité par SamarHxC 22 novembre 2016 à 15:18:58

    • Partager sur Facebook
    • Partager sur Twitter
    Anonyme
      8 novembre 2014 à 23:32:13

      Le bundle à l'air intéressant, merci pour le partage :)
      • Partager sur Facebook
      • Partager sur Twitter
        Staff 22 février 2015 à 5:20:09

        Bonsoir (ou bonjour selon !),

        le bundle permet maintenant de gérer l'upload des images sur son propre serveur, pas besoin de passer par un bundle tierce :)

        La version de l'éditeur a aussi été mise à jour.

        Au passage les développeurs de Froala ont fait passer le bundle comme release "officielle" sur Symfony :)

        -
        Edité par SamarHxC 22 février 2015 à 5:37:43

        • Partager sur Facebook
        • Partager sur Twitter
          Staff 12 mars 2015 à 22:30:28

          Ajout d'un "media manager" pour parcourir/supprimer ses images.

          Je suis actuellement sur la sauvegarde automatique, à suivre :)

          • Partager sur Facebook
          • Partager sur Twitter
            Staff 1 avril 2015 à 9:35:27

            Ajout de la sauvegarde automatique (appel automatique d'une route toutes les x secondes avec le contenu entré dans l'éditeur).
            • Partager sur Facebook
            • Partager sur Twitter
              14 avril 2015 à 10:25:17

              Super, merci pour le partage et le boulot fourni!

              • Partager sur Facebook
              • Partager sur Twitter
              Mon site de créa web: pixsweb.fr
                Staff 14 avril 2015 à 11:47:45

                De rien, j'ai mis à jour récemment avec le support de quelques options supplémentaires (il y en a plein alors j'implémente au fur et à mesure des demandes).

                J'ai aussi ajouté la gestion du numéro de licence pour ceux qui ont acheté l'éditeur.

                • Partager sur Facebook
                • Partager sur Twitter
                  2 mai 2015 à 15:03:28

                  Bonjour, j'ai téléchargé le bundle et je l'ai installé, cependant, je n'arrive pas à l'afficher, quelqu'un pourrait-il m'aider svp? :/

                  • Partager sur Facebook
                  • Partager sur Twitter
                    4 mai 2015 à 11:11:07

                    Déoslé pour le dérangement, mon soucis est réglé :/ En fait je l'avais défini comme service mais je n'arrivais pas à l'utiliser. Cela provenait du fait que je n'avais pas défini correctement celui-ci :)
                    • Partager sur Facebook
                    • Partager sur Twitter
                      3 juillet 2015 à 21:58:19

                      Hello,

                      j'ai suivi les instructions (1, 2, 3, 4, 6) d'installation/initialisation du bundle fournies sur la page: https://github.com/froala/KMSFroalaEditorBundle

                      pourtant l'editeur ne s'affiche pas dans mon formulaire d'edition...

                      desole je debute seulement en programmation avec symfony...

                      alors > ai-je oublie qqch d'evident?

                      je vois qu'Alois parle de configuration par service? > est-ce necessaire/obligatoire?

                      merci d'avance!

                      UPDATE:

                      en fouinant dans les pull requests, j'ai trouve qu'il fallait que l'inclusion de jQuery se fasse AVANT l'initialisation du form (et donc du formtype froala)...

                      assez etonnant que ca genere un tel clash sachant que dans la plupart des cours traitant de JS on nous conseille d'inclure les scripts en fin de page, mais bon...

                      nouveau probleme: le champ froala (le cadre) s'affiche mais les icones des boutons n'apparaissent pas > par contre on peut cliquer dessus et voir le contenu des dropdown 

                      > des idees?

                      UPDATE 2:

                      pour ceux que ca interesse (ayant eu le meme probleme d'affichage): le probleme a ete resolu en incluant FontAwesome <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css" /> directement/manuellement dans les stylesheets de la page.

                      -
                      Edité par Arnaud Lemaire 4 juillet 2015 à 11:34:55

                      • Partager sur Facebook
                      • Partager sur Twitter
                        Staff 21 juillet 2015 à 22:18:19

                        Oups désolé je n'avais pas vu ton message... Ceci a été corrigé il y a quelques temps comme tu as du le remarquer.

                        N'hésitez pas à ouvrir un ticket sur Github en cas de bug, les développeurs de Froala les lisent aussi et auraient répondu plus vite que moi ce coup là ;).

                        Au passage je viens de mettre à jour vers Froala 1.2.8.

                        -
                        Edité par SamarHxC 21 juillet 2015 à 23:42:45

                        • Partager sur Facebook
                        • Partager sur Twitter
                          5 septembre 2015 à 18:42:04

                          Bonjour, 

                          Je suis entrain de développer sous Symfony 2.7 et j'ai trouver votre bundle super intéressant, je l'ai donc installer via la doc de github.

                          Et en respectant tout, mon formulaire reste inchangé, j'ai bien rajouté comme demandé dans la doc le "froala".

                          ->add("contenu", "froala")

                          Je n'ai pas ouvert de ticket sur github car je ne parle pas du tout anglais :/

                          En espérant que quelqu'un puisse m'aider.

                          Cordialement,

                          EDIT :

                          Quand j'insère la config complète dans config.yml, j'ai cette erreur :

                          Unable to parse at line 101 (near "inlineMode") in 

                          -
                          Edité par Oo-Nexus-oO 5 septembre 2015 à 18:48:23

                          • Partager sur Facebook
                          • Partager sur Twitter
                            Staff 5 septembre 2015 à 21:02:02

                            Bonjour, 

                            tu peux me copier/coller ce que tu as mis comme configuration dans ton fichier config.yml ?

                            • Partager sur Facebook
                            • Partager sur Twitter
                              5 septembre 2015 à 21:28:00

                              kms_froala_editor:
                                  ################
                                  # Main config. #
                                  ################
                              
                                  # The Froala editor path.
                                  # Default: the editor version included in the bundle.
                                  basePath: "/yourCustomFroalaEditorPath/"
                              
                                  # The Froala license key for commercial uses.
                                  serialNumber: "yourKey"
                              
                                  # The editor language.
                                  # Default: "en_us".
                                  # More : see Resources/public/js/langs for all languages.
                                  language: "nl"
                              
                                  #########################################################
                                  # Editor options.
                                  # See https://editor.froala.com/options for more infos.
                                  # Currently implemented are listed below:
                                  #########################################################
                              
                                  inlineMode
                                  minHeight
                                  maxHeight
                                  width
                                  height
                                  plainPaste
                                  tabSpaces
                                  multiLine
                                  paragraphy
                                  placeholder
                                  theme
                                  unlinkButton
                                  beautifyCode
                                  buttons
                                  convertMailAddresses
                              
                                  # JQuery inclusion.
                                  # Default: true.
                                  includeJQuery: false
                              
                                  # Font Awesome inclusion.
                                  # Default: true.
                                  includeFontAwesome: false

                               J'ai laissé par default.

                              -
                              Edité par Oo-Nexus-oO 5 septembre 2015 à 21:28:56

                              • Partager sur Facebook
                              • Partager sur Twitter
                                Staff 5 septembre 2015 à 21:31:44

                                Ah, c'est que tu ne parles vraiment pas du tout anglais en effet :)

                                Tu peux tout virer et garder seulement : 

                                kms_froala_editor:
                                    language: "fr"
                                • Partager sur Facebook
                                • Partager sur Twitter
                                  5 septembre 2015 à 21:35:47

                                  J'ai fais les modifications, mais les textarea ne changent pas.

                                  Quand je rajoute 

                                  ->add("contenu", "froala")

                                  Est ce que des balises doivent s'ajouté car même quand je rajoute le froala rien ne change dans le code source de mon textarea.

                                  • Partager sur Facebook
                                  • Partager sur Twitter
                                    5 septembre 2015 à 21:39:22

                                    Ah je n'avais pas assez descendu dans le code source du navigateur.

                                    Je viens de voir qu'il y a plein de script de lancer juste après mon textarea, dont jQuery, sachant que celui ci est déjà activé par default dans mon layout.

                                    À mon avis, ça doit être un problème au niveau de l'insertion du JS.

                                    Pas possible de placer ce JS qui se génère tout seul en bas de page comme mes autres JS ?

                                    En effet quand je supprime mon jQuery ça fonctionne. Après je sais pas si c'est comme ça que ça doit fonctionner.

                                    Obliger de sélectionner le texte pour le mettre en forme.

                                    -
                                    Edité par Oo-Nexus-oO 5 septembre 2015 à 21:45:12

                                    • Partager sur Facebook
                                    • Partager sur Twitter
                                      Staff 5 septembre 2015 à 21:46:48

                                      Tu n'as pas une erreur Symfony ou dans ta console développeur ?

                                      Tu as vidé ton cache et retenté ?

                                      • Partager sur Facebook
                                      • Partager sur Twitter
                                        5 septembre 2015 à 21:54:09

                                        Oui j'ai vidé mon cache et non pas d'erreur.

                                        Je sais pas vu mon post avant j'ai édité.

                                        Tout fonctionne maintenant mais en faite c'est un problème au niveau du JS il m'incorpore tout juste après le textarea or j'aimerai bien qu'il me place le JS généré en bas de mon code.

                                        De plus Froala réinsère jQuery ce qui me gène car il est déjà insérer en bas de page.

                                        • Partager sur Facebook
                                        • Partager sur Twitter
                                          Staff 5 septembre 2015 à 22:00:59

                                          Dans ce cas rajoute ça dans ta config :

                                          includeJQuery: false


                                          Le bundle n'inclura plus JQuery. Tu peux faire pareil avec Font Awesome si tu l'as déjà inclus. Je te conseille vivement d'apprendre un minimum l'anglais car tout ça est dans la doc, tu risques de rencontrer pas mal de soucis par la suite.

                                          Pour le reste du JavaScript je peux difficilement l'inclure ailleurs, normalement ça ne gène en rien le fonctionnement de l'éditeur.

                                          • Partager sur Facebook
                                          • Partager sur Twitter
                                            5 septembre 2015 à 22:07:10

                                            Oui tout ça j'ai déjà fais, j'ai compris un minimum la doc.

                                            Le problème c'est que includeJQuery: false (je l'ai déjà mis dans ma config ainsi que Font Awesome)

                                            Du coup le JS généré est toujours après mon textarea alors que jQuery s'initialise en bas de page (après le js de froala).

                                            Mais bon là n'est pas le problème j'initialise jQuery en haut de page avec mes css et c'est bon mais au niveau du thème ça m'étonnerai que ça donne ça en rendu. Je vais me débrouiller merci pour ton aide.

                                            -
                                            Edité par Oo-Nexus-oO 5 septembre 2015 à 22:09:45

                                            • Partager sur Facebook
                                            • Partager sur Twitter
                                              Staff 5 septembre 2015 à 22:16:29

                                              Ah oui en effet, quelqu'un a déjà remonté ça sur GitHub.

                                              Froala prépare une version 2, je ferai une grosse update le mois prochain je regarderai ça de plus près, en attendant il faut inclure JQuery dans ton header.

                                              • Partager sur Facebook
                                              • Partager sur Twitter
                                                5 septembre 2015 à 22:22:23

                                                Oui du coup c'est ce que j'ai fais.

                                                Merci pour ton aide et bonne continuation pour ce gros projet ;)

                                                J'ai juste un problème avec le B (strong) maintenant :/ il reste activé et ne fonctionne pas.

                                                Quand je passe ma souris dans le textarea le "B" passe en hover tout bleu et quand je le désactive il redevient bien noir et dès que je réécris il repasse bleu :/ Mais pas de strong dans le code généré. Bizarre, je vais regarder c'est pas trop grave.

                                                Merci encore.

                                                • Partager sur Facebook
                                                • Partager sur Twitter
                                                  9 septembre 2015 à 12:38:23

                                                  Hello,

                                                  Je débute sur Symfony 2.7, je trouve le bundle excellent.

                                                  J'ai réussi à l'installer et à le mettre en place sans trop de problèmes.

                                                  Alors je pose cette question sans certitude mais il y aurait-il un moyen de limiter le nombre d'image que l'on peut y inclure assez simplement ?

                                                  Je m'explique : je veux empêcher la possibilité lors du remplissage de formulaire que l'utilisateur puisse mettre trop d'images.
                                                  Car certes on peut limiter la quantité d'élément du html mais une image vaut autant que n'importe quelle caractère/lettre.
                                                  Etant donné mon niveau limité je pose la question ici. 

                                                  • Partager sur Facebook
                                                  • Partager sur Twitter
                                                    Staff 9 septembre 2015 à 14:16:04

                                                    Salut, merci pour ce retour !

                                                    Assez simplement non, de ton côté ça me semble difficile. Par contre moi je peux ajouter une option et tester le nombre d'images insérées avant d'ouvrir la popup d'insertion d'image.

                                                    Je note l'idée dans un coin, je ne te cache pas que ça ne va pas être dans mes priorités du moment, cependant Froala prépare la version 2 qui ne devrait plus tarder à arriver, je vais refaire pas mal de choses donc si j'ai la motivation j'ajouterai ça à ce moment là !

                                                    • Partager sur Facebook
                                                    • Partager sur Twitter
                                                      10 septembre 2015 à 9:20:54

                                                      Salut,

                                                      merci pour la réponse.
                                                      Pour ce qui est de mon problème je l'ai détourné de manière pas très propre en rajoutant une règle de validation qui compte directement les balises "<img" dans l'html.

                                                      Néanmoins je reste très satisfait de ce bundle.
                                                      Et vu l'utilité de celui-ci et votre travail sur ce projet, je suivrai de près son développement.

                                                      Puis même si ce n'est pas une priorité, je laisse l'idée de rajouter des règles pas forcément que pour les images mais pour l'ensemble ce serait une bonne amélioration.

                                                      Encore merci pour votre excellent travail et bonne continuation !

                                                      • Partager sur Facebook
                                                      • Partager sur Twitter
                                                        Staff 10 septembre 2015 à 9:29:27

                                                        Merci :)

                                                        Je faisais ça juste pour mon utilisation personnelle au début mais le bundle fait son petit bout de chemin, il comment a y avoir pas mal d'utilisateurs et les retours sont assez positifs donc ça me motive pour l'améliorer !

                                                        • Partager sur Facebook
                                                        • Partager sur Twitter
                                                          11 octobre 2015 à 14:57:33

                                                          Salut, bravo pour ce superbe bundle.

                                                          Cependant j'ai quelques soucis.

                                                          Lorsque j'affiche mon formulaire le cadre ne s'affiche pas :



                                                          Par contre si j'écris du texte et que je surligne, là il s'affiche ...



                                                          Est-ce que c'est censé marcher comme ça, ou est-ce qu'il y a bien un cadre autour du textarea ?

                                                          Et aussi j'ai un gros problème de lenteur, par exemple quand je tape du texte trop vite, il ne retient pas tous les caractère que j'ai tapé. Lorsque j'appuie sur "suppr" il m’efface deux caractères.

                                                          Merci :)

                                                          -
                                                          Edité par DreaminMonkey 11 octobre 2015 à 15:49:49

                                                          • Partager sur Facebook
                                                          • Partager sur Twitter

                                                          [Bundle Symfony 3] Editeur de texte WYSIWYG Froala

                                                          × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
                                                          × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
                                                          • Editeur
                                                          • Markdown