Web Editor Sederhana Dengan jQuery

 Author : hadinug, 18 February, 2014, Komentar

Kami yakin banyak diantara kita para developer web tidak tau bagaimana cara membuat sebuah web editor dan kebanyakan diantara kita menggunakan plugin editor web yang sudah ada, tanpa tau bagaimana cara pembuatan nya meski sederhana.


Berangkat dari masalah sepele ketika kami ingin membuat sebuah CMS yang benar-benar pure menggunakan plugin jQuery buatan sendiri, kami berusaha mencari literatur dan tutorial pembuatan editor web. Dan syukurnya kami bertemu dengan 2 link ini, yang menjadi bahan pembelajaran kami dalam membuat editor website:




Dari kedua link tersebut kami mencoba membuat sebuah editor sederhana yang kami coba tuangkan kedalam tulisan ini. Langsung saja kita mulai dengan membuat text HTML yang akan kita gunakan sebagai icon menu. 

<div id="wyswyg"> 
    <div id="textBar">
        <div class="bar">

            <a href="#" original-title="bold"><i class="icon-bold"></i></a> 
            <a href="#" original-title="italic"><i class="icon-italic"></i></a> 
            <a href="#" original-title="underline"><i class="icon-underline"></i></a> 
            <a href="#" original-title="strikethrough"><i class="icon-strikethrough"></i></a> 
            <span class="sparater"></span>
            <a href="#" original-title="createLink"><i class="icon-link"></i></a> 
            <a href="#" original-title="unlink"><i class="icon-unlink"></i></a> 
            <a href="#" original-title="createImage"><i class="icon-camera"></i></a>  
            <span class="sparater"></span>
            <select id="formatblock" onchange="Select(this);">
                <option value="<p>">Normal</option>
                <option value="<p>">Paragraph</option>
                <option value="<h1>">Heading 1 &lt;1&gt;</option>
                <option value="<h2>">Heading 2 &lt;2&gt;</option>
                <option value="<h3>">Heading 3 &lt;3&gt;</option>
                <option value="<h4>">Heading 4 &lt;4&gt;</option>
                <option value="<h5>">Heading 5 &lt;5&gt;</option>
                <option value="<h6>">Heading 6 &lt;6&gt;</option>
                <option value="<address>">Address &lt;ADDR&gt;</option>
                <option value="<pre>">Formatted &lt;PRE&gt;</option>
            </select> 
            <select id="fontname" onchange="Select(this);">
                <option value="Font">Font</option>
                <option value="Arial">Arial</option>
                <option value="Courier">Courier</option>
                <option value="Times New Roman">Times New Roman</option>
            </select> 
            <select unselectable="on" id="fontsize" onchange="Select(this);">
                <option value="Size">Size</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
                <option value="7">7</option>  
            </select> 
        </div>
        <div class="bar">
            <a href="#" original-title="outdent"><i class="icon-indent-left"></i></a> 
            <a href="#" original-title="indent"><i class="icon-indent-right"></i></a> 
            <span class="sparater"></span>
            <a href="#" original-title="removeFormat"><i class="icon-eraser"></i></a> 
            <span class="sparater"></span>
            <a href="#" original-title="undo"><i class="icon-rotate-left"></i></a> 
            <a href="#" original-title="redo"><i class="icon-rotate-right"></i></a> 
            <span class="sparater"></span>            
            <a href="#" original-title="insertorderedlist"><i class="icon-list-ol"></i></a> 
            <a href="#" original-title="insertunorderedlist"><i class="icon-list-ul"></i></a>   
            <span class="sparater"></span>            
            <a href="#" original-title="justifyleft"><i class="icon-align-left"></i></a> 
            <a href="#" original-title="justifycenter"><i class="icon-align-center"></i></a>            
            <a href="#" original-title="justifyfull"><i class="icon-align-justify"></i></a> 
            <a href="#" original-title="justifyright"><i class="icon-align-right"></i></a> 
            <span class="sparater"></span>                       
            <a href="#" original-title="subscript"><i class="icon-subscript"></i></a> 
            <a href="#" original-title="superscript"><i class="icon-superscript"></i></a> 
            <span class="sparater"></span>               
            <a href="#" original-title="unchecked"><i class="icon-check-empty"></i></a> 
        </div>
    </div>
    <div id="textBox" contenteditable="true" spellcheck="false">
        <p>
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
        </p>
    </div> 
    <textarea id="textPre"></textarea>
</div>

Catatan: pada icon saya menggunakan fontAwesome, untuk memperindah button dan  plugin jquery tootip yang pernah saya tulis di website ini.

Kemudian pada script javascript, saya menambahkan 2 function yaitu:
  1. formatDoc, digunakan untuk memformat editor, seperti memberi tulisan bold, underline dll.
  2. Select, digunakan untuk menambahkan format pada editor berdasarkan option menu yang dipilih.

<script type="text/javascript">
    var oDoc = $('#textBox');
    function formatDoc(sCmd, sValue) {
        document.execCommand(sCmd, false, sValue);
        oDoc.focus();
    }
    function Select(i) {
        var sCmd = $(i).attr('id');
        var sValue = $(i).val();
        formatDoc(sCmd, sValue)
    }
    $(function() {
        $('#textBar').find('a').attr({
            'tooltip': true,
            'tooltip-position': 'bottom'
        });
        $('#textBar').find('a').click(function() {
            var sCmd = $(this).attr('original-title');
            switch (sCmd) {
                case 'createLink':
                    var szURL = prompt("Enter a URL:", "http://");
                    if ((szURL !== null) && (szURL !== "")) {
                        formatDoc("CreateLink", szURL);
                    }
                    break;
                case 'createImage':
                    imagePath = prompt('Enter Image URL:', 'http://');
                    if ((imagePath !== null) && (imagePath !== "")) {
                        formatDoc('InsertImage', imagePath);
                    }
                    break;
                case 'unchecked':
                    $(this).find('i').attr({
                        'class': 'icon-check'
                    });
                    $(this).attr({
                        'original-title': 'checked'
                    });
                    html = $('#textBox').html();
                    $('#textBox').text('').hide();
                    $('#textPre').val(html).show();
                    break;
                case 'checked':
                    $(this).find('i').attr({
                        'class': 'icon-check-empty'
                    });
                    $(this).attr({
                        'original-title': 'unchecked'
                    });
                    val = $('#textPre').val();
                    $('#textPre').hide();
                    $('#textBox').html(val).show();
                    break;
                default:
                    formatDoc(sCmd);
                    break;
            }
        });
    });
</script> 
Yang menjadi fokus kita adalah function formatDoc, yang akan sering kita guanakan untuk memberikan format dan style pada web editor.

Demo   atau   Download

 
Bagikan halaman ke sosial media
 
Tags :   jQuery    texteditor       

Tentang Penulis

writer hadinug
Web Developer di PT. Yafii Solusi Internasional

Link: http://ysi.co.id

   Komentar Anda