» » Pemrograman web - Membuat live editor offline
Wednesday, January 8, 2014

Pemrograman web - Membuat live editor offline

Untuk membuat text editor online seperti yang saya sebutkan sebelumnya, kita membutuhkan beberapa library antara lain sebagai berikut :
Syntax highlighting

DOWNLOAD

Anda dapat mempelajari dan mendownload library CodeMirror di http://codemirror.net/
Downloadify

 <!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>Ariona Live Text Editor</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="header">
        <a href="http://www.templatedesignphp.blogspot.com" id="logo"><img src="logo.png" alt=""></a>
        <div id="toolbar">
            <div id="editor-toolbar">
                <h2><span class="icon">H</span>Editor</h2>
                <ul>
                    <li id="download">Download</li>
                </ul>
            </div>
            <div id="preview-toolbar">
                <h2><span class="icon">L</span>Preview</h2>
            </div>
        </div>
    </div>
    <div id="ide">
        <div id="editor">
            <div class="container"><textarea name="" id="editor-area" cols="30" rows="10"></textarea></div>
        </div>
        <div id="preview">
            <div class="container"><iframe src="" frameborder="0" id="preview-area"></iframe></div>
        </div>
    </div>
</body>
</html>

Simpan kode tersebut dengan nama file index.html

Selanjutnya kita buat file style.css, dan paste Style berikut :

/*************************
 *    Global Style
 *************************/

*{
    margin:0;
    padding:0;
    font-family:"TheSans"calibri,arial,sans-serif;
    color:#333;
}
html{height:100%;}
.clearfix{clear:both;}

/*************************
 *    Header, Toolbar
 *************************/
#header{background:url("https://dl.dropbox.com/u/26808427/cdn/ariona/demo/text-editor/grid_noise.png")}
#logo{
    margin:10px 0 10px 10px;
    display: inline-block;
}
#toolbar{
    border-top:1px solid #e3e3e3;
    border-bottom:1px solid #e3e3e3;
    height:20px;
    padding:10px;
    box-shadow:0 5px 10px -7px rgba(0,0,0,.3);
    height:30px;
    background: -webkit-linear-gradient(top,#fff,#efefef);
}
#editor-toolbar,#preview-toolbar{
    width:50%;
    float:left;
}
#toolbar h2{
    font-weight:normal;
    text-shadow:0 1px 1px white;
    color:#888;
    line-height:35px;
    display: inline-block;
}
.icon{
    font-family:"web symbols";
    margin-right:20px;
    font-size:16px;
    position: relative;
    top:-2px;
    color:#888;
}

#toolbar ul{list-style:none;float:right;margin-right:20px;}
#toolbar ul li{float:left;}

.button{
    padding:5px 10px;
    border:1px solid #e3e3e3;
    border-radius:3px;
    cursor:pointer;
    background: -webkit-linear-gradient(top,#fff,#eee);
    box-shadow:0 1px 1px white;
}
#download{
    padding:0;width:100px;height:30px;
    border:1px solid #e3e3e3;
    border-radius:3px;
    cursor:pointer;
    box-shadow:0 1px 1px white;
    position: relative;
    z-index:2;
}
#download:after{
    content:"Download";
    position: absolute;
    top:0;left:0;
    width:100px;
    height:25px;
    padding-top:5px;
    text-align:center;
    background: -webkit-linear-gradient(top,#fff,#eee);
    z-index:-1;
}
/*************************
 *    IDE (EDITOR & PREVIEW)
 *************************/
#ide{
    position: absolute;
    padding-top:10px;
    top:150px;
    left:0;
    right:0;
    bottom:10px;
}
#editor, #preview{
    width:50%;
    float:left;
    height:100%;
    position:relative;
}
.container{
    height:100%;
    position: absolute;
    top:-10px;
    left:0;
    right:0;
    bottom:10px;
}
#editor .container{
    border-right:1px solid #e3e3e3;
    bottom:0;
}
.container textarea,.container iframe,.CodeMirror{
    height:100%;
    width:100%;
    resize:none;
    border:none;
    outline:none;
}
.container iframe{
    position:absolute;
}

/*************************
 *    CodeMirror Style Fix
 *************************/
.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;
}

Isi dari style tersebut antara lain, layouting dan Styling untuk CodeMirror serta Customisasi Scrollbar.
Javascript

Lanjut ke bagian terpenting dari pembuatan Text Editor ini yakni penambahan library-library javascript.
Code Mirror

Dari file yang anda download Copy beberapa file berikut dan paste di folder yang sama dengan file HTML yang kita buat sebelumnya.

lib/codemirror.js
lib/codemirror.css
mode/javascript/javascript.js
mode/css/css.js
mode/htmlmixed/htmlmixed.js
mode/xml/xml.js

Selanjutnya adalah memanggil file-file javascript dan css tersebut ke dalam file HTML kita, untuk melakukannya tambahkan kode berikut di dalam tag Head file index.html.

<link rel="stylesheet" href="codemirror.css">
<script type="text/javascript" src="codemirror.js"></script>
<script type="text/javascript" src="javascript.js"></script>
<script type="text/javascript" src="css.js"></script>
<script type="text/javascript" src="htmlmixed.js"></script>
<script type="text/javascript" src="xml.js"></script>

Setelah penyertaan script-script tersebut, saatnya kita buat text editor kita berjalan sebagaimana mestinya, tambahkan script berikut tepat sebelum tag penutup body.

<script type="text/javascript">
    var delay;
    var editor = CodeMirror.fromTextArea(document.getElementById('editor-area'), {
        mode: 'text/html',
        tabSize:8,
        lineNumbers:true,
        onChange: function() {
            clearTimeout(delay);
            delay = setTimeout(updatePreview, 300);
        }
    });
     
    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>

berikut ini adalah penjelasan kode tersebut :

    Baris ke 1-10

    Bari ini adalah baris inisiasi CodeMirror pada texarea dengan id “editor-area” serta mengaktifkan beberapa property CodeMirror seperti mode,lineNumbers,tabSize dan penambahan event onChange sebagai event yang akan dilakukan ketika kita mengetikkan kode pada editor
    Baris 12-18

    Adalah fungsi yang akan dipanggil ketika kita melakukan perubahan pada text editor, dalam hal ini adalah membuat preview dari code yang diketikkan di editor ke dalam iframe/preview area yang kita sediakan
    Baris 19

    Terakhir kita set timeout untuk fungsi updatePreview

Sejauh ini text editor anda sudah bisa digunakan.
Zen Coding

Seperti yang saya sebutkan sebelumnya, kita akan menambahkan fitur Zen-Coding pada text editor yang kita buat, dari file yang anda download di atas, copy file berikut ke folder yang sama dengan lokasi file HTML kita.

zen_codemirror.js

Panggil file tersebut dalam file index.html kita :

<script type="text/javascript" src="zen_codemirror.js"></script>

Untuk membuat Editor kita memiliki fitur Zen Coding, edit kode inisiasi CodeMirror menjadi seperti berikut :

var editor = CodeMirror.fromTextArea(document.getElementById('editor-area'), {
       mode: 'text/html',
    tabSize:8,
    lineNumbers:true,
    onChange: function() {
        clearTimeout(delay);
        delay = setTimeout(updatePreview, 300);
    },
    onKeyEvent: function() {
        return zen_editor.handleKeyEvent.apply(zen_editor, arguments);
    }
 });

Kita menambahkan event onKeyEvent dan mengembalikan nilai dari fungsi ZenCoding.
Downloadify

Pada folder Downloadify yang telah anda download sebelumnya, copy file-file berikut dan paste pada folder yang sama dengan lokasi file HTML kita (index.html).

js/downloadify.min.js
js/swfobject.js
media/downloadify.swf

Seperti file-file JS sebelumnya, sertakan file-file downloadify ini pada file index.html (kecuali downloadify.swf).

<script type="text/javascript" src="downloadify.min.js"></script>
<script type="text/javascript" src="swfobject.js"></script>

Terakhir adalah membuat tombol download kita berjalan sebagaimana mestinya dengan menerapkan library downloadify, tambahkan script berikut setelah fungsi codemirro sebelumnya.

Downloadify.create('download',{
    filename: "index.html",
    data: function(){
      return editor.getValue();
    },
    onComplete: function(){
      alert('Your file has been saved!');
    },
    onCancel: function(){
      alert('You have cancelled the saving of this file.');
    },
    onError: function(){
      alert('You must put something in the File Contents or there will be nothing to save!');
    },
    transparent: false,
    swf: 'downloadify.swf',
    downloadImage:'download.png',
    width: 100,
    height: 30,
    transparent: true,
    append: false
  });

Copy file download.png disini, file ini dibutuhkan untuk gambar tombol, saya menggunakan gambar kosong, karena tombol telah kita buat dengan CSS.
Posted by at

0 Response to "Pemrograman web - Membuat live editor offline"

Post a Comment

Subscribe to: Post Comments (Atom)