iFrame 中的实时预览和保存样式.css每 30 秒一次

Live preview inside iFrame and saving style.css every 30 seconds

本文关键字：一次 css 样式 实时 保存 iFrame      更新时间：2023-09-26

我正在制作一个网站，您可以在其中输入CSS，并且有一个预览（预览.php） - 显示在iFrame中 - 它设置了文本。我想要预览.php实时更新到您在 css 文件中键入 CSS 时（相对于预览.php：designname/css/style.css ），并每 30 秒保存一次编辑后的 CSS 文件。

编辑

我应该如何编辑 style 标签中的文本而不是文件，并将您键入的文本上传到实际文件 （ title_of_design/css/style.css ），并将任何图像（当您在图像字段中输入需要它们时）上传到目录title_of_design/image.php?i=image+name或title_of_design/images/image_name.png？

HTML： 

<textarea id="style" placeholder="Enter CSS here!"></textarea>
<iframe id="preview" src="preview.php"></iframe>

Javascript：

// Automatic update
$("#style").keyup(function() {
    var txt = $(this).val();
    $("#preview").attr("src", "preview.php?code=" + encodeURIComponent(txt));
});
// Auto-save
setInterval(function() {
    $.post("save.php", {"code": $("#style").val() }, function() {
        alert("Successfully saved!");
    });
}, 30 * 1000);

此示例假设您使用的是 jQuery

.PHP：

在 preview.php 文件中的 <head> 标记内，放置以下代码：

<style><?php echo htmlentities($_GET['code']); ?></style>

在save.php文件中，放置以下代码：

<?php
$code = $_POST['code'];
file_put_contents("title_of_design/css/style.css", $code);
?>

图像：

图像更复杂，但我建议您查看W3Schools PHP文件上传教程。

相关文章：