Alternative aux formulaires imbriqués

**delaio** · 04/10/2019, 15h35

bonjour à tous,

j'ai un formulaire pour modifier ou insérer les pages d'un site web (titre, url, contenu, en ligne...). Pour le champ "contenu", j'utilise un editeur wysiwyg permettant de personnaliser le texte (gras, italique, couleur, images, tableaux...).

Nom : 2019-10-04_14h49_16.png
Affichages : 256
Taille : 18,8 Ko

Nom : 2019-10-04_14h49_16.png
Affichages : 256
Taille : 18,8 Ko

Le souci est que cet éditeur wysiwyg contient 3 formulaires pour gérer via une fenêtre modale la couleur du texte, une image sélectionnée, un tableau à insérer...

Les formulaires imbriqués sont interdits : du coup, les inputs de l'éditeur wysiwyg sont pris en compte dans mon formulaire principal...

ne trouvant pas d'alternative, j'ai fait un truc horrible : j'ai collé l'éditeur avec ses 3 formulaires dans le td d'un tableau vide et j'ai ajouté un <form></form> juste avant les trois autres pour endormir la bête. et le pire, c'est que ça marche parfaitement ! mon formulaire principal et mes 3 sous formulaires réagissent très bien.

voici mon bout de code (que j'ai essayé d'alléger au max pour ce post)

Code html :

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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta http-equiv="content-type" content="text/html" charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/editeur.css">
</head>
<body>
<header>
    <h1>administration du site</h1>
</header>
<div class="corps">
    <section class="contenu">
        <div class="page-header">
            <h1>Editer un article "page"</h1>
        </div>
        <form name="formulaire_page" class="formulaire gris" action="admin_site/article/voir_update_insert_page/2"
              method="post">
            <input type="hidden" name="ar_num" value="2">
            <label for="input_titre">titre</label>
            <div class="form-admin"><input type="text" id="input_titre" name="titre" value="titre de ma page"></div>
            <label for="input_slug">chemin url</label>
            <div class="form-admin"><input type="text" id="input_slug" name="slug" value="titre-de-ma-page"></div>
            <label for="input_contenu">contenu</label>
            <textarea id="input_contenu" name="contenu" style="display:none">voici le contenu de ma page...blablabla...</textarea>
            <table id="editeur_wysiwyg" style="width: 100%;">
                <tr>
                    <td>
                        <form></form>
                        <div class="menu_wysiwyg">
                            <div id="barre_style_wysiwyg">
                                <div class="position_pour_hint">
                                    <div class="bouton_wysiwyg" onclick="formater_texte('Bold', '');">
                                        <img class="bouton_base" src="gras.png"/>
                                    </div>
                                </div>
                                <div class="position_pour_hint">
                                    <div class="bouton_wysiwyg" onclick="formater_texte('Italic', '');">
                                        <img class="bouton_base" src="italique.png"/>
                                    </div>
                                </div>
                                <div id="position_couleur_fond" class="position_pour_hint">
                                    <div class="bouton_wysiwyg" onclick="afficher_palette('BackColor');">
                                        <img class="bouton_base" src="couleur_fond.png"/>
                                    </div>
                                    <div id="fenetre_modale_couleur">
                                        <form name="formulaire_couleur">
                                            <input type="text" id="palette_couleur_couleur_selection" name="palette_couleur_couleur_selection" value="#FF0000"
                                                   onkeydown="modifier_code_couleur()"/>
                                            <span id="bouton_couleur_ok" onclick="valider_couleur()">OK</span>
                                            <span id="bouton_couleur_fermer" onclick="fermer()">&times;</span>
                                            <div id="degrade_couleur" onmousedown="choisir_zone_couleur('degrade_couleur')"></div>
                                            <div id="choix_couleur" onmousedown="choisir_zone_couleur('choix_couleur')"></div>
                                            <input type="text" id="palette_couleur_texte_selection" name="palette_couleur_texte_selection" value="couleur du texte"/>
                                        </form>
                                    </div>
                                </div>
                                <div class="bouton_wysiwyg titre">
                                    <select onchange="formater_texte('formatBlock', this.value); this.selectedIndex = 0;">
                                        <option value="">titre :</option>
                                        <option value="h1">titre 1</option>
                                        <option value="h2">titre 2</option>
                                        <option value="h3">titre 3</option>
                                        <option value="h4">titre 4</option>
                                        <option value="p">aucun titre</option>
                                    </select>
                                </div>
                                <div id="position_bouton_tableau" class="position_pour_hint">
                                    <div class="bouton_wysiwyg" onclick="parametrer_tableau();">
                                        <img class="bouton_base" src="tableau.png"/>
                                    </div>
                                    <div id="fenetre_modale_tableau">
                                        <div class="parametrage_tableau">
                                            <span id="bouton_tableau_ok">OK</span>
                                            <span id="bouton_tableau_fermer">&times;</span>
                                        </div>
                                        <div class="parametrage_tableau">
                                            nombre de lignes <span id="tableau_nb_ligne" class="span_editable" contenteditable="true"></span>
                                        </div>
                                        <div class="parametrage_tableau">
                                            nombre de colonnes <span id="tableau_nb_colonne" class="span_editable" contenteditable="true"></span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="editeur_wysiwyg">
                            <iframe id="editeur" src="editeur_contenu.php">
                            </iframe>
                            <div id="code_html" contenteditable="true"></div>
                        </div>
                    </td>
                </tr>
            </table>
            <label for="input_ar_redirection">url de redirection</label>
            <div class="form-admin"><input type="text" id="input_ar_redirection" name="ar_redirection" value="reedirec"></div>
            <label for="input_ar_enligne">en ligne</label>
            <div class="form-admin"><input type="hidden" name="ar_enligne" value="0"><input type="checkbox" name="ar_enligne" value="1" checked></div>
            <input type="submit" class="bouton bouton-vert" value="Modifier">
            <input type="submit" class="bouton bouton-rouge" formaction="administration-du-site" value="Annuler">
        </form>
    </section>
</div>
<footer>
</footer>
<script type="text/javascript" src="javascript/editeur.js"></script>
</body>
</html>

toutes les actions de ces 3 sous formulaires sont gérés en JS. donc techniquement, je ne vois que 2 solutions :

solution 1 :
- supprimer les 3 sous formulaires et garder les inputs pour gérer les saisies utilisateur.
- inconvénient : ne pas interpréter ces inputs dans le formulaire principal (traitement php, modèle MVC, gestion automatique des champs)
solution 2 :
- supprimer les 3 sous formulaires et remplacer les inputs par des span éditables (et gérer les retours chariots et tout le toutim..)
- inconvénient : c'est quand même cool les inputs pour les saisies utilisateurs (réinventer la roue... bof).

Quelle est la bonne méthode à employer dans ce cas de figure !?!! j'ai besoin de votre clairvoyance, je manque encore de pratique dans le domaine des bonnes pratiques.

merci beaucoup.

**delaio** · 08/10/2019, 10h44

pas de réponse !?!!

bon ben j'ai opté pour la 2ème solution...

Alternative aux formulaires imbriqués

HTML

Discussions similaires

Partager

Partager