Envoyer le contenu d'un DIV dans un Textarea pour finalement réceptionner le contenu sur une page PHP

**Kitsune64** · 23/10/2019, 01h52

Bonsoir,

Je suis en train de me battre avec un formulaire qui contient un DIV (Texte éditable) Le DIV et les fonctions javascript associées à la page HTML propose une mise en forme du texte (un genre d'éditeur HTML avec un rendu direct sans voir le code à priori). Ça crée des balise html type h1,h2,... en appuyant sur des boutons. Mais on voit le rendu directe sans les balise (dans le DIV).

J'arrive jusqu'ici à extraire le contenu du DIV avec innerHTML mais ensuite pour gérer le TEXTAREA, le mettre à jour et surtout l'envoyer via le formulaire ça se complique.
Avez vous une suggestion de code? J'aimerai ne pas avoir a utiliser la commande GET mais plutôt POST si c'est bien par ce chemin que je peux y arriver.

Mon but est pour l'instant d'au moins afficher le contenu du DIV source en ouvrant un fichier php au final. (J'ai entendu parlé d'AJAX aussi) mais bon je ne sais pas trop si c'est vraiment nécessaire car je fonctionne en ce moment en HTML Javascript et je vais vers du PHP.

**SpaceFrog** · 23/10/2019, 08h28

Pourquoi ne pas passer directement par un envoi en ajax du code html (innerHTML) de ton div

**Kitsune64** · 23/10/2019, 16h11

Bonjour,

Parce que je ne connais pas du tout le fonctionnement de l'Ajax, je vais me renseigner.

Merci de votre réponse.

Invité · 23/10/2019, 18h20

Bonjour,

pourquoi ne veux-tu pas utiliser un éditeur WYSIWYG existant ?

**Kitsune64** · 24/10/2019, 23h58

J'y suis parvenu sans passé par de l'Ajax finalement.

jreaux62 je ne suis pas contraire mais j'aimerai quelque chose d'assez facile à personnaliser et donc sous license Open source et de pas trop lourd à utiliser (script léger). J'ai déjà plusieurs codes sous la main pour ça.
Si l'éditeur WYSIWYG en fait trop je m'y retrouverait pas dans les codes...

**amateurprg** · 06/11/2019, 01h46

J'y suis parvenu sans passé par de l'Ajax finalement.

Et t'as fait comment ?

**Kitsune64** · 07/11/2019, 07h12

Le code HTML+Javascript:

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
<!doctype html>
<html lang="fr">
<head>
<title>Editeur</title>
<meta charset="UTF-8">
<script>
var oDoc;
 
function initDoc() {
  oDoc = document.getElementById("textBox");
 
}
 
 
 
function validateMode() {
        //Si le switch n'est pas activé retourne 'true'
        if (/*!document.compForm.switchMode.checked || */!document.getElementById("butHTML").disabled) {
                return true ; 
        }
        //Aussi non Alerte et retourne 'false'
        alert("Désactivez l'affichage HTML!");
        oDoc.focus();
        return false;
}
</script>
<link rel="stylesheet" href="editor.css">
</head>
<body onload="initDoc();">
<form name="compForm" method="post" action="save.php" onsubmit="if(validateMode()){this.myDoc.value=oDoc.innerHTML;return true;}return false;">
<div id="textBox" contenteditable="true"><p>Ecrivez ici...</p></div>
<input id="validation" type="submit" value="Valider la page."/>
<textarea maxlength="8064" name="myDoc" class="textarea"></textarea>
 
</form>
</body>
</html>