Javascript iFrame内部实时预览并每30秒保存style.css

我正在制作一个网站，在那里你可以输入CSS，并且有一个预览（preview.php）——它显示在一个iFrame中——它设置了文本。我希望preview.php在您将CSS键入CSS文件时（相对于preview.php:

designname/CSS/style.CSS

）更新到live，并每隔30秒保存编辑过的CSS文件

编辑 我应该如何编辑

style

标记中的文本而不是文件，并将您键入的文本上载到实际文件（

title\u of_design/css/style.css

），以及上载任何图像（当您在图像字段中输入需要的图像时）到目录

title\u of_design/image.php？i=image+name

或

title\u of_design/images/image\u name.png

？

HTML:

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

// 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:

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

// 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);

在

preview.php

文件的

标记内，放置以下代码：

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

<?php
$code = $_POST['code'];

file_put_contents("title_of_design/css/style.css", $code);
?>

图像：

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

// 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);

---

图像更复杂，但我建议您看看。

到目前为止您做了什么？@Aristna我已经制作了页面，可以在上面编辑（只是样式）和preview.php（只是将显示的预览文本）如何让用户也能够更改页面上的HTML（也保存它）对于ID为

html

的文本区域，请使用与样式相同的代码，但用于html。另外，将Javascript代码第4行的URL更改为

“preview.php？css=“+encodeURIComponent（txt）+”&html=“+encodeURIComponent（$（“#html”）.val（））

。这真的很容易。