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

【问题标题】：Live preview inside iFrame and saving style.css every 30 seconds在 iFrame 内实时预览并每 30 秒保存一次 style.css
【发布时间】：2013-11-05 16:30:49
【问题描述】：

我正在创建一个网站，您可以在其中输入 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？

【问题讨论】：

到目前为止你做了什么？
@Aristona 我已经制作了要编辑的页面（只是样式）和 preview.php（只是将显示的预览文本）

标签： javascript css wordpress iframe

【解决方案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。

【讨论】：

如何让用户也能够使用 ID 为 html 的 TextArea 更改页面上的 HTML（也保存它）？
使用与样式相同的代码，但用于 html。此外，将 Javascript 代码第 4 行的 URL 更改为 "preview.php?css=" + encodeURIComponent(txt) + "&html=" + encodeURIComponent($("#html").val())。这真的很容易。