Cara Membuat Editor Keren pakai Javascript

Anda mungkin bercita-cita memiliki sebuah website yang didalamnya membutuhkan tool untuk membuat dan mengedit teks.

Javascript ini adalah solusi yang layak Anda coba. Berikut demo dari hasil ujicoba script.

Anda sudah melakukan klik dua kali pada Textarea diatas?
Apakah keluar box editor? Jika iya maka Anda pasti kaget dan bertanya-tanya, apa mungkin bisa blog gratisan dari blogger dipasang widget editor seperti itu?

Pertanyaan yang bagus dan jawaban singkat dibawah ini akan menjelaskannya kepada Anda.

CSS
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.7.0/build/assets/skins/sam/skin.css"/>
    <style type="text/css" media="screen">
p,h2{margin:1em}
.yui-editor-container{position:absolute;top:-9999px;left:-9999px;z-index:999}
#editor{visibility:hidden;position:absolute}
.editable{border:3px solid #eee;margin:.25em;float:left;width:350px;height:100px;overflow:auto}
#editable_cont{height:auto}
</style>

JAVASCRIPT
<script type="text/javascript" src="http://yui.yahooapis.com/combo?2.7.0/build/yahoo-dom-event/yahoo-dom-event.js&2.7.0/build/container/container_core-min.js&2.7.0/build/menu/menu-min.js&2.7.0/build/element/element-min.js&2.7.0/build/button/button-min.js&2.7.0/build/editor/editor-min.js"></script>
<script type="text/javascript">
!function(){var a=YAHOO.util.Dom,b=YAHOO.util.Event,c=null;YAHOO.log("Setup a stripped down config for the editor","info","example");var d={height:"150px",width:"380px",animate:!0,toolbar:{titlebar:"Editor by: Kangsigit.com",limitCommands:!0,collapse:!0,buttons:[{group:"textstyle",label:"Font Style",buttons:[{type:"push",label:"Tebal",value:"bold"},{type:"push",label:"Miring",value:"italic"},{type:"push",label:"Garis bawah",value:"underline"},{type:"separator"},{type:"select",label:"Arial",value:"fontname",disabled:!0,menu:[{text:"Arial",checked:!0},{text:"Arial Black"},{text:"Comic Sans MS"},{text:"Courier New"},{text:"Lucida Console"},{text:"Tahoma"},{text:"Times New Roman"},{text:"Trebuchet MS"},{text:"Verdana"}]},{type:"spin",label:"13",value:"fontsize",range:[9,75],disabled:!0},{type:"separator"},{type:"color",label:"Warna kolor",value:"forecolor",disabled:!0},{type:"color",label:"Begron kolor",value:"backcolor",disabled:!0}]}]}};YAHOO.log("Override the prototype of the toolbar to use a different string for the collapse button","info","example"),YAHOO.widget.Toolbar.prototype.STR_COLLAPSE="Klik untuk menutup editor",YAHOO.log("Create the Editor..","info","example"),myEditor=new YAHOO.widget.Editor("editor",d),myEditor.on("toolbarLoaded",function(){YAHOO.log("Toolbar is loaded, add a listener for the toolbarCollapsed event","info","example"),this.toolbar.on("toolbarCollapsed",function(){YAHOO.log("Toolbar was collapsed, reposition and save the editors data","info","example"),a.setXY(this.get("element_cont").get("element"),[-99999,-99999]),a.removeClass(this.toolbar.get("cont").parentNode,"yui-toolbar-container-collapsed"),myEditor.saveHTML(),c.value=myEditor.get("element").value,c=null},myEditor,!0)},myEditor,!0),myEditor.render(),b.on("editable_cont","dblclick",function(d){for(var e=b.getTarget(d);"editable_cont"!=e.id;){if(a.hasClass(e,"editable")){YAHOO.log("An element with the classname of editable was double clicked on.","info","example"),null!==c&&(YAHOO.log("There is an editor open, save its data before continuing..","info","example"),myEditor.saveHTML(),c.value=myEditor.get("element").value),YAHOO.log("Get the XY position of the Element that was clicked","info","example");var f=a.getXY(e);YAHOO.log("Set the Editors HTML with the elements innerHTML","info","example"),myEditor.setEditorHTML(e.value),YAHOO.log("Reposition the editor with the elements xy","info","example"),a.setXY(myEditor.get("element_cont").get("element"),f),c=e}e=e.parentNode}})}();
</script>

HTML
<div class="yui-skin-sam">
<div id="davdoc" class="yui-t7">
        <textarea id="editor"></textarea>
        <div id="editable_cont">
            <textarea class="editable">#KLIK DUA KALI UNTUK MENGEDIT</textarea>
        </div>
</div>
</div>

Catatan:

Jika pada DEMO tidak menampilkan box editor, mungkin perenderan script tertunda karena banyaknya Javascript yang dirender secara bersamaan. Namun saya telah melakukan ujicoba hingga beberapa kali dan hasilnya tidak ada masalah.
Jika masih penasaran, Anda bisa mengujinya melalui Notepad plus-plus yang disimpan menggunakan ekstensi .html

URL

Komentar yang bermanfaat mendapat Rating*****oleh Admin blog ini