Comment puis-je enregistrer le texte saisi dans un div contenteditable afin qu'il se réaffiche lorsque le code HTML est rechargé ?
Je ne sais pas comment enregistrer du texte dans un div avec l'ensemble 'ContentEditable="true"' ?
Fondamentalement, je suis très naïf en matière de codage HTML et CSS, et JS dépasse largement mes capacités. Cependant, j'ai réussi à créer une sorte de planning en utilisant HTML et CSS.
Le problème est que je ne sais pas comment faire en sorte que le texte placé dans un div en HTML (avec contenteditable défini sur true) persiste et s'affiche la prochaine fois que le fichier html est ouvert sur le navigateur.
Je n'utiliserai mon application que dans localhost et je ne souhaite utiliser aucun type de base de données.
Dans l’attente de votre expertise et de votre aide amicale. Les informations requises sont les suivantes--
.quote
{
width: 92%;
height: 48vh;
margin: 2% auto auto auto;
background-color: beige;
border-style: solid;
border-width: 12px;
border-color: aqua;
display: grid;
grid-template-rows: 12% auto;
}
.quote .p
{
height: 100%;
margin:0 auto auto 12px;
font-family: 'Montserrat', sans-serif;
font-size: 12vh;
background-image: linear-gradient(180deg, rgba(26,18,189,1) 51%, rgba(43,181,131,1) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.quote .p p
{
height: 100%;
width: 100%;
margin:0;
}
.quote .writetext
{
min-height: 8vmax;
max-height: 19vmax;
width: 25.6vmax;
margin: 12px auto 12px auto;
border-style: solid;
border-width: 2px;
border-color: white;
font-family: 'Patrick Hand', cursive;
font-size: 4vh;
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DayMaker- Welcome</title>
<link rel="stylesheet" href="styles.css">
<script src="scripts.js"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Patrick+Hand&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@-1,600&display=swap" rel="stylesheet">
</head>
<body>
<div class="quote">
<div class="p"><p>"</p></div>
<div class="writetext" contenteditable="true">
</div>
</div>
</body>
</html>
Remarque : l'extrait de code donné fait partie d'un projet plus vaste. Veuillez donc ignorer les différences graphiques.
Voici une photo du projet sur lequel je travaille : -Nous devons réparer cette case dans le coin inférieur droit
J'ai essayé de chercher de nombreuses solutions en ligne, mais je n'en ai trouvé aucune. J'attends sincèrement votre aide avec impatience.
