Bagaimanakah saya boleh menyimpan teks yang dimasukkan dalam div boleh diedit kandungan supaya ia akan dipaparkan semula apabila HTML dimuatkan semula?
Saya tidak tahu cara menyimpan beberapa teks dalam div dengan set 'ContentEditable="true"'?
Pada asasnya, saya sangat naif tentang pengekodan HTML dan CSS, dan JS jauh melebihi kemampuan saya. Walau bagaimanapun, saya telah berjaya membuat beberapa jenis jadual untuk diri saya sendiri menggunakan HTML dan CSS.
Masalahnya, saya tidak tahu bagaimana untuk membuat teks yang diletakkan dalam div dalam HTML (dengan set contenteditable kepada true) berterusan dan dipaparkan pada kali berikutnya fail html dibuka pada penyemak imbas.
Saya hanya akan menggunakan aplikasi saya dalam localhost dan tidak mahu menggunakan sebarang jenis pangkalan data.
Mengharapkan kepakaran dan bantuan mesra anda. Maklumat yang diperlukan adalah seperti berikut--
.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>
Nota: Coretan kod yang diberikan adalah sebahagian daripada projek yang lebih besar. Jadi sila abaikan perbezaan grafik.
Berikut ialah gambar projek yang sedang saya kerjakan: -Kita perlu betulkan kotak itu di sudut kanan bawah
Saya cuba mencari banyak penyelesaian dalam talian tetapi tidak menemui sebarang penyelesaian. Ikhlas mengharapkan bantuan anda.
