在iFrame中进行实时预览并每30秒保存一次style.css

Question

我正在制作一个网站，您可以在其中键入CSS，并且有一个预览（preview.php）-在iFrame中显示-已设置文本。 当您在CSS文件中键入CSS时，我希望Preview.php能够实时更新（相对于Preview.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 ？

Answer 1

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文件上传教程。

在iFrame中进行实时预览并每30秒保存一次style.css

问题描述

编辑

1 个解决方案

解决方案1
0 已采纳 2013-11-03 05:31:51

在iFrame中进行实时预览并每30秒保存一次style.css

问题描述

编辑

1 个解决方案

解决方案1 0 已采纳 2013-11-03 05:31:51

解决方案1
0 已采纳 2013-11-03 05:31:51