It's Not jsFiddle, It's Cloud Editor

Salah satu tema post favorit ane adalah mengenai HTML Editor Entah sudah berapa banyak yang sudah gue share buat kalian, silahkan cari-cari di arsip. Beragam HTML-editor kreasiku memiliki tingkatan, dari kelas sederhana sampai master :D Tidak tau sampai kapan akan berhenti menulis artikel tentang editor with live preview ini, selalu saja dapat yg baru dan full stylish ;;) ;))
Sobat tentu sudah pada kenal dengan playground editor keren yg bernama JSFiddle? Salah satu faktor orang akan selalu ingat dengan js-fiddle ini mungkin dengan komposisi tampilannya! Empat buah kotak terpisah guna menempatkan source code/script serta bilik kiri untuk bagian miscellaneous. Sekarang AA Koben akan kasih buat anda Cloud Edit is a JSFiddle like code editor features with jQuery and ace editor b-)

Buka halaman jqueryscript.net dan cari tombol

DownloadDapatkan file source www.jqueryscript.net/text/Creating-A-JSFiddle-Like-Code-Editor-with-jQuery-ACE-Editor-Cloud-Edit.html

Sudah beres, kalian mendapatkan editor baru seperti jsfiddle! Di sini saya akan cerita-cerita sedikit fitur apa saja and fungsi yg ada pada cloud-edit. CloudEdit dibuat dengan penanaman fitur script jQuery, Ace & Emmet!

jQuery - Telah ditanamkan script-jQuery pada embed sehingga mendukung untuk melakukan tes terhadap snippet jQuery. Tidak usah lagi pasang script jQuery inti versi 1.x! (letak berada pada kotak ke-3 JavaScript/jQuery 1.x)
Ace - Guna mendukung high performance pada editor pemasangan syntax highlighter ACE menjadi pilihan. Ada beberapa pilihan opsi themes light/dark.
Emmet - Guna mempermudah penulisan syntax, EMMET terpilih menjadi acuan.

Selain ketiga fitur tersebut, ada beberapa fitur lain yg tidak bisa dianggap remeh L-)
CSS Option meliputi Autoprefixer, Less CSS, Sass CSS (experimental) and modernizr. Frameworks mencakup Bootstrap and Foundation. Deretan tombol berjejer dengan multi fungsi, silahkan dicoba masing-masing. Gue cuma akan jelaskan fungsi 2 tombol yg ada. Tombol save memiliki fungsi melakukan save di local storage. Tombol load berfungsi memanggil kembali pekerjaan dari tombol save!

Pada si ace sebenarnya ada fitur Autocomplete. Yang ketika menuliskan sesuatu akan diberikan opsi pilihan. Gue sudah tanamkan script tersebut! Tetapi pada kotak HTML tidak berjalan mulus, namun berjalan baik pada kotak CSS & JavaScript/jQuery. Mungkin bentrok dengan si emmet, dan saya blon paham script jadi kagak bisa benerinnya :))Screenshot CloudEdit hasil modifikasi AA sudah tentu ada autocomplete yg tidak ada pada original source :P Apakah sobat tertarik mendapatakannya >:) Oooops ampir kelupaan, ada juga kotak console tidak tauk saya cara pakainya, yaaa jadi gak apa-apa lupakan saja 8-}

Password ZIP: jQuery Cloud Edit by www.jqueryscript.net
Bonus, simple mode github.com/sw4/codeFiddle - github.com/nadiahamdaoui/CodeEditor

Happy fiddle \m/