Home
CODE EDITOR

Online Code Editor

Online Code Editor

ဒါက တော့မိမိကိုယ်တိုင် HTML CSS JavaScript Code တွေကိုရေးသားလေ့ကျင့်လို့ရအောင်ပြုလုပ်ထားတဲ့ Code Editor တခုဖြစ်ပါတယ်။ဒီ Code Editor ကတော့ Codeing တွေ Script တွေကိုစိတ်ဝင်စားတဲ့သူ တွေအတွက်အထူးသင့် လျော်တဲ့ Online Code Editor ဖြစ်ပါတယ်။လိုအပ်လို့ထည့်သွင်းအသုံးပြုချင်တယ်ဆိုရင်အောက်ကပြုလုပ်ထည့်သွင်းရတဲ့အဆင့်အနည်းဖြင့်ထည့်သွင်းအသုံးပြုနိုင်မှာဖြစ်ပါတယ်။



  1. မိမိ site ကို account အရင်ဝင်ပါ
  2. dashboard ထဲက Pages ကိုနှိပ်
  3. ➕ New Page (or) ➕ အိုင်ကွန်ကိုနှိပ်
  4. 🖍️ အိုင်ကွန်ကိုနှိပ်ပါ </> HTML view ကိုရွေးချယ်၍နှိပ်ပါ
  5. အောက်က 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>






  1. ▶️ Publish ကိုနှိပ်ပါ။ CONFIRM ကိုနှိပ်ပြီးပါပြီ။

Post a Comment