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

Le bundle à l'air intéressant, merci pour le partage

De rien, 

j'ai rajouté la gestion des plugins.

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

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

Je suis actuellement sur la sauvegarde automatique, à suivre

Ajout de la sauvegarde automatique (appel automatique d'une route toutes les x secondes avec le contenu entré dans l'éditeur).

Super, merci pour le partage et le boulot fourni!

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.

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? :/

Bonjour, 

quel soucis rencontres-tu ?

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

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

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

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

Bonjour, 

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

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

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"

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.

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

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

Tu as vidé ton cache et retenté ?

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.

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.

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

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.

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.

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. 

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à !

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 !

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 !

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