|
 |
| |
Real Time Code Editor พอดีไปเห็นในคลิปเลยแกะมาฝาก เผื่อมีใครสนใจ |
| |
 |
|
|
 |
 |
|
ไปเจอในคลิปของฝรั่งมา มันน่าสนใจ เลยแกะแล้วก็เพิ่มแต่งเติมนิดๆหน่อยๆ
ที่ผมเพิ่มเข้าไปจะเป็นตัวเซฟไฟล์
คลิป : https://www.youtube.com/watch?v=onLsz9BwP7M
หน้าตาเป็นประมาณนี้
มาดูกันว่าทำยังไง
ไฟล์ทั้งหมด
- index.html
- write.php
index.html
Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Real time code editing</title>
<script>
function refresh(){
var textContent = document.getElementById('editor').value;
document.getElementById('result').srcdoc = textContent;
}
var HttPRequest = false;
function writeFile() {
HttPRequest = false;
if (window.XMLHttpRequest) { // Mozilla, Safari,...
HttPRequest = new XMLHttpRequest();
if (HttPRequest.overrideMimeType) {
HttPRequest.overrideMimeType('text/html');
}
} else if (window.ActiveXObject) { // IE
try {
HttPRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
HttPRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
if (!HttPRequest) {
alert('Cannot create XMLHTTP instance');
return false;
}
var url = 'write.php';
var pmeters = 'filename='+document.getElementById("fileName").value+'&filedata='+document.getElementById("editor").value;
//var pmeters = 'myName='+document.getElementById("txtName").value+'&my2='; // 2 Parameters
HttPRequest.open('POST',url,true);
HttPRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
HttPRequest.setRequestHeader("Content-length", pmeters.length);
HttPRequest.setRequestHeader("Connection", "close");
HttPRequest.send(pmeters);
HttPRequest.onreadystatechange = function()
{
if(HttPRequest.readyState == 3) // Loading Request
{
document.getElementById("output").innerHTML = "Now is Loading...";
}
if(HttPRequest.readyState == 4) // Return Request
{
document.getElementById("output").innerHTML = HttPRequest.responseText;
}
}
}
</script>
<style>
* {
padding: 0;
margin: 0;
}
body {
background: #ecf0f1;;
}
.main {
display: inline-flex;
position: relative;
width: 100%;
height: 85%;
}
#result {
border: none;
background: #fff;
width: 100%;
height: 60vh;
margin: 10px;
}
#editor {
width: 100%;
height: 60vh;
margin: 10px;
border: none;
padding: 10px;
}
.title {
display: block;
padding: 10px;
font-family: sans-serif, tahoma;
color: #2980b9;
font-weight: 800;
}
#fileName {
display: inline-block;
border: none;
background: #fff;
padding: 10px;
margin-left: 10px;
}
#submit {
display: inline-block;
border: none;
background: #fff;
padding: 10px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="title">
<h1>Real time HTML CSS JS Editor</h1>
</div>
<div class="main">
<textarea id="editor" onkeyup="refresh()" placeholder="Your Code"></textarea>
<iframe id="result"></iframe>
</div>
<input type="text" id="fileName" placeholder="Save your file">
<input type="submit" id="submit" onclick="JavaScript:writeFile();">
<span id="output"></span>
</body>
</html>
write.php
Code (PHP)
<?php
$handler = fopen($_POST["filename"], "w");
$write = fwrite($handler, $_POST["filedata"]);
fclose($handler);
echo "Save your file";
?>
แค่นี้เลยครับ ^^ หวังว่าจะเป็นประโยชน์ต่อคนที่สนใจนะครับ ขอบคุณครับ อิอิ๊ ไม่ได้เข้ามานาน 
Tag : PHP, HTML, CSS, HTML5, JavaScript, Ajax
|
|
|
 |
 |
 |
 |
| Date :
2019-04-04 13:59:37 |
By :
KitInYourDev |
View :
2935 |
Reply :
3 |
|
 |
 |
 |
 |
|
|
|
|
 |
 |
|
 |
 |
| |
|
|
|
| |
|
|
| |
|
|
| |
| Date :
2019-04-05 08:52:33 |
By :
mr.win |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
Code ชุดนี้ มีประโยชน์มาก ในการพิมพ์ PHP, HTML, CSS, JavaScript, Ajax ผ่านมือถือ/Tablet ควบคู่กับ Keyboard ภายนอกครับ
|
ประวัติการแก้ไข
2019-04-05 10:14:34
| |
|
|
| |
| Date :
2019-04-05 10:13:57 |
By :
doanga2007 |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
|
| |
|
|
| |
| Date :
2019-04-05 10:16:49 |
By :
nobetaking |
|
|
| |
|
|
|
|
|
| |
|
|
|
|
|
| |
|
 Load balance : Server 02
|
