0

我正在制作一个网站，您可以在其中输入 CSS，并且有一个预览 (preview.php) - 显示在 iFrame 内 - 已设置文本。我希望 preview.php 在您将 CSS 输入 css 文件（相对于 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?

4

1 回答 1

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

于 2013-11-03T05:31:51.557 回答