我正在制作一个网站,您可以在其中输入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文件上传教程。