Online Code Editor
ဒါက တော့မိမိကိုယ်တိုင် HTML CSS JavaScript Code တွေကိုရေးသားလေ့ကျင့်လို့ရအောင်ပြုလုပ်ထားတဲ့ Code Editor တခုဖြစ်ပါတယ်။ဒီ Code Editor ကတော့ Codeing တွေ Script တွေကိုစိတ်ဝင်စားတဲ့သူ တွေအတွက်အထူးသင့် လျော်တဲ့ Online Code Editor ဖြစ်ပါတယ်။လိုအပ်လို့ထည့်သွင်းအသုံးပြုချင်တယ်ဆိုရင်အောက်ကပြုလုပ်ထည့်သွင်းရတဲ့အဆင့်အနည်းဖြင့်ထည့်သွင်းအသုံးပြုနိုင်မှာဖြစ်ပါတယ်။
- မိမိ site ကို account အရင်ဝင်ပါ
- dashboard ထဲက Pages ကိုနှိပ်
- ➕ New Page (or) ➕ အိုင်ကွန်ကိုနှိပ်
- 🖍️ အိုင်ကွန်ကိုနှိပ်ပါ </> HTML view ကိုရွေးချယ်၍နှိပ်ပါ
- အောက်က code တွေကို copy ယူ၍ကူးထည့်
<script crossorigin="anonymous" src="https://kit.fontawesome.com/f97427a625.js"></script>
<!--JQuery-->
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<!--CSS Style-->
<style type="text/css">
br { display: none; }
textarea{display: block;margin: 10px 0; width:100%; height : auto; border: 1px solid #333;}
iframe{display: block;margin: 10px 0; width:100%; resize:both; overflow: auto; border: 1px solid #333;}
</style>
<!--JavaScript-->
<script type="text/javascript">
function updateIframe(){
var myFrame = $("#myframe").contents().find('body');
var textareaValue = $("textarea").val();
myFrame.html(textareaValue);
}
</script>
<button onclick="html" style="border: 1;" type="button"><i class="fa-brands fa-html5"></i> HTML</button>
<button onclick="css" style="border: 1;" type="button"><i class="fa-brands fa-css3-alt"></i> CSS</button>
<button onclick="javascript" style="border: 1;" type="button"><i class="fa-brands fa-square-js"></i> JavaScript</button>
<textarea cols="40" id="JSBox" rows="10" width="100%">
<html>
<head>
<style>
body{
font-family:'Verdana', sans-serif;
background:turquoise;
}
.someDiv{
padding:10px;
margin:20px;
display:inline-block;
background:orange;
}
</style>
</head>
<body>
<h1>This is the preview.</h1>
<div class="someDiv">
Welcome to CodeEditor
</div>
</body>
</html>
</textarea>
<button onclick="updateIframe()" style="border: 1;" type="button"><i class="fa fa-pencil-square-o"></i> Result Check</button>
<button id="JSButton"><i class="fa fa-copy"></i> All Copy</button>
<button class="btn btn-danger btn-xs" id="btn_clear" onclick="cdClear();"><i class="fa fa-trash-o"></i> All Delete</button>
<script>
let JSBox = document.getElementById("JSBox");
let JSButton = document.getElementById("JSButton");
JSButton.onclick = function () {
JSBox.select();
document.execCommand("copy");
JSButton.innerText = "Copied";
};
</script>
<script type="text/javascript">
function cdClear() { var textarea = document.getElementById('JSBox');
textarea.value = '';
document.getElementById("btnInfo")
.style.display = "none",document.getElementById("button-link")
.style.display = "none",document.getElementById("btn_clear")
.style.display = "none"
}
</script>
<script>
//<![CDATA[
var clipboard = new Clipboard(".button-link");
clipboard.on("success", function (o) {
console.log(o), document.getElementById("btnInfo")
.style.display = "block", document.getElementById("button-link")
.style.display = "none", document.getElementById("btn-reset")
.style.display = "none", document.getElementById("JSBox")
.value = ""
}), clipboard.on("error", function (o) {
console.log(o)
});
//]]>
</script>
<iframe id="myframe"></iframe>
- ▶️ Publish ကိုနှိပ်ပါ။ CONFIRM ကိုနှိပ်ပြီးပါပြီ။