在iFrame中进行实时预览并每30秒保存一次style.css
[英]Live preview inside iFrame and saving style.css every 30 seconds
问题描述
I am making a website where you type in CSS and there is a preview (preview.php) - which is shown inside an iFrame - which has set text. 
我正在制作一个网站，您可以在其中键入CSS，并且有一个预览（preview.php）-在iFrame中显示-已设置文本。 I would like preview.php to update live to when you type CSS into the css file (relative to preview.php: designname/css/style.css ), and to save the edited CSS file every 30 seconds. 当您在CSS文件中键入CSS时，我希望Preview.php能够实时更新（相对于Preview.php： designname/css/style.css ），并且每30秒保存一次已编辑的CSS文件。
EDIT 编辑
How should I edit the text in the style tag instead of a file, and uploading the text that you type into an actual file ( title_of_design/css/style.css ), and uploading any images (when you enter in that you need them in an Image Field) to the directory title_of_design/image.php?i=image+name or title_of_design/images/image_name.png ? 我应该如何编辑style标签中的文本而不是文件，以及如何将键入的文本上载到实际文件（ title_of_design/css/style.css ）中，并上载任何图像（当您输入需要的图像时）图片字段）到目录title_of_design/image.php?i=image+name或title_of_design/images/image_name.png ？
1 个解决方案
解决方案1
0 已采纳 2013-11-03 05:31:51
HTML: HTML：
<textarea id="style" placeholder="Enter CSS here!"></textarea>
<iframe id="preview" src="preview.php"></iframe>
Javascript: 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);
This example assumes you are using jQuery 本示例假设您使用的是jQuery
PHP: PHP：
In your preview.php file, inside the <head> tag, place the following code: 在您的preview.php文件的<head>标记内，放置以下代码：
<style><?php echo htmlentities($_GET['code']); ?></style>
In your save.php file, place the following code: 在您的save.php文件中，放置以下代码：
<?php
$code = $_POST['code'];
file_put_contents("title_of_design/css/style.css", $code);
?>
Images: 图片：
Images are more complicated, but I recommend you take a look at the W3Schools PHP file upload tutorial . 图像更为复杂，但是我建议您看一下W3Schools PHP文件上传教程 。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.