Nurul Imam Studio

Belajar HTML, CSS, JavaScript, PHP & MySQL untuk pemula & tingkat lanjut

Jasa Pembuatan Website Profesional

Membuat HTML & CSS Editor Online

Mungkin anda pernah melihat HTML & CSS Editor seperti w3schools & sebagainya. Jika anda ingin membuatnya, kita membutuhkan beberapa library diantaranya sebagai berikut.

Syntax highlighter

Banyak sekali library javascript yang berfungsi untuk merubah textarea HTML biasa menjadi HTML & CSS Editor dengan fitur Syntax Highlighting, seperti TextEdit, AceEditor & CodeMirror. Kita akan menggunakan salah satu library tersebut yaitu CodeMirror (http://codemirror.net/) untuk membuat HTML & CSS editor online. Bagi anda yang ingin mendownload keseluruhan source dalam tutorial ini, anda bisa mendownload & melihat demonya dibawah ini.

Demo HTML Live Editor   Download Source

Membuat Tampilan HTML & CSS Editor

Pertama-tama, buat folder tool & file html dengan nama html-css-editor.html. Kemudian ketikkan markup html dibawah ini.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>HTML & CSS Live Editor</title>
<link rel="stylesheet" href="inc/style.css">
<link rel="stylesheet" href="inc/codemirror.css">
<link rel="stylesheet" href="inc/simple-hint.css">   
<script type="text/javascript" src="inc/codemirror.js"></script>
<script type="text/javascript" src="inc/javascript.js"></script>
<script type="text/javascript" src="inc/css.js"></script>
   <script type="text/javascript" src="inc/xml.js"></script>
   <script type="text/javascript" src="inc/htmlmixed.js"></script>
 <script type="text/javascript" src="inc/simple-hint.js"></script>
   <script type="text/javascript" src="inc/zen_codemirror.js"></script>
    <script type="text/javascript" src="inc/swfobject.js"></script>
</head>
<body>
<div class="background">
<h1><a href="http://www.nurulimam.com" id="judul">&lt;!-- Nurul Imam Tools --&gt;</a></h1>
<div id="alat">
<div id="code">
<h2>Code</h2>
</div>
<div id="demo">
<h2>Preview</h2>
</div>
</div>
<div class="bersih"></div>
</div>

<div id="ide">
<div id="editor">
<div class="lebar">
<textarea name="" id="editor-area" cols="30" rows="10"></textarea>
</div>
</div>
<div id="preview">
<div class="lebar">
<iframe src frameborder="0" id="preview-area"></iframe>
</div>
</div>
</div>

<script type="text/javascript">
      var delay;
      var editor = CodeMirror.fromTextArea(document.getElementById('editor-area'), {
        mode: 'text/html',
        tabSize:8,
        indentUnit:8,
        matchBrackets: true,
        lineNumbers:true,
        onChange: function() {
          clearTimeout(delay);
          delay = setTimeout(updatePreview, 300);
        },
        onKeyEvent: function() {
            return zen_editor.handleKeyEvent.apply(zen_editor, arguments);
      }
      });
      
      function updatePreview() {
        var previewFrame = document.getElementById('preview-area');
        var preview =  previewFrame.contentDocument ||  previewFrame.contentWindow.document;
        preview.open();
        preview.write(editor.getValue());
        preview.close();
      }
      setTimeout(updatePreview, 300);
</script>
</body>
</html>

Kemudian kita buat file css dengan nama style.css & ketikkan kode css dibawah ini.

*{
 margin:0;
   padding:0;
  font-family: Consolas, Monaco, Lucida Console, monospace;
   color:#000;
}
html{height:100%;}
.bersih{clear:both;}
a:link, a:hover, a:visited { text-decoration:none; color:#888;}
.background{background:url("http://www.nurulimam.com/wp-content/themes/h95vs4/images/bg.gif")}
#judul {
   margin:20px 0 20px 70px;
        font-size:20px;
        font-weight:normal;
  display: inline-block;
}
#alat{
   border-top:1px solid #e3e3e3;
   border-bottom:1px solid #e3e3e3;
    height:20px;
    padding:10px 0 10px 50px;
   box-shadow:0 5px 10px -7px rgba(0,0,0,.3);
  height:30px;
    background: -webkit-linear-gradient(top,#fff,#efefef);
}
#code,#demo{
 width:50%;
  float:left;
}
#alat h2{
   font-weight:normal;
 text-shadow:0 1px 1px white;
    color:#888;
 line-height:35px;
   display: inline-block;
}
#ide{
position: absolute;
padding-top:10px;
top:120px;
left:0;
right:0;
bottom:0;
}
#editor, #preview{
width:50%;
float:left;
height:100%;
  position:relative;
}
.lebar{
height:100%;
position: absolute;
top:-10px;
left:0;
right:0;
bottom:10px;
}
#editor .container{
  border-right:1px solid #e3e3e3;
 bottom:0;
}
.lebar textarea,.lebar iframe,.CodeMirror{
    height:100%;
    width:100%;
 resize:none;
    border:none;
    outline:none;
}
.lebar iframe{
    position:absolute;
}
.CodeMirror-scroll{height:100%  !important}
.CodeMirror-gutter,.CodeMirror-lines{line-height:20px;}
::-webkit-scrollbar {
  width : 5px;
    height: 5px;
}
::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius        : 10px;
    background           : #A8DAEA;
}
::-webkit-slider-thumb element,
::-webkit-scrollbar-track {
  background           : white;
   -webkit-border-radius: 10px;
    border-radius        : 10px;
}

Setelah itu, pindahkan semua css & javascript pada folder inc. Setelah semuanya selesai, buka halaman localhost/tool/html-css-editor.html.

19 Comments

  1. Intan SudibjoReply

    ternyata ribet juga bikin yang kaya gini yah wkwkwk :D

    • Nurul ImamReply

      Tinggal copy paste kodenya aja atuh klo ribet :p

  2. Ismail NReply

    Saya gunakan WordPress utk membuat blog. Bagaimana saya mahu aplikasikan tutorial di atas bagi blog saya. Ada contoh? Maaf ya, saya enggak expert dalam coding ni. Jadi soalan agak keanak-anak kan sedikit.

    • Nurul ImamReply

      Tinggal buka file manager di web hostingnya, lalu buat filenya seperti yang sudah dijelaskan diatas. :)

  3. Cara RirinReply

    Wah keren mas editor html css online nya. Saya sudah melihat demo nya :)

    • Nurul ImamReply

      Ini juga ada ide karena blogwalking di blog mbak ririn & blog lainnya.

  4. blogditter.comReply

    HTML & CSS editor online… hmm…. Nggak paham…. *malu

    • Nurul ImamReply

      Ga usah malu, pake helm aja :D

  5. titanReply

    hoho..leh pening wat benda nih. haha

    • Nurul ImamReply

      Siapin obat sakit kepala :D

  6. ewinkReply

    wah ini dia yang saya cari-cari :D
    Sangat berguna buat saya yang lagi coba-coba belajar html dan css hehehe
    terimakasih tutornya gan, akhirnya bisa edit-edit html dan css secara offline

    • Nurul ImamReply

      Iya sama-sama :)

  7. Reza - Dhe DinReply

    Mas, minta izin untuk memasang (sekarang masih dalam proses edit) html & css editor di 2 blog saya yaitu blogpakdedin.blogspot.com dan mengganti templates.blogspot.com. Dan sebagai bentuk apresiasi untuk mas Nurul Iman, tentunya link nuruliman.com akan kami tampilkan. Dan apresiasi selanjutnya adalah semoga “sukses terus dengan segala kebaikan”. Terimakasih.

    • Nurul ImamReply

      Silahkan mas :)

  8. adamReply

    Mas, minta izin untuk memasang (sekarang masih dalam proses edit) html & css editor di web amatir saya angkatanke3.esy.es. Dan sebagai bentuk apresiasiuntuk mas Nurul Iman, tentunya link nuruliman.com akan kami tampilkan.

    • Nurul ImamReply

      Silahkan mas, ambil saja jika bermanfaat :)

  9. MusliminReply

    mau bertanya mas, kalo semisal editor ini akan diterapkan pada sebuah website, dan pada bagian halaman administratornya digunakan untuk mengedit file2 yang ada pada hostingan tanpa harus masuk ke bagian CPANEL, bisa nga mas??? terima kasih.

  10. ApradizReply

    mantap…

  11. roriReply

    kalo java gimna mas bisa gak ?

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>