Membuat text editor dengan html css js, sederhana saja!

Kali ini saya terpikirkan untuk bagaimana membuat text editor dengan html css dan javascript.

fungsi dan kegunaannya itu sendiri nantinya dapat kita gunakan untuk menulis kode-kode html css dan javascript kemudian hasil dari kode tersebut dapat langsung kita lihat tanpa harus disimpan terlebih dahulu.

Ya ibaratnya editor text online yang mirip web seperti codepen atau sejenisnya. Tahukan ?😉😊

Ok langsung saja ke tahap pembuatan text editornya.

Menyiapkan kerangka html

Hal pertama adalah kita perlu kerangka html untuk membuat code editornya.

<!DOCTYPE html>
<html lang="in">
<head>

  <title>Text Editor Online</title>
  
  <!-- untuk menghubungkan ke css -->
  <link rel="stylesheet" href="style.css" type="text/css" media="all" />

</head>
<body>

      <b class="head_code_area"><i>HTML,CSS,JS</i></b>
      <div class="code-area">
       <textarea id="htmlCode" placeholder="Your Code Here" oninput="show()"></textarea>
      </div>

      <b class="head_code_area"><i>Preview Code</i></b>
      <div class="preview-code">
       <iframe id="preview-window"></iframe>
      </div>

<!-- untuk menghubungkan javascript -->
<script src="run.js" type="text/javascript" charset="utf-8"></script>

</body>
</html>

Menambahkan style atau gaya css

style disini adalah mengatur tata letak antara editor teksnya dengan preview dari kodenya itu sendiri.

body{
  height: 100vh;
}

.code-area{
  width: 100%;
  height: 33%;
  border: 1px solid #555;
  margin-bottom: 10px;
}

.code-area textarea{
  width: 96%;
  height: 90%;
  padding: 10px;
  margin: 0;
}
                               
.preview-code{
  width: 100%;
  height: 67%;
  border: 1px solid #555;
}
                                
.preview-code iframe {
  width: 100%;
  height: 100%;
}

.head_code_area{
  background: #1fbcde;
  padding: 5px 10px;
  z-index: 1;
}

Untuk menempatkan kode css diatas buat file style.css

Membuat fungsi javascript untuk run kode

Ya kita perlu javascript untuk text editor kita agar nantinya kode yang ditulis dapat langsung dilihat di dalam kotak preview kodenya.


function show() {

var htmlCode = document.getElementById("htmlCode").value;

var frame = document.getElementById("preview-window").contentWindow.document;

frame.open();

frame.write(htmlCode);

frame.close();

}

Untuk kode javascript diatas buat dan tempatkan di file run.js

Saat kita telah menambahkan fungsi javascript diatas maka text editor kita sudah dapat digunakan seperti berikut

Saya tahu untuk code editor diatas masih banyak kekurangan, teman-teman bisa perbaiki dan tambahkan hal yang mungkin dirasa kurang, baik itu UI nya ataupun fitur lainnya.

Bagaimana? mudahkan cara membuat text editor hanya dengan html css dan js (javascript). Terimakasih sudah membaca tutorial artikel saya semoga bermanfaat.