Membuat HTML Editor dengan Javascript Dilengkapi Instant Preview

TeknoCerdas.com – Salam cerdas untuk kita semua. Ketika membuat sebuah halaman HTML pengembang akan sangat terbantu dengan adanya instant preview dari kode HTML yang diketik. Dengan adanya instant preview proses prototyping akan lebih mudah. Dan membuat sebuah HTML editor dengan fitur instant preview ternyata tidak sulit dilakukan. Tulisan ini akan membantu anda membuat HTML editor dengan Javascript yang dilengkapi instant preview dengan mudah.

Kita mulai dulu dengan tampilan HTML editor yang dibuat. Kita akan membagi halaman menjadi dua bagian sama lebar. Yaitu bagian untuk HTML editor dan untuk preview.

Buat sebuah direktori baru misalnya html-editor yang didalamnya buat sebuah file HTML bernama index.html. Buka file index.html dengan teks editor lalu masukkan kode HTML dan CSS berikut.




HTML Editor with instant preview demo







    HTML Editor
    




    Preview

Kode diatas cukup sederhana hanya membagi halaman dengan komponen utama yaitu editor dan preview. Dimana pembagian lebar masing-masing komponen adalah separuh lebar halaman.

Pada bagian editor digunakan komponen textarea untuk mengetikkan kode HTML yang akan diproses. Sedangkan pada bagian preview digunakan komponen iframe.

Baik, sekarang coba buka file index.html tersebut dengan browser untuk melihat hasilnya.

Tampilan sudah sesuai dengan keinginan. Langkah berikutnya adalah menambahkan kode Javascript agar setiap perubahan yang ada pada HTML editor otomatis hasilnya akan ditampilkan pada panel preview.

Lakukan perubahan pada file index.html dengan menambahkan blok Javascript. Letakkan kode ini sebelum .

Hanya seperti itu saja? Ya benar hanya sesederhana itu. Setiap perubahan pada textarea atau panel editor akan dimonitor oleh event listener input. Jika ada perubahan maka panggil fungsi updatePreview yang akan melakukan upadate pada content iframe.

Untuk membuktikannya coba buka atau reload file index.html pada browser kemudian copy-paste kode dibawah ini ke panel editor.

Sesaat setelah kode HTML diatas di tempel ke panel HTML editor maka otomatis panel preview akan menampilkan tampilan sesuai dengan kode yang diketikkan.

Pada contoh diatas adalah sebuah halaman dengan satu inputan textbox. Ketika inputan textbox tersebut diisi maka otomatis warna dari background akan berubah. Penasaran coba saja masukkan warna yang didukung oleh HTML misal cyan atau #c60000 untuk merah merah maroon.

Kode HTML dan Javascript otomatis langsung dapat dipreview

Ketika anda mengetikkan sesuatu pada panel HTML editor otomatis langsung terefleksi di panel preview. Ini sangat memudahkan prototyping dan mencoba beberapa kode tanpa perlu membuat file HTML terlebih dahulu.

Jika kodenya pendek mungkin masih enak dibaca, tapi bagaimana jika kodenya sangat panjang? Hal itu akan menyulitkan. Karena itu langkah berikutnya adalah memasang syntax highlighter agar kode yang diketik otomatis memiliki warna seperti Sublime atau VS Code.

Pustaka yang akan digunakan adalah CodeMirror yang dapat didownload di https://codemirror.net/. Perubahan yang dilakukan pun tidak banyak. Hanya memanggil pustaka dan style dari CDN kemudian menggunakannya. Cukup beberapa baris saja. Tambahkan beberapa baris ini sebelum tag .

Kode diatas akan mengambil pustaka CodeMirror yang dibutuhkan untuk melakukan syntax highlighting kode HTML, CSS dan Javascript. Pada kode blok Javascript lakukan perubahan berikut ini untuk memanggil CodeMirror.

Kode diatas melakukan inisialisasi CodeMirror menggunakan DOM element dari textarea yang digunakan untuk kode editor. Karena CodeMirror memiliki API untuk memonitor perubahan lewat change, maka kita gunakan API tersebut dan menghapus event listener input dari komponen code-editor.

Untuk melihat perubahan maka reload browser, seharusnya tampilan akan berubah menjadi Monokai theme pada panel HTML Editor.