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

Version imprimable

23/10/2019, 01h52
Kitsune64

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

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.
23/10/2019, 08h28
SpaceFrog

Pourquoi ne pas passer directement par un envoi en ajax du code html (innerHTML) de ton div
23/10/2019, 16h11
Kitsune64

Bonjour,

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

Merci de votre réponse.
23/10/2019, 18h20
Invité

Bonjour,

pourquoi ne veux-tu pas utiliser un éditeur WYSIWYG existant ?
24/10/2019, 23h58
Kitsune64

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...
06/11/2019, 01h46
amateurprg

Citation:

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

Et t'as fait comment ?

Le code HTML+Javascript:

Code:

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>

Ainsi que le code PHP qui récupère le contenu du Textarea:

Code:

1
2
3
<?php
echo $_POST['myDoc'];
?>

07/11/2019, 12h15
amateurprg

Merci beaucoup Kitsune ;)
Allez hop, +1