Question

我正在建立一个您输入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？

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 file upload tutorial。

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

修改

1 个答案: