I have created a website on a private network where the user can create and edit a page within the browser. The edit page basically has a split screen where the code is on the left and the preview of the code is on the right. I would like to get this preview to update in real-time as the user edits the code; however, I can only get it to update HTML code rather than the PHP code the user enters. After saving the file, the user sees the changes made by the PHP code; however, it doesn't work with real-time changes. Ideally, I would like this displayed in something like the iframe in the HTML preview code below but any solution you could offer would be great.
HTML Preview Page Code:
<section id='quickpreview' class='preview'>
<iframe id='preview' src='{$filepath}{$filename}'></iframe>
</section>";
AJAX Call:
editor.on("change", function() {
if (location.href.indexOf("edit.php") != -1) {
var code = editor.getValue();
$.ajax({url: "ajax.php?code=" + code, success: function(output) {
$("#quickpreview").html(output);
},
error: function (xhr, ajaxOptions, thrownError) {
alert(xhr.status + " "+ thrownError);
}});
}
});
AJAX page:
if (isset($_GET["code"])) {
echo $_GET["code"];
}
Thanks in advance for any help.
