فقط یک صفحه برای ویرایش و نمایش

داشتم HTML را دوره می کردم که به مورد جالبی برخوردم. در نسخه ی جدید یعنی 5 قابلیتی به نام contentEditable برای تمام تگ های نمایشی مثل p یا حتا span وجود دارد که اگر مقدار این پارامتر را برای آنها true کنیم، با کلیک بر روی محتوای آنها تبدیل به input می شوند!
بعد ذهنم رفت به دنبال اینکه کدی بنویسم تا برای ویرایش و نمایش فقط یک صفحه داشته باشیم.
کدها را به سی شارپ و PHP نوشتم و تست کردم. اگر بخواهم یک توضیح خلاصه برای آن داشته باشم، فقط باید بگویم که تگ های پاراگراف و غیره اگر مقداری هم داشته باشند، همراه فرم های ورود اطلاعات ارسال نمی شوند. بنابراین کلکی که می توان زد آن است که یک ورودی مخفی روی صفحه ساخت و مقدار درون تگ را قبل از ارسال فرم، به کمک جاوااسکریپت به آن منتسب کرد!

<?php
if (!empty($_POST["textContent"])) {
$myfile = fopen("database.txt", "w") or die("ببخشید نشد!");
$content = $_POST["textContent"];
fwrite($myfile, $content);
fclose($myfile);   
   } 
 ?> 
<div align="center">
<script>
    function copyContent() {
        document.getElementsByName("textContent")[0].value = document.getElementById("myContent").innerHTML;
        return true;
    }
</script>
<label> پیام (کلیک کنید) </label>:
<?php 
$file = fopen("database.txt","r");
$content = fgets($file);
fclose($file);
?>
<span contenteditable="true" id="myContent">
    <?php echo $content ?>
</span>
<br><br>
<form method="post" action="index.php">
    <input name="textContent" hidden>
    <button type="submit" onclick="copyContent()"> ذخیره ی تغییرات </button>
</form>
</div>

فراموش نکنید که فایل database.txt را هم با نوتپد ساخته و با مقدار دلخواه متنی درون آن، کنار این کد داشته باشید تا نمایش و ویرایش آن را روی صفحه ببینید.