[bug]Ckeditor : validation de formulaire via jquery, multiple instances de ckeditor en échec |
Bienvenue invité ( Connexion | Inscription )
[bug]Ckeditor : validation de formulaire via jquery, multiple instances de ckeditor en échec |
4 Oct 2013, 13:18
Message
#1
|
|
Ceinture marron OSC Groupe : Membres Messages : 1665 Inscrit : 3-June 09 Membre no 25501 |
Dans mon application, j'utilise cet éditeur.
J'ai constaté un bug. Si plusieurs instances de l'éditeur sont inclus dans le même formulaire, seul la première est sauvegardée lorsqu'on valide le formulaire en js. code mis en échec : Code <form id="article_create" action="" method="post"> <!-- reste du code --> </form> <a title="" id="button_submit" class="win-command white pull-right" href="#"> <span class="win-commandicon win-commandring icon-plus"></span> <span class="win-label white">Créer</span> </a> <script> $('#button_submit').click(function() { $('#article_create').submit(); }); </script> résolu en déportant la validation js directement dans la balise lien Code <a title="" id="button_submit" class="win-command white pull-right" href="#" onclick="$('#article_create').submit();"> <span class="win-commandicon win-commandring icon-plus"></span> <span class="win-label white">Créer</span> </a> pourtant, il y a bien un bug report à ce propos qui devrait corriger le problème (j'utilise bien la version CKEditor 4.2.1) : http://dev.ckeditor.com/ticket/10689 avec une seule instance de ckeditor, la validation js fonctionne. |
|
6 Oct 2013, 23:35
Message
#2
|
|
5eme dan OSC Groupe : Administrateur Messages : 9221 Inscrit : 4-March 03 Lieu : Pau Membre no 927 |
Plusieurs instances, cela ne signifierait pas plusieurs id identiques ?
$('#button_submit') ne cible donc que le premier dans le dom. Une idée comma ça... suffirait d'insérer une variable d'incrément sur l'id non ? -------------------- Tout d'abord : - Ni Hotline ni Service Après Vente, ces forums sont un lieu d'échange. BIEN POSER SA QUESTION (généralités)
Les "Informations Importantes" que vous devez ABSOLUMENT avoir lues : Règlement, Bien poser sa question dans ces forums et Bien utiliser les Forums. Les raccourcis pour gagner du temps : la FAQ, les PDF de la Doc (MS2-fr): PDF-V1 et PDF-V2, le moteur de Recherche sur les forums , la Liste des Contributions de Corbin. ----------------------------- Quelques sites de référence --------------------------- PHP: Le site du Zéro et PHP Débutant avec la DOC en français -- HTML: Self HTML - WebProgrammation -- CSS: OpenWeb - AlsaCréations - CSS/Edge -- Autres ressources: - XajaX - highslide js Les bons outils : EasyPHP - WAMP-5 - - Notepad++ - Firefox et son extension WebDeveloper Le gène idéal c'est le gène original. Le génie des halles est un Génie des Alpages qui tente d'être à la page. (Merci f'murrr pour les cours de philosophie de chien) |
|
7 Oct 2013, 06:26
Message
#3
|
|
Ceinture marron OSC Groupe : Membres Messages : 1665 Inscrit : 3-June 09 Membre no 25501 |
Plusieurs instances, cela ne signifierait pas plusieurs id identiques ? sauf que ça, c'est une erreur de débutant, hors il me semble que je ne suis plus débutant, même si je laisse à croire que je pourrais l'être. on le voit ici, les deux instances de ckeditor fonctionnent. donc soit c'est dans le noyau même de ckeditor que le problème réside (car l'éditeur traverse le dom et rencontre un nœud 'submit' qui est intégré dans son code[la toolbar de ckeditor embraque un bouton save de type submit], mais dès lors où il y a plusieurs instances, ce parcours plante. il doit manquer une boucle dans le script lui même.) soit mon instruction .submit() avec l'objet jQuery est mal implémentée et ne permet pas au script de prendre en compte l'ensemble des champs. D'ailleurs, je le précise, en déportant l'instruction js au cœur de la balise 'a', ça fonctionne nickel (onclick). Mais je n'aime pas cette solution, car pour moi, les instructions js doivent être dans un script, les styles dans un css et les vaches seront bien gardées. (puis c'est plus simple pour déboguer) cependant quand j'ai qu'une seule instance de ckeditor, comme dans ce formulaire, mon .submit() ne pose pas problème. pire, aucune erreur javascript n'est soulevée : comme dit ici Citation If multiple ckeditor instances are present in the form, only the first instance is saved (others are posted in their original state);
New to 4.2 (4.1.3 ok)(also present in latest github) Firefox, webkit, no javascript error |
|
7 Oct 2013, 08:32
Message
#4
|
|
5eme dan OSC Groupe : Administrateur Messages : 9221 Inscrit : 4-March 03 Lieu : Pau Membre no 927 |
sauf que ça, c'est une erreur de débutant, hors il me semble que je ne suis plus débutant, même si je laisse à croire que je pourrais l'être. Waip, un truc de newbees mais le code c'est un peu comme l'orthographe, même un super champion peut se faire piéger par une faute élémentaire en raison de :- fatigue - inattention - faute de frappe - redondance visuelle cyclique - ... (rayer les mentions inutiles ou compléter si besoin) Loin de moi de vouloir donner une leçon, mais juste apporter un autre point de vue. Mais il est vrai qu'avec du code visible on comprend mieux l'étendu du problème. Tu n'as qu'une seule instance de button.submit mais plusieurs instances de cKe. Plus clair. Alors j'ai une piste : dans la toolbar il y a un bouton qui effectue aussi le submit() , la disquette. Or ces deux boutons semblent fonctionner dans le cas de multiples instances. Ok ils sont dans le form et dans ce cas un simple submit() devrait suffire, cela dit, c'est peut-être un indice. Hypothèse : cKe gère peut-être l'évènement autrement dans le cas de multiples instances en bloquant le jQuery déporté pour le gérer à sa manière. Au cas où, mais il me semble superflu puisque la différence est que les boutons de la toolbar sont apparemment dans le form. Cela expliquerai que le bouton "en dur" fonctionne car il ne passe pas par le déport ready(function(). Ok, c'est résolument un bug identifié de ce framework. Comme tu le sais, je fonctionne en logique simple déduction mais un autre angle de vue peut parfois apporter une lumière ou 'ring a bell'... -------------------- Tout d'abord : - Ni Hotline ni Service Après Vente, ces forums sont un lieu d'échange. BIEN POSER SA QUESTION (généralités)
Les "Informations Importantes" que vous devez ABSOLUMENT avoir lues : Règlement, Bien poser sa question dans ces forums et Bien utiliser les Forums. Les raccourcis pour gagner du temps : la FAQ, les PDF de la Doc (MS2-fr): PDF-V1 et PDF-V2, le moteur de Recherche sur les forums , la Liste des Contributions de Corbin. ----------------------------- Quelques sites de référence --------------------------- PHP: Le site du Zéro et PHP Débutant avec la DOC en français -- HTML: Self HTML - WebProgrammation -- CSS: OpenWeb - AlsaCréations - CSS/Edge -- Autres ressources: - XajaX - highslide js Les bons outils : EasyPHP - WAMP-5 - - Notepad++ - Firefox et son extension WebDeveloper Le gène idéal c'est le gène original. Le génie des halles est un Génie des Alpages qui tente d'être à la page. (Merci f'murrr pour les cours de philosophie de chien) |
|
11 Oct 2013, 14:24
Message
#5
|
|
5eme dan OSC Groupe : Administrateur Messages : 9221 Inscrit : 4-March 03 Lieu : Pau Membre no 927 |
J'y reviens car j'ai constaté autre chose sur ce bouton 'save' de cke
J'ai un formulaire que je souhaite vérifier avant d'envoyer, j'ai donc dans ma déclaration de formulaire un truc comme Code onsubmit="return CheckForm(this);" Tout va bien quand je valide mon formulaire à l'aide d'un bouton <insert type="submit"> (donc dans le formulaire) ou que j'appuie sur la touche entrée, le contrôle du formulaire se fait correctement via la fonction CheckForm mais si j'ai un bouton js (toujours dans le form mais déplaçable en ciblant le formulaire dans l'instruction) qui contient onclick="this.form.submit()", le contrôle ne se fait plus. Mon bouton doit contenir onclick="CheckForm(this.form)"; Le bouton save de cke fait le même type de submit sans contrôle (j'ai pas fouillé le code, mais j'imagine un simple this.form.submit()) Je ne peux donc l'utiliser pour mon formulaire qui part sans contrôle. ça me gène pas, j'ai viré le bouton de la toolbar c'est le plus simple dans mon cas. A priori aucun rapport avec ta non validation, quoi que... c'est peut-être une piste. Waip, je sais, ça ne résout pas le bug cke racine, mais si ça peut aider... Au passage j'utilise la ckEditor version:"4.1.2",revision:"d6f1e0e" qui ne pose aucun problème avec plusieurs instances dans le même formulaire. -------------------- Tout d'abord : - Ni Hotline ni Service Après Vente, ces forums sont un lieu d'échange. BIEN POSER SA QUESTION (généralités)
Les "Informations Importantes" que vous devez ABSOLUMENT avoir lues : Règlement, Bien poser sa question dans ces forums et Bien utiliser les Forums. Les raccourcis pour gagner du temps : la FAQ, les PDF de la Doc (MS2-fr): PDF-V1 et PDF-V2, le moteur de Recherche sur les forums , la Liste des Contributions de Corbin. ----------------------------- Quelques sites de référence --------------------------- PHP: Le site du Zéro et PHP Débutant avec la DOC en français -- HTML: Self HTML - WebProgrammation -- CSS: OpenWeb - AlsaCréations - CSS/Edge -- Autres ressources: - XajaX - highslide js Les bons outils : EasyPHP - WAMP-5 - - Notepad++ - Firefox et son extension WebDeveloper Le gène idéal c'est le gène original. Le génie des halles est un Génie des Alpages qui tente d'être à la page. (Merci f'murrr pour les cours de philosophie de chien) |
|
12 Oct 2013, 08:42
Message
#6
|
|
Ceinture marron OSC Groupe : Membres Messages : 1665 Inscrit : 3-June 09 Membre no 25501 |
effectivement, je viens de faire un test sur un formulaire contenant 3 instances de ckeditor avec une toolbar réduite (donc sans l'option save), la validation via l'objet jquery fonctionne comme attendu
le code source du browser HTML <form style="margin-bottom:93px;" id="gistcomments_create" action="/foxp2projects/symfony/web/app_dev.php/fr/backoffice/gistcomments/create" method="post" > <div id="form"><input type="hidden" id="form_IdGist0" name="form[IdGist0]" readonly="readonly" value="123" /> <div> <label for="form_FilenameGist0" class="required"><strong>Nom du fichier</strong></label> <div class="input-prepend"> <span class="add-on"><i class="icon-pencil-2"></i></span> <input class="input-xxlarge" type="text" id="form_FilenameGist0" name="form[FilenameGist0]" readonly="readonly" required="required" value="file1" /> </div> </div> <div> <label for="form_Comments0" class="required"><strong>commentaires</strong></label> <textarea id="form_Comments0" name="form[Comments0]" required="required"></textarea> <script type="text/javascript"> var CKEDITOR_BASEPATH = 'http://localhost/foxp2projects/symfony/web/bundles/ivoryckeditor/'; </script><script type="text/javascript" src="http://localhost/foxp2projects/symfony/web/bundles/ivoryckeditor/ckeditor.js"></script><script type="text/javascript"> if (CKEDITOR.instances['form_Comments0']) { delete CKEDITOR.instances['form_Comments0']; } CKEDITOR.replace('form_Comments0', {"toolbar":[{"name":"basicstyles","items":["Bold","Italic","Underline","Strike","Subscript","Superscript","-","RemoveFormat"]},{"name":"paragraph","items":["NumberedList","BulletedList","-","Outdent","Indent","-","Blockquote","CreateDiv","-","JustifyLeft","JustifyCenter","JustifyRight","JustifyBlock","-","BidiLtr","BidiRtl"]},{"name":"styles","items":["Styles","Format","Font","FontSize"]}]}); </script> </div> <input type="hidden" id="form_IdGist1" name="form[IdGist1]" readonly="readonly" value="123" /> <div> <label for="form_FilenameGist1" class="required"><strong>Nom du fichier</strong></label> <div class="input-prepend"> <span class="add-on"><i class="icon-pencil-2"></i></span> <input class="input-xxlarge" type="text" id="form_FilenameGist1" name="form[FilenameGist1]" readonly="readonly" required="required" value="file2" /> </div> </div> <div> <label for="form_Comments1" class="required"><strong>commentaires</strong></label> <textarea id="form_Comments1" name="form[Comments1]" required="required"></textarea> <script type="text/javascript"> var CKEDITOR_BASEPATH = 'http://localhost/foxp2projects/symfony/web/bundles/ivoryckeditor/'; </script> <script type="text/javascript" src="http://localhost/foxp2projects/symfony/web/bundles/ivoryckeditor/ckeditor.js"></script> <script type="text/javascript"> if (CKEDITOR.instances['form_Comments1']) { delete CKEDITOR.instances['form_Comments1']; } CKEDITOR.replace('form_Comments1', {"toolbar":[{"name":"basicstyles","items":["Bold","Italic","Underline","Strike","Subscript","Superscript","-","RemoveFormat"]},{"name":"paragraph","items":["NumberedList","BulletedList","-","Outdent","Indent","-","Blockquote","CreateDiv","-","JustifyLeft","JustifyCenter","JustifyRight","JustifyBlock","-","BidiLtr","BidiRtl"]},{"name":"styles","items":["Styles","Format","Font","FontSize"]}]}); </script> </div> <input type="hidden" id="form_IdGist2" name="form[IdGist2]" readonly="readonly" value="123" /> <div> <label for="form_FilenameGist2" class="required"><strong>Nom du fichier</strong></label> <div class="input-prepend"> <span class="add-on"><i class="icon-pencil-2"></i></span> <input class="input-xxlarge" type="text" id="form_FilenameGist2" name="form[FilenameGist2]" readonly="readonly" required="required" value="file3" /></div> </div> <div> <label for="form_Comments2" class="required"><strong>commentaires</strong></label> <textarea id="form_Comments2" name="form[Comments2]" required="required"></textarea> <script type="text/javascript"> var CKEDITOR_BASEPATH = 'http://localhost/foxp2projects/symfony/web/bundles/ivoryckeditor/'; </script> <script type="text/javascript" src="http://localhost/foxp2projects/symfony/web/bundles/ivoryckeditor/ckeditor.js"> </script> <script type="text/javascript"> if (CKEDITOR.instances['form_Comments2']) { delete CKEDITOR.instances['form_Comments2']; } CKEDITOR.replace('form_Comments2', {"toolbar": [{"name": "basicstyles", "items": ["Bold", "Italic", "Underline", "Strike", "Subscript", "Superscript", "-", "RemoveFormat"]}, {"name": "paragraph", "items": ["NumberedList", "BulletedList", "-", "Outdent", "Indent", "-", "Blockquote", "CreateDiv", "-", "JustifyLeft", "JustifyCenter", "JustifyRight", "JustifyBlock", "-", "BidiLtr", "BidiRtl"]}, {"name": "styles", "items": ["Styles", "Format", "Font", "FontSize"]}]}); </script> </div> <input type="hidden" id="form__token" name="form[_token]" value="570a7b14b0a87befe923c6ab7b561559247f38f8" /> </div> </form> <script> $('#gistcomments_create').click(function() { $('#mon_formulaire').submit(); }); </script> de la à dire que la présence de ces boutons submit dans les toolbar ckeditor mettent le bordel lors de la validation, j'ai un doute car dans l'autre formulaire j'ai une instance de ckeditor (avec toolbar réduite) et une avec une toolbar complète. donc si on suit la logique du bug, cela ne devrait pas planté. je rappelle que dans les autres formulaire avec une simple instance de ckeditor (et toolbar complète, la validation via l'objet jquery ne pose aucun problème) le commentaire N°8 l'explicite bien par contre c'est vrai que de faire des test sur des versions différentes de ckeditor est incohérent. nota bene - bug d'ipb : la balise HTML fait perdre l'indentation du code référence externe : tagué comme bug dans le projet |
|
12 Oct 2013, 10:43
Message
#7
|
|
5eme dan OSC Groupe : Administrateur Messages : 9221 Inscrit : 4-March 03 Lieu : Pau Membre no 927 |
par contre c'est vrai que de faire des test sur des versions différentes de ckeditor est incohérent. Certes, malgré cette incohérence (ma 4.1.2 va très bien merci) cela t'a peut-être donné un fix provisoire. Perso je trouve ce bouton save superflu dans la toolbar comme utilisé dans nos scripts puisqu'on met un bouton de validation en bas de page. nota bene - bug d'ipb : la balise HTML fait perdre l'indentation du code Waip bah faisons avec Delaballe a proposé récemment la mise à jour de notre version IPB. J'ai décliné en raison du spam. Notre antispam bricolé maison fonctionne plutôt pas mal (une cinquantaine de spammeurs bloqués chaque jour) et je crains qu'une nouvelle version soit trop vulnérable car "publique". Et 1500 spams par mois, c'est ingérable! -------------------- Tout d'abord : - Ni Hotline ni Service Après Vente, ces forums sont un lieu d'échange. BIEN POSER SA QUESTION (généralités)
Les "Informations Importantes" que vous devez ABSOLUMENT avoir lues : Règlement, Bien poser sa question dans ces forums et Bien utiliser les Forums. Les raccourcis pour gagner du temps : la FAQ, les PDF de la Doc (MS2-fr): PDF-V1 et PDF-V2, le moteur de Recherche sur les forums , la Liste des Contributions de Corbin. ----------------------------- Quelques sites de référence --------------------------- PHP: Le site du Zéro et PHP Débutant avec la DOC en français -- HTML: Self HTML - WebProgrammation -- CSS: OpenWeb - AlsaCréations - CSS/Edge -- Autres ressources: - XajaX - highslide js Les bons outils : EasyPHP - WAMP-5 - - Notepad++ - Firefox et son extension WebDeveloper Le gène idéal c'est le gène original. Le génie des halles est un Génie des Alpages qui tente d'être à la page. (Merci f'murrr pour les cours de philosophie de chien) |
|
Version bas débit | Nous sommes le : 29th March 2024 - 12:38 |
Ce site est déclaré auprès de la commision Nationale de l'Informatique et des Libertés (déclaration n°: 1043896) |