实时 html 编辑器供下载

Question

我喜欢这个 post Real-Time Html editor with Javascript or editor on this site 中的解决方案。只是简单的解决方案，没有额外的功能。

如何编辑代码以添加 SAVE/LOAD 选项？ HTML/CSS 是否有类似“可下载的小型 CMS”之类的东西？ 我想将它上传到我的主机，从 home/phone/work 轻松访问，我不想使用 codepen 或 Liveweave 等在线服务。

谢谢！

编辑：由于评论，我将澄清我的问题。我有一些主机，mySite.com。这个神奇的编辑器 mySite.com/xxx 有一个文件夹，我有一些示例图像和一些基本的 css 等。我正在学习 html/css，所以我开发了一些基本的 html模板。 HTML 我链接的编辑器很好。只有我需要添加 3 个按钮，NEW/OPEN/SAVE 使新的 html file/can 在实时打开它 editor/and 保存它。我想在我自己的主机上有这个简单的解决方案。

Answer 1

<?php
$fileName = "page.html";
$fileContent = fopen($fileName, "r") or die("Unable to open file!");
if (isset($_POST['text'])) {
    file_put_contents($fileName, $_POST["text"]);
}
?>

<!DOCTYPE html><html lang="cs"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1">
<style> 
.error {background-color: red; color: white;}
</style>

</head><body>

<form method="POST">
<textarea name="text" class="form-control" rows="20" id="pure">
<?php echo fread($fileContent,filesize($fileName)); ?> 
</textarea><br>
<input type="submit" value="submit" />
</form>
<hr>
<div id="compiled"></div>
</body>
</html>

 <?php
fclose($fileContent);
?> 

<script type="text/javascript">
var h = document.getElementById("pure");
var compiled = document.getElementById("compiled");
h.onkeyup = function() {
  compiled.innerHTML = h.value;
  pure.classList.toggle("error",
    compiled.innerHTML !== h.value); 
};
h.onkeyup();
</script>

这是我的实际工作，来自 link 的实时 html 编辑器在我的问题中。文件“page.html”必须存在。

添加了功能。在页面加载时将“page.html”文件中的内容加载到文本区域..

添加按钮以在完成后将文本区域内容保存到“page.html”..

可能不是完美的代码，对于多个项目必须复制到不同的文件夹并一个一个地加载:(没有弹出窗口或表单可以轻松选择不同的文件名..但现在它符合我的要求。我可以learn/try/work 在 html 模板上 home/work/mobile 在我自己的主机上，无需登录第三方服务。

Answer 2

好的，我说完了。这是我的最终解决方案。

实时html编辑器
Load/save 个按钮
自动将 /projects/ 文件夹中的文件加载到下拉列表中
您可以上传文件来制作新项目
无需修改，直接使用即可

Index.php

<?php
$fileName = $_POST['project']?? 'index.html';
$fileContent = fopen("./projects/" . $fileName, "r") or die("Unable to open file!");
if (isset($_POST['text'])) {
    file_put_contents("./projects/" . $fileName, $_POST["text"]);
}
?>

<!DOCTYPE html><html lang="cs"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1">
<style> 
.error {background-color:red; color:white;}
.dib {display:inline-block;}
</style>
</head><body>

<?php 
echo "<form class='dib' method='POST'><select name='project'>";
$path    = './projects/';
$files = scandir($path);
$files = array_diff(scandir($path), array('.', '..'));
foreach($files as $file){
  echo "<option" . (($fileName == $file)?' selected':'') . ">" . $file . "</option>";
} 
echo "</select> <input type='submit' value='Load!'></form>";
?>

<input type='submit' form='content' value='Save!'> 

    <form class="dib" style="float:right;" action="fileUploadScript.php" method="post" enctype="multipart/form-data">
        Upload a File:
        <input type="file" name="the_file" id="fileToUpload">
        <input type="submit" name="submit" value="Start Upload">
    </form>

<p style='margin:auto; text-align:center; width:20%; text-transform:uppercase; font-weight: bold;'><?php echo $fileName?></p>

<br>
<form id="content" method="POST">
<textarea name="text" rows="40" id="pure" style="width:100%;margin-top:8px;" wrap="off">
<?php echo fread($fileContent,filesize("./projects/" . $fileName)); ?> 
</textarea><br>
<input type="hidden" name="project" value="<?php echo $fileName; ?>">
</form>
<hr>
<div id="compiled"></div>
</body>
</html>

 <?php
fclose($fileContent);
?> 

<script type="text/javascript">
var h = document.getElementById("pure");
var compiled = document.getElementById("compiled");
h.onkeyup = function() {
  compiled.innerHTML = h.value;
  pure.classList.toggle("error",
    compiled.innerHTML !== h.value); 
};
h.onkeyup();
</script>

fileUploadScript.php

<?php
    $currentDirectory = getcwd();
    $uploadDirectory = "/projects/";

    $errors = []; // Store errors here

    $fileExtensionsAllowed = ['jpeg','jpg','txt','bmp','html','htm','rar','zip','7z','doc','docx','xls','xlsx','ppt','pptx','pdf','pptm','png','gif']; // These will be the only file extensions allowed 

    $fileNamee = $_FILES['the_file']['name'];
    $fileSize = $_FILES['the_file']['size'];
    $fileTmpName  = $_FILES['the_file']['tmp_name'];
    $fileType = $_FILES['the_file']['type'];
    $tmp = explode('.',$fileNamee);
    $fileExtension = strtolower(end($tmp));

    $uploadPath = $currentDirectory . $uploadDirectory . basename($fileNamee); 

    if (isset($_POST['submit'])) {

      if (! in_array($fileExtension,$fileExtensionsAllowed)) {
        $errors[] = "This file extension is not allowed. Please upload a JPEG or PNG file";
      }

      if ($fileSize > 4000000) {
        $errors[] = "File exceeds maximum size (4MB)";
      }

      if (empty($errors)) {
        $didUpload = move_uploaded_file($fileTmpName, $uploadPath);

        if ($didUpload) {
          echo "The file " . basename($fileNamee) . " has been uploaded";
        } else {
          echo "An error occurred. Please contact the administrator.";
        }
      } else {
        foreach ($errors as $error) {
          echo $error . "These are the errors" . "\n";
        }
      }

    }
?>

保存这两个文件后，不要忘记在该文件夹中创建名为“projects”的新文件夹和名为“index.html”的默认文件..

实时 html 编辑器供下载

Real time html editor for download

html

download

editor

real-time